User Interface Design in Modern Web Applications

What is user interface design? What makes a user interface effec­ tive, and, more importantly, how do you go about crafting a good user interface? This chapter looks at the theory as well as the practical techniques involved in visual interface design in modern Web applications.
Books > Creativity
Published on: 2012-01-31
Pages: 10

W hat is user interface design? What makes a user interface effec­ tive, and, more importantly, how do you go about crafting a good user interface? This chapter looks at the theory as well as the practical What Makes A Great User Interface? Before we proceed to build a user interface for our product, it’s impor­ tant to first understand what makes a good user interface; what are the techniques involved in visual interface design in modern Web applications. q ­ ualities we should aim to achieve? All great interfaces share eight ­ ualities q or characteristics: What Is A User Interface? 1. Clarity. The interface avoids ambiguity by making everything clear “The way that you accomplish tasks with a product – what you do and how through language, flow, hierarchy and metaphors for visual elements. it responds – that’s the interface” — Jef Raskin Clear interfaces don’t need manuals. They also ensure users make less mistakes while using them. User interface design isn’t just about buttons and menus; it’s about the interaction between the user and the application or device, and in many 2. Concision. It’s easy to make the interface clear by over-clarifying and cases, it’s about the interaction between multiple users through that labeling everything, but this leads to interface bloat, where there is just ­ evice. This means that user d too much stuff on the screen at the same time. If too many things are interface design isn’t about on the screen, finding what you’re looking for is difficult, and so the in­ how a product looks, but rather terface becomes tedious to use. The real challenge in making a great Even if someone uses an inter­ about how it works. It’s not just interface is to make it concise and clear at the same time. face for the first time, certain about arranging buttons and elements can still be familiar. 3. Familiarity. Something is familiar when you recall a previous encounter picking colors, but rather about you’ve had with it. Even if someone uses an interface for the first time, choosing the right tools for the certain elements can still be familiar. You can use real-life meta­ hors p job. Does a particular interface to communicate meaning; for example, folder-style tabs are ­ ften o even need buttons? If so, what do those buttons need to do? What do I used for navigation on websites and in applications. People recog­ need to provide users with so that they can figure out how my application nize them as navigation items because the metaphor of the folder is works and accomplish what they want to do with ease? f ­ amiliar to them. Working on the user interface early on in the product development life 4. Responsiveness. This means a couple of things. First, responsiveness c ­ ycle is vital because, as Jef Raskin succinctly puts it, “As far as the customer means speed: a good interface should not feel sluggish. Secondly, the is concerned, the interface is the product1”. The user sees and ­ nteractsi interface should provide good feedback to the user about what’s hap­ with the user interface, not the underlying back-end architecture of your pening and whether the user’s input is being successfully processed. application. Getting this element right will thus have a big impact on how much your customers enjoy using your product and how easy your product 5. Consistency. Keeping your interface consistent across your applica­ is to use. Start by designing the interface first and then coding the back- tion is important because it allows users to recognize usage patterns. end ­ ngine that powers it, rather than building the back-end first and then e Once your users learn how certain parts of the interface work, they can putting an interface “wrapper” over top. a ­ pply this knowledge to new areas and features, provided that the user i ­ nterface there is consistent with what they already know. 1 Raskin, J., 2000 The Humane Interface Addison Wesley 10 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 11

6. Aesthetics. While you don’t need to make an interface attractive for a meaningful way let us convey meaning for all the different functions and it to do its job, making something look good will make the time your features of our user interface. users spend using your application more enjoyable; and happier users Here are the main building blocks of visual interface design: can only be a good thing. Layout and Positioning 7. Efficiency. Time is money, and a great interface should make the user Layout provides structure to all the visual elements in your ­ nter­ ace. It also ­ i f more productive through shortcuts and good design. After all, this is defines hierarchy and relationships through the ­ pacing between elements. s one of the core benefits of technology: it allows us to perform tasks Bringing elements closer together indicates a re­ ation­ hip between them; l s with less time and effort by doing most of the work for us. for example, labels under icons. Positioning can improve flow, too. For ex­ 8. Forgiveness. Everyone makes mistakes, and how your application han­ ample, positioning labels in forms above text fields, rather than to the left, dles those mistakes will be a test of its overall quality. Is it easy to undo allows us to move our eyes down them easily, rather than have to keep look­ actions? Is it easy to recover deleted files? A good interface should not ing left to check which label applies to which field. punish users for their mistakes but should instead provide the means Shape and Size to remedy them. Shape can be used to differentiate elements; for ­ xample, by varying the e Designing a user interface that incorporates all of these characteristics silhouettes of icons to make them easier and quicker to recognize. Size can is tricky because working on one characteristic often affects others. The be used to indicate importance, bigger elements being more signi­ cant. fi more interface elements you add, the more stuff your users will have to Size can also make process. Of course, the converse is also true: not providing enough help clickable controls more Creating the look and feel of a product is and support may make certain functions ambiguous. Creating something usable; Fitt’s law tells not the primary aim of visual interface that is simple and elegant and at the same time clear and consistent is the us that the bigger a d ­ esign, merely a component. difficult goal of a user interface designer. clickable area is, the quicker ­ sers can move u their mouse cursor over it. Making the most frequently used controls big­ Visual Interface Design Toolbox ger will make it easier for your users to click on them, and thus improve Visual interface design is the process of designing the physical representa­ the efficiency of the interface. tion of your interface as your users would see it on the screen of their elec­ Color tronic device. The objective of visual interface design is to c­ mmunicate o Color is useful for several things. Color can attract attention, provided that meaning, which is done by crafting appropriate visuals that best repre­ it contrasts enough with the background (for example, a bright-yellow no­ sent what the application does and how it can be operated. Creating the tice box on a white background). Color can express meaning. For exam­ look and feel of a product is not the primary aim of visual interface de­ ple, red usually symbolizes danger or stopping (as at a traffic light) and so sign, merely a component. The primary aim is communication: communi­ is best reserved for error messages; while green generally tends to mean cating behavior to help your users understand how your application works. success or an invitation to proceed and so should be used for content of A number of core elements make up visual interface design. Selecting ap­ this kind. Color can also highlight relationships, such as color ­ oding things c propriate types, calibrating each element and then combining them all in like buttons and toolbars to aid the user. 12 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 13

Keep in mind a couple of things when using color. First, different cultures Practical Techniques For Crafting Effective will associate different things with colors, so make sure that any mean­ User Interfaces ing you intend to communicate with your color selection works in your We’ve talked about what user interfaces are, what characteristics all user m ­ arkets. Secondly, don’t forget about color-blindness; take extra care when interfaces should have and the core tools we can use to build them, so differentiating items through color, like bars on a chart. If a user is color- now let’s look at some practical techniques you can use in your own Web blind, they may not be able to distinguish between certain colors, most of­ a ­ pplications and websites. ten red and green, so you may need to use other indicators, such as shape and texture, as well. Use white space to build relationships White space is the empty space between various content elements, such Contrast as headings, text and buttons. White space is a great tool for building How light or dark something is in relation to the elements around it will r ­ elationship between different elements. By tightening the space be­ have an effect on the usability of­­ ­ n interface. The key here is contrast. a tween elements, you can form groupings of related items. Increasing the Black text on a white background has a higher contrast, and is easier to space between these groupings will further accentuate their connection spot and read, than gray text on a white background. Tuning down the by ­ eparating them from the rest of the content. Use white space to group s contrast of certain elements allows you to fade them into the background, related controls and to build a hierarchy of items on the page. letting the user differentiate between more important and less impor­ tant elements. Texture There is a concept in interactive design called affordance. Affordance is The Gmail toolbar features three groups of buttons separated by some white space. Each the quality that communicates to the user how something is meant to be group features buttons that perform related actions. used. Think of door handles. The best way to make a door that opens one way is to attach a handle on the pull side and leave a flat handle plate on Rounded corners define boundaries the push side. People will know whether to push or pull automatically be­ Rounded corners are often used to improve the look and feel of ­ raphical g cause the interface communicates how it should be used; i.e. it affords elements. They look nice and add that extra bit of visual polish to your less methods of interaction and so focuses the user on the correct one. inter­ ace; but that’s not all they can be used for. Rounded corners define f boundaries of objects. When you see a rounded corner, you know it is the We can translate this idea into user interface design on the screen with t u ­ ext­ re. For example, some elements in a visual interface may be drag­ gable, like the corner of a window that lets you resize it. To indicate that you can click and drag it, a set of ridges usually appears on it, illustrating a rougher texture. Rough textures are often used to add a stronger grip surface to real-life objects to help us pull them with our fingers, and that idea is translated onto the screen, where instead of fingers you would use a mouse cursor. Notice how the rounded corners in Ballpark’s clients list define the edges of each ­ record. There are also corners in the middle of each record, but these are used as separators b ­ etween related data rather than as edges of the overall container. 14 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 15

end of the container. If the ­ orner is straight, it could be attached to an­ c use AJAX heavily; in these cases, the page won’t refresh when a particu­ other container, so the boundary is not as clear. Rounded corners, or any lar action has been taken, so it’s up to the interface to tell the user that other visual corner treatment for that matter, can thus reinforce the bound­ something has happened. aries of containers. Shadows and darkened backgrounds for focus Convey meaning with color Another great way to focus user attention on an area is to use shadows and Color is a great tool for communicating meaning; for example, to define darkened backgrounds. Shadows can be used around pop-up menus and different elements. You could, if you so choose, use color coding to distin­ modal windows and act as blankets that block out visual noise around the guish between different types of buttons in your application. Red could window. Shadows decrease the contrast of elements that lie under them, be used for destructive buttons like delete and remove, blue could be used which in turn increases the contrast of the items they’re used for. Modal for standard buttons and green could be used for save and update ­ ctions. a windows can also have a darker (or lighter) semi-transparent layer under­ Color coding can also be used to distinguish between various pieces of user- neath, which also helps reduce the visual noise of the content it covers and created data on overview screens to make them easy to scan. so focuses the user’s attention on the modal window itself. Direct attention Emphasize core actions Use animation to draw attention. Sometimes, color and contrast alone Many applications have screens that feature primary and secondary aren’t enough to attract a user’s attention. If something crucial has hap­ a ­ ctions. For example, if you’re creating a project in a project management pened, and you really must make sure the user has noticed it, use ani­ application, the main form will probably have fields for the name of the pro­ mation. The human eye is attuned to catching movement, especially on ject, the deadline, the priority level and so on. At the bottom, you may see static backgrounds. If a user adds a to- a “Create” button. Often, you’ll also see a “Cancel” button or link next to it. do item to a list in a productivity appli­ The cancel action is less im­ ortant because your users usually won’t need p cation or adds a product to their shop­ it, so you can decrease its visual “weight”. For example, you could make ping cart, use animation to highlight “­ reate” a button and “Cancel” a simple hyperlink with no ­ isual deco­ C v what has happened. For example, you could use a highlight effect when an When you post a new message in Yam­ mer, it combines slide-out and highlights item is created on the screen. This is animations. especially useful for applications that Goplan uses color-coded labels along the left side of its dashboard to allow users to quickly MobileMe darkens the background around modal windows and applies drop-shadows to dif­ eren­ iate between different types of items, like tasks, notes and blog entries. f t them. This shifts the user’s attention to the window by blocking out the noise below. 16 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 17

ration. This shifts the focus to the main action and helps the user ­ ocate it l Use verbs as labels more quickly when they finish filling out the form. When using your application, people will always be looking to do some­ thing. This means they’ll be thinking in verbs. “I want to save this file”, or More efficiency with block links “I want to update this entry”. When building dialog boxes, or any other Use padded block links for easier cursor targeting. Web applications rely type of user prompt, use verbs rather than exclamations like “Yes”, “No” on HTML building blocks for their construction, which means they make and “Okay”. When the user sees options like “Okay” and “Cancel”, they will heavy use of the anchor (better known as the “link”) ­ lement. The anchor e have to read the message above to understand what they’re being asked ele­ ent is “inline” by m to do. However, if you present the choices as verbs – for example, “Save”, default, which basically “Don’t Save” and “Cancel” – you make the dialog and selections clear to means that its width the user without them even having to read the accompanying message. and height cover only the text inside it. This in turn means that the clickable area of the link is only Backpack makes great use of verbs for its as big as the text itself, buttons and links, ensuring clarity which may be too small for each choice. in many cases for users Notice how much more prominent the “Create C ­ lient” button is compared to “Cancel” on this Ball­ to comfortably click on. park client creation form. Auto-focus/re-focus on input We can apply padding to Form-oriented applications might benefit from automatically activating the anchor element to the main form’s input field when the Web page loads. For example, search make it larger. engines like Google focus on their main search field on the assumption that For links in a list, like in a almost everyone arriving on their home page will want to type a search sidebar, turn­ ng the an­ i query into the input field, and so when the page loads you can start typ­ chors into “blocks” may ing right away. Automatically activating input fields can work in other be an even better solu­ contexts: for example, in applications that require successive inputs, like tion. You can specify an a shopping-list builder. After the first item is entered, the user may want element’s type by using to enter more, so you should automatically re-focus on the input field to the CSS “display” prop­ allow for quick, successive inputs. MobileMe uses padded links in its sidebar navi­ erty; so, specifying the gation panel. The large clickable areas allow you anchor as a “block” will to position the mouse cursor over them faster, improving usability. turn it into a block ele­ ment, which means its height and width will no longer follow the size of the text inside it but will Tadalist allows for quick, successive input of to-do items. When you write a task and instead span the full width of its container by default. This is ideal for lists hit “Enter”, the application adds the new of links in a sidebar. item and then automatically focuses back on the text field, ready for more. 18 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 19

Use hover controls to simplify and de-clutter Expanding forms Many applications have a set of context-sensitive controls, like buttons for If your form requires ­ ultiple data items to be ­ ntered into the same in­ m e deleting and editing individual records in a list. To make it easy to ­ arget t put fields – for example, ­ ttaching multiple files ­ o a message or adding a t something directly, they’re usually placed next to each item, but this causes m ­ ultiple people to a company record in your database – then you could a lot of duplication. Most of the time the user won’t need these controls, use expanding forms to achieve this in an elegant fashion. Because the and when they do, they’ll only need them for one parti­ ular item. c user only works with one field at a time, you should display only one field at a time to them. When they fill out and add a record, the application cre­ To simplify your interface, use hover controls, which only show up when ates an extra input field below it to allow them to enter more information. you hover over a specific area. So, for example, when hovering over the re­ This way, instead of displaying several empty input fields at once, you dis­ cord you want to edit, an edit button will show up, but the button will be play only one empty field and add more as necessary. h ­ idden for all other records. Labels inside input fields Hover controls are a great Simplifying interfaces depends mostly on thought­­ reduction. You want ful way to de-clutter and sim­ to cut out the unnecessary and make better use of space for the stuff that plify interfaces, but you remains. One clever idea for forms is to put labels inside the actual in­ should consider a couple of put fields themselves. This saves space and also makes it dead clear to things before implementing which field each label applies. them. First, think about dis­ coverability. People need to discover the user interface Twitter shows the “Reply” and “Add to favorites” ­ uttons b when hovering over each message. ele­ ent before they can use m it: are your controls promi­ nent enough that a user would stumble on them? People naturally move the mouse around the screen and hover over items they’re looking at, so this may not be a big issue but is still worth taking into account. MobileMe compacts its log-in screen by moving text-field labels inside the text fields them­ selves. S ­ econdly, Web browsing inter­ aces on mobile ­ evices f d Basecamp allows you to attach multiple files to a mes­ sage but only shows one attachment field at a time. Context-sensitive interface elements like phones may not be able Sometimes you need to integrate additional functionality for more experi­ to simulate mouse­ cursor enced users of your application but don’t want to add weight to the inter­ hovering, so these controls face. What you can do is ­ ffer ­ ontext-sensitive inter­ ace­ele­ ents on de­ o c f m may be in­ ccessible. a mand. For example, if you have a search bar some­­ where­­in your application 20 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 21

that has advanced filters, you could display just the search bar when it’s not being used, and then reveal more controls when the user clicks on the box. This way, the interface remains slim, while the advanced functional­ ity is only a click away. Vimeo displays extended search filters when you hover Dropbox shows a progress bar when users upload files using the Web interface. For events over the search bar, giving such as these, where wait times vary considerably, a progress bar is essential so that users more experienced users of the don’t have to keep guessing how much longer they will have to wait. website a little extra function­ ality on demand. have to wait. But you can make the wait time feel consider­ bly shorter by a showing a loading indicator. Whenever something loads, add a loading in­ Icons dicator, such as a spinning animation or progress bar. Research shows that ­ Icons can be used to simplify the interface and make it look more ­ isually v u ­ sers perceive the wait time to be less when such indicators are displayed2 . appealing, but there are some considerations to take into account be­ Loading indicators are great for short wait times, but what if an action fore you implement them. Icons are almost always less clear than words. takes a minute or more to complete? While you can’t do anything about W ­ riting out a label is easy: you just say exactly what the button does. When the load time itself (assuming you’ve already done everything in your d ­ esigning an icon, however, you have to come up with an effective meta­ power about that), you can do something about the waiting experience of phor to describe the action in question. Also, the metaphor you choose may your users. Take this time to entertain or inform. For example, many appli­ not translate very well in different countries if the illustration is of some­ cations display interesting hints and tips during long wait times. If the user thing local (even trash cans vary in appearance across the globe). isn’t doing anything productive, at least they can learn something new. Icons work best when there aren’t too many of them on the screen at the Make it responsive with pressed button states same time and each one is visually different enough from the others to The responsiveness of your application doesn’t depend solely on the opti­ stand out. This means that varying shape and color is key to building a mization of your back-end architecture. The way your user interface be­ success­ ul set of icons. Implemented correctly, icons make the interface f haves plays a big part in this, too. One of the most used elements of any easier to use, because once users familiarize themselves with the icon set, the distinctive shapes and colors help them jump right to the icon they want. Make it responsive with loading Indicators Nobody likes waiting. Waiting means you’re spending time doing nothing while you could be doing something valuable. Unfortunately, every appli­ OtherInbox has a set of icons for the main navigation bar, with labels under each one for cation has features that take time to execute; whether it is exporting a clarity. large document or fetching the results of a search query, your users will 2 22 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 23

Advertise features Your users won’t know your application inside­out, so in some situations it may be a good idea to advertise features in the application itself. Also, be­ cause Web applications tend to be up­ ated constantly and ­ ubstantial new d s The default and pressed states of features are introduced from time to time, it makes sense to inform your the search button in WordPress. users about them. Do this by placing a small notice in a prominent area of the screen. It should be fairly eye-catching but not distract or handicap the user in performing their tasks. The users should also be able to close the notice once they’ve read it. Gmail displays this undo message each time you delete an email, allowing you to get it back Campaign Monitor provides a de­ quickly. tailed help message when you first log in, as well as a large but­ Undo ton that takes you to the cam­ paign creation screen. One of the most relied-on features in desktop applications is the trusty undo shortcut. Accidently changed the formatting of that chart you’re visual interface is the button. In desktop applications, buttons have ­ everal s working on? No problem: hit Ctrl/Cmd and Z on your keyboard, and the states, the most common being the default state, in which the button just a ­ pplication takes a step back and restores the document to its state ­ efore b sits there, and the pressed state when you click on it. your last action. Undo is a crucial tool in forgiving interfaces, and it can be used in Web applications as well. For example, you could either inte­ The pressed state looks just like that: the button appears to have been grate the familiar keyboard shortcut or show temporary notice messages pressed. This state sends instant feedback to users that their click was with undo links in them. successful. Just as on the desktop, pressed button states can be used in Web appli­ ations to provide that extra bit of feedback and responsiveness. c Helpful blank states When a user loads your application for the first time, there likely won’t be very much on the screen; the user hasn’t entered any data yet, so there is nothing to display. Take this blank state as an opportunity to aid the user by including a short help message that provides information on how to get started. To make things even easier, you can provide a link right in the help message pointing to the action it recommends; so, for example, if your appli­ ation is for managing email campaigns, and the user has just c created a new account and logged in, the help message could provide a link to the creation page for new campaigns. Yammer shows a helpful note under the main input area regarding the ­ follow”“ feature. Once the users read it, they can close it using the little cross icon on the right. 24 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 25

Conclusion There is a Japanese philosophy called Kaizen, which focuses on continuous improvement through small, gradual steps. User interface design, espe­ cially in modern Web applications, doesn’t have to be in a finished state be­ cause you can always keep evolving and improving it. Think of it like Kaizen. The old model of distributing software on CDs carried a big downside: once you burned and shipped the product, you couldn’t change it … well, Writeboard allows you to restore your work for up to two months after deleting it. not very easily. You could release a patch, but your users would have to Restore download and install it before any changes took effect, and you couldn’t People often change their mind after deleting something, so it’s wise to g ­ uarantee that everyone would update. Additionally, releasing a patch for implement some ex­ ra protective measures when dealing with the more t e ­ very small change wasn’t feasible, so you pretty much had to get things important bits of data in your application; for example, project files in a as perfect as possible the first time, which required a lot of testing before p j ­ ro­ ect management application. When a user ­ e­­ d letes a project, you could, the release. The software-as-a-­ ervice model changed all that. The benefit s instead of deleting it right away, archive it for a certain amount of time. of hosting your Web application online is that you can ­ eploy little changes d If they change their mind and decide they need the project files back, you whenever you want, and all of your users will instantly gain access to them. will be able to restore them easily. A few extra mega­ ytes of used space b This means you don’t have to get your interface 100% right the first time. is worth the trade-off for making your customers really happy when they If something doesn’t work, you can change it. By observing how users in­ discover that all is not lost. teract with your interface­ you will begin to get a good feel for how well , Confirmation dialogs it works and where the friction is – where things slow your users down. When allowing destructive actions in your application, such as deletion of If any parts of the UI need improvement, you can update them for all of items, it is a good idea to provide a confirmation dialog to ensure that the your users very easi­ y. This is the Kaizen approach to interface design: small, l user really wants to go ahead with their action. This is more im­ ortant if p gradual, regular improvements. So don’t worry about getting things per­ the delete button is located close to other controls; if users accidently click fect the first time; instead, iterate as you go, and you’ll soon end up with it, they should be able to cancel the ­ ction before it happens. Be careful not a a great interface that has evolved through real usage. n to overuse this feature, though, because it will introduce interface fric­ ion t by making actions longer and more tedious to perform than necessary. Freckle uses a confirmation ­ ialog to make d sure you don’t delete entries by accident. 26 User Interface Design in Modern Web Applications User Interface Design in Modern Web Applications 27

The end

do you like it?
Share with friends