Posts Tagged ‘Studies’

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

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.

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...

A Small Study Of Big Blogs: Further Findings

Last week we presented the first results of our study of top blogs. As promised, this week we publish the second part of the survey, including further findings and problem solutions we have found out during the study. In the first part we discussed layout design and typographic settings. What remains to be covered are the navigation design, information architecture, advertisements and functionality (RSS-feeds, tag clouds, pagination etc.).

Reminder: since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. We have identified important design problems and considered solutions for each of the problems separately.

ReadWriteWeb

We have posed 30 questions which we wanted to to answer with our blog survey. Below we present further findings of our survey of popular blog designs — the second part of the analysis of 50 popular blogs according to Technorait's Top 100.

Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. Still it is useful to know what big players do and, more importantly, what they don't do.

Read more...

A Small Design Study Of Big Blogs

We are quite curious; particularly when it comes to design and web-development we want to know just everything. Therefore, following our web form design survey, we have decided to take a closer look at blog designs, analyze them and find out which design solutions are common and which solutions are not used at all.

Since we wanted to make the survey as objective as possible, we used Technorati Top Blogs and analyzed 50 most popular blogs which appear there. It doesn't really matter if the Technorati list is correct or not — we wanted to find out what design solutions big players (aka most popular blogs) prefer. Popular blogs are often considered to be examples of effective and functional design (which is not necessarily the case).

Screenshot

We have identified 30 design problems and considered solutions for each of the problems separately. We have posed 30 questions which we would like to answer with our blog survey. Below we present findings of our survey of popular blog designs — the results of an analysis of 50 popular blogs according to Technorati's Top 100.

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.

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.

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...

Screen Resolutions and Better User Experience

In order to work well, designs have to be optimized for simplicity, transparency and, consequently, optimal user experience. The user experience itself is, however, in many cases just an elegant term employed with false intentions and wrong approaches.

Optimal user experience is rarely achieved by visual design elements, although some stakeholders are strongly convinced that it actually is the case. What actually matters is the fact that the content is accessible and legible — and although visual design can support the content and help to communicate with your target audience in a more effective way, it is not a solid foundation to build a successful web-site upon. (In fact, to compromise stakeholders' understanding of design solutions is your primary task if you strive to be a professional web-developer.)

Chart Screenshot

Whatever stages you are going through in your design process, to perform well you need to make sure that your design works for most visitors, whatever screen resolution they use. It's not about the graphics visitors see; as stated above, it's about the content they are looking for.

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.

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...

↑ Back to top