Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Studies’.

We are pleased to present below all posts tagged with ‘Studies’.

Taking A Closer Look At Tech Conferences: The Nitty Gritty Details (A Study)

As I was flying back from the Smashing Conference in New York, I wondered whether it was a success. This wasn’t an original thought. We are always wondering what makes a conference good and what elements will make industry workers stay away.

Taking A Closer Look At Tech Conferences: The Nitty Gritty Details (A Study)

Good and bad are such subjective terms, though, with almost as many expectations as there are attendees. We decided that just looking at the numbers instead might be a good idea. This article will not present best practices for planning a conference, but rather will look at how it’s actually done most of the time. While this is not a guide to putting together the perfect conference, it gives a good overview of what seems to work and which elements are so unpredictable that they do not serve as reliable guidelines.

Read more...

UX Study The State Of E-Commerce Checkout Design 2012

A year ago we published an article on 11 fundamental guidelines for e-commerce checkout design here at Smashing Magazine. The guidelines presented were based on the 63 findings of a larger E-Commerce Checkout Usability research study we conducted in 2011 focusing strictly on the checkout user experience, from “cart” to “completed order".

The State Of E-Commerce Checkout Design 2012

This year we've taken a look at the state of e-commerce checkouts by documenting and benchmarking the checkout processes of the top 100 grossing e-commerce websites based on the findings from the original research study. This has lead to a massive checkout database with 508 checkout steps reviewed, 975 screenshots, and 3,000+ examples of adherences and violations of the checkout usability guidelines.

Read more...

How To Turn Small Projects Into Big Profit – A Case Study

In the Web world, hearing businesses and freelancers alike complain about low-budget projects is not too uncommon. Let’s say that a local coffee shop needs to update its Web presence and contacts you for a redesign. It also requires a blog so that it can announce new coffees, events and so on. However, during the course of the first meeting, the client mentions that they don’t have a budget.

Menno Tea - Our Teas

Being the inquisitive businessperson that you are, you say, “Well, we work with budgets of almost any size. What price range were you thinking of?” The owner of the coffee shop reveals that he has only $1500 to spend on the website. Thinking it would be a waste of time, you walk away.

Read more...

Behind The Scenes Of Nike Better World – Storytelling Experience

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It's been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.

screenshot

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We'll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we'll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

Read more...

Proximity in Design: Why I Can’t Use My Car’s A/C

I’m always fumbling with the A/C controls in my car. My daily commute is in hot, sunny Southern California, home of the courteous freeway driver. I can’t afford to take my eyes off the road for too long to find the control I’m looking for. Half of the time when I'm trying to adjust the temperature, I end up blowing my beard off because I’ve spun the wrong dial. If my wife’s in the car with me, I usually resort to asking her to do it for me.

My Car's A/C Controls

There’s a simple design principle that, had it been given greater attention, could have made this needlessly confusing interface much easier to use: proximity.

Read more...

A Study of Trends in Mobile Design

This article is a part of our new eBook Mobile Design For iPhone And iPad (just $9.90). The eBook presents articles on professional design for the iPhone and iPad, including guidelines for the development of mobile web pages. Available in PDF, Mobipocket and ePUB formats.

The industry has evolved in many ways, but one particular area has affected how we build websites to a greater extent than any other. The surge in Web-enabled mobile devices has forged a subculture of visitors who require the adaptation of our websites to meet their needs. While mobile design is still in its infancy (and little primary research on mobile trends exist), we need to observe how this now-critical element of our industry is evolving, and the patterns which exist from current development efforts.

Screenshot

[fblike]

The aim of this article is to showcase the variety of methods in which some of today's most popular websites provide an interactive and (hopefully) useful mobile experience for their end users. There are plenty of big names which were analyzed, such as Facebook and Amazon, and you'll see plenty of useful graphs to draw some inspiration from. With statistics and some really interesting revelations on the diversity of modern design, you can be excited about the future of mobile Web design!

You may be interested in the following related studies:

Read more...

Case-Study: Deconstructing Popular Websites

In our past articles, we've experimented with better ways to engage users on web pages with CSS3. We love getting into the nuts and bolts of web design by showing off some nifty coding tricks. In this article we'll take a step back to provide some reasoning for designers to embark on that next redesign.

Screenshot

Great web design happens with sound user needs, solid business goals and focused metrics. Learning how to deconstruct a website is an important step in building a plan that aligns the company vision with the needs of users. A good review will put the focus on the profitability of the business.

Read more...

Portfolio Design Study: Design Patterns and Current Practices

In our recent study on Typographic Design Patterns and Best Practices, we asked our readers about case studies they would like us to conduct. One of the most popular suggestions was a detailed case study of portfolio websites. Following the requests of our readers, we have carefully selected 55 design agencies and Web development agencies, analyzed their porfolio websites and identified popular design patterns. The main goal of the study was to provide freelancers and design agencies with useful pointers for designing their own portfolio.

Huge Inc's case study

This post presents the initial results of our big portfolio design study. Below, we discuss the visual design, structure, layout and navigation of portfolio websites. We also get into the design details of every single section, including the about, clients, services, portfolio, workflow and contact pages. Of course, you do not necessarily have to follow the findings presented here; rather, use them to get a general idea of what other portfolios look like, and then come up with something of your own that is usable, distinctive and memorable. We would like to thank Mark Nutter for helping us gather data for this study.

The second part of the study will be published here, on Smashing Magazine, in two weeks. Hence, please subscribe to our RSS-feed and follow us on Twitter.

Any ideas or suggestions? Maybe there is something else that you would like us to analyze additionally in this study? Comment on this article — we are listening!

Read more...

Typographic Design Patterns And Best Practices

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding... The list goes on and on. [Links checked February/09/2017]

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We've chosen popular newspapers, magazines and blogs as well as various typography-related websites.

Paragraph spacing size graph.

We've carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites' various values (for example, the ratio between the line height and line length).

Read more...

Web Form Design Patterns: Sign-Up Forms, Part 2

Last week we have presented first findings of our web forms survey. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved. [Content Care Nov/11/2016]

Screenshot

We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Afterwards we've gone through each and every one sign-up form of the selected sites and analyzed the design approaches implemented in these forms. Below we present the second part of our findings — the results of our survey among web-forms of 100 popular web-sites where web-forms (should) matter.

Please notice that this post is not about checkout forms — that's a topic for another discussion, we may consider them separately in one of the upcoming posts. We would like to thank Wufoo for providing us with a framework to conduct our survey.

Read more...

Web Form Design Patterns: Sign-Up Forms

If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. We need to invite them, describe to them how the service works, explain to them why they should fill in the form and suggests the benefits they'll get in return. And, of course, we should also make it extremely easy for them to participate. [Content Care Nov/15/2016]

However, designing effective web forms isn't easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.

Web Form Design Patterns

But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we've asked ourselves. And to get the answers we've conducted a survey.

Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. We have decided to start with sign-up forms first. We present the first part of our findings below; the second part of the survey results will be published next week.

Update: the second part of the survey results is now also published: Web Form Design Patterns: Sign-Up Forms Part 2.

Read more...

30 Usability Issues To Be Aware Of

You don't have to agree upon everything. As a professional web developer you are the advocate of your visitors' interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it's your job to compromise wrong ideas and misleading concepts instead of following them blindly. [Content Care Oct/11/2016]

In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it's important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it's always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.

Eye-Tracking
Eye-Tracking: Source.

In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it's time to dive in.

Read more...
1

↑ Back to top