Fundamentals of Web UI Design

web ui designUser Interface (UI) Design is about creating visually pleasing layouts that allow users to fluently use the site. The user is the one who will decide, so UI must anticipate what is going to be used.  It is not about looks alone; nothing matters if it is not usable. If it cannot be used, it should not exist. Learn how to design web interfaces in this master class from Udemy today.

Interaction design, visual design, and information architecture come together to create UI Design.

Interaction Design

According to usability.gov, “Interaction design focuses on creating engaging interfaces with well thought out behaviors.”

  • You should understand how communication happens between users and technology.
  • You must anticipate how a user will interact with the system.
  • Then you can fix problems early and invent new ways to design.

Visual Design

According to usability.gov, “Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.”

  • It must not detract from the page or function of the page.
  • It should enhance the page by engaging users.
  • It should bring trust and interest to the brand.

Information Architecture

According to usability.gov, “Information architecture focuses on organizing, structuring, and labeling content in an effective and sustainable way.”

  • It should help users find information and complete their tasks.
  • You must understand how the pieces of the interface fit together to create the big picture.
  • This picture should show how items relate to each other in the system.

What Is Good Web Design?

There are many articles that discuss how to implement the details of effective web design, and I will be posting a UI tutorial based article soon, but for this purpose I will focus on some great principles of design as a basis of how to think when designing UI.

How to design UI interfaces in jQuery

The first step in designing UI web pages, you must learn how users think. Habits do not change much from the brick and mortar stores to online shop fronts. Vistiors will scan text, meander toward the thing that catches their eye or looks like what they came for. There are parts of the page they will not look at just as they will not go into parts of the store. If they do not find what they wanted, they will click the back button and start the process over.

  • Users want quality and credibility.
  • Content is more important than the design.
  • Users will not read every word, they will scan the page.
  • Users are impatient.
  • Users do not make optimal choices, they make satisficing ones.
  • Users follow intuition.
  • Users want control.

Make it Intuitive

Conscious decision making by users in not what they want. They don’t want to be stumped, trying to decide what to do. In Steve Krug’s book about usability, Don’t Make Me Think, he says that a web page should be obvious and self-explanatory. Going from point A to point B must be intuitive for the users. Provide visible cues, for instance: make links easy to read, but don’t underline anything that is not a link unless you want your user clicking repetitively and swearing.

Patience is not a virtue for Web Users

The less action that is required of your user to test your service, the more likely they will do it. A random visitor who is not sure they want to use your site again will not be willing to fill out a long form of account information at the on-set. Trust them to explore without forcing disclosure of their personal information. Users do not consider it reasonable to offer up their email address for access to a site. They are more likely to want to give their email in return for something they already have seen and approved. In an ideal world, all barriers would be removed, but if you must require information, make it simple, quick, and unobtrusive.

Focus the User’s Attention

Your site will provide both static and dynamic content. Images, headings, bold text, and videos are dynamic and will catch the attention of the user. Use this to your advantage guiding the user from point A to point B without them having to pull out their GPS to get there.

Aim for an F, ignore the A

Users tend to scan web sites in an F-pattern. Look at the page, and see what falls in this pattern. Is that what your users should see first? Second? Third?

Expose the Features

Modern websites are often criticized by their 1-2-3 approach with big elements, but these designs are very affective for usability. The user is guided through the page without having to think about it. If you let the user clearly see which functions are available to them, you are following a fundamental principle of successful user interface design. How successful UI Design is achieved is not as important as the outcome. If the content is well-understood and visitors feel comfortable interacting with the system, you have done your job well.

Design UI Elements in Photoshop

Write Content Effectively

Writing for the web is different than for print. Adjust the style accordingly:

  • Keep it concise
  • Keep it coherent
  • Use hierarchy
  • Make use of bold print, and headings
  • Generally, sanserif is easier to read online than serif typefaces, and vice versa in print.

The user’s preferences and browsing habits should dictate what is included:

  • They won’t read promotional writing.
  • They won’t read long text blocks without images, keywords bolded, or italicized.
  • They will ignore exaggerated language.

Avoid cute or clever names, creative marketing names, company-specific names, and any unfamiliar technical names. Keep it business worthy. For instance, if you want the users to create an account, use the words sign up. Start now is a bit unclear; explore our services is outright sneaky.

Keep it Simple

Keep it Simple (KIS) should be the primary goal of your site design. Users are rarely on a site to view the design. Actually, they are often at the site in spite of the design, looking for information. Complexity does them no favors, so keep it simple. Many designers disagree with the KIS notion. They believe it means the user is simple, but this is not the reason designers must keep it simple. The most intelligent user appreciates a simple to use design that is intuitive. It’s a hospitality service we give to our users.

Leave Breathing Room

White space is your friend. It is the friend of users. It breaks up clutter. It gives users room to breathe. You cannot underestimate the importance of white space.

If you disagree, look at this website: http://stillwatersresort.com/ Stillwaters is a lovely resort which I have stayed at, but I specifically chose their website as my class project redesign in my UX Design class during college because of the cluttered look. I immediately opened the site, which is stuffed with every piece of information you need, but I felt overwhelmed just looking at it.

Compare this to http://www.healthequitylabs.com/ , a company I do some writing and researchfor, their site is not white in color, but it contains plenty of white space. Yes, their mission on this site is more simplistic, but it is easy to look at and not at all overwhelming.

Even a site like http://www.amazon.com/ which has much more to include than the resort site includes enough white space to allow the user to breathe.

Take this article as another example. If no hierarchal headings with the extra space they provide were added, and the article was one large block of paragraphs, would you have read this far into the article? We left textbooks behind when we left college. Don’t give your users one to read, they won’t do it.

Communicate with “Visible Language”

“Visible Language” is an idea conceptualized by Aaron Marcus in his papers on effective communication. Marcus describes “visible language” as the content that users see on-screen.

Organize

Strive to provide the user with clear and consistence conceptual structure. The important concepts of organization are consistency, screen layout, relationships, and navigability. These should be applied to all elements on every page of a site.

Economize

Be concise: do the most with the least amount of visual elements. Consider these four points: simplicity, clarity, distinctiveness, and emphasis.

Simplicity

Include only all the elements which are most important for communication.

Clarity

No ambiguity is allowed in any components.

Distinctiveness

Important properties of all necessary elements must be distinguishable.

Emphasis

The most important elements should be perceived easily.

Communicate

Think about your user. What education level do they have? Write for them, not for you. You might like those $12 words, but your user might not appreciate them. Match your presentation to the user in writing and content. In order to communicate successfully, the user interface must keep these in balance: legibility, readability, typography, symbolism, multiple views, and color or texture. A good rule of thumb is to keep to a maximum of 3 typefaces, in a maximum of 3 point sizes, with a maximum of 18 words (or 50-80 characters) per line of text.

Stay Conventional

Conventions are helpful to the designer and user, but it does not mean that the result will always be boring. Conventions are useful because they reduce the learning curve. In regular life, every store keeps products in the same placement; a road keep signs a certain height, and lines the same color. Imagine the mess we’d have if life didn’t follow conventions. It is no different online. People are busy, be kind to them and place elements where they expect them to be. Following conventions gains user trust and confidence, you look reliable as your credibility is proved. Krug suggests that you should only innovate if you truly know that your idea is better. If you don’t know, stick with conventions.

Even if a page is in a different language than the user’s own, when conventions are followed the site can be navigated. And think of the disabled, with screen readers, shouldn’t we allow things to be in a logical order they are used to?

Test Early, and Test Often (TETO)

Usability tests provide crucial insights into significant problems to a layout, which cause issues for users. Test early, test often, and test for the right reasons. Most design decisions are local—not universal. Some points to consider:

  • Testing one user is 100% better than testing none.
  • Testing one user early in the project is better than testing 50 near the end.
  • Fixing issues is more expensive the later in the process than earlier.
  • Testing is iterative: test, rinse, repeat.
  • Usability tests always produce useful results.
  • A developer is not suited to test their own code. Neither is true for designers. I need an editor for this article because I have blinders on; we all do in our own work. User testing is more important than anyone realizes.

If you want a great site, you must test it.

Conclusion

Don’t make the user think or squander their patience. Focus their attention, and expose features. Write effectively, while keeping it simple. Use white space, a visible language, and conventions. Test early and test often. Udemy can teach you more about it. Keep reading, take some classes, and you’ll design great usable web sites.