12 Useful Techniques For Good User Interface Design

Advertisement

Last week, we presented 10 Useful Web Application Interface Techniques471, the first part of our review of useful design trends in modern Web applications. Among other things, we highlighted embedded video blocks, specialized controls and context-sensitive navigation. We also encouraged designers to disable pressed buttons, use shadows around modal windows and link to the sign-up page from the log-in page.

This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used. Please feel free to suggest further ideas, approaches and coding solutions in the comments below.

You may also want to take a look at the following related articles:

1. Highlight important changes

One of the most significant elements of a good user interface is visibility of the system’s status. Users must notice immediately what’s going on behind the scenes and whether their actions have actually led to the expected results. To achieve a more sophisticated level of system visibility, Web applications these days use AJAX (of course), which allows users to update portions of a Web page at any time without having to refresh the whole page. AJAX brings the level of responsiveness and interactivity of Web apps much closer to desktop-grade applications.

Yammer feed update7
Yammer8 applies not one but three effects on all new messages in a feed: fade in, slide down and highlight.

However, this dynamic nature means that when you click on a button, the page doesn’t refresh but something does happen. The majority of websites still don’t use AJAX extensively, so some users may not be sure whether anything has happened at all or whether the button was properly clicked. To fix this, you need to provide some visual feedback for each of the user’s interactions.

Backpack new task highlight9
Backpack10 applies a highlight effect to all new items in a task list, which lasts for a second before fading out.

One great way to do this is with animation. The human eye can notice movement fairly well, especially if the rest of the page is static. Playing a highlight animation when users add items to their shopping carts, for instance, will attract their eyes to those items. They’ll see that their action has worked. Animations can be implemented with JavaScript and are a nice way to provide visual feedback. Just be sure to not overdo it; adding too many animations could cause interface friction because the speed with which the user performs each action will be slowed down by the duration of the animation.

2. Enable keyboard shortcuts in your Web application

As the advanced features of modern Web applications (such as dragging and dropping, modal windows, etc.) steadily gain on those of desktop apps, developers of these applications are trying to offer users more responsive and interactive user interfaces. One of the techniques used to achieve this is the integration of keyboard shortcuts or navigation. Just as with classic applications, this little feature can significantly improve the workflow of your users and make it easier for them to get their tasks done.

Design Trends 200911

In fact, various Web applications already use shortcuts (for example, Google Spreadsheets12, MobileMe13, etc.), and even regular websites, such as Ffffound14 or Boston.com1715, allow visitors to use them for basic navigation. Ffffound enables users to use shortcuts to switch from the thumbnail view to list view and vice versa (using “v”), go back to the top (“h”) and navigate to the previous (“k”) and next (“j”) image. Boston.com also uses “k” and “j” for the same functions.

It’s worth mentioning that your shortcuts should be intuitive and self-explanatory. For instance, it wouldn’t make sense to make the shortcut letters for “Previous” and “Next” navigation too far apart from each other on the keyboard; rather, pick ones that are close together. The reason is, if a user makes a mistake and jumps to a page she doesn’t want to visit, she can immediately return to her page without looking at the keyboard. The “j/k” configuration is one option. It would actually make perfect sense to have some common conventions for keyboard shortcuts used throughout various websites, but we haven’t been able to detect such conventions thus far.

How do you implement this? Essentially, you just have to use the onKeyPress-DOM event and manipulate the appearance of the document using the window.scrollTo function in JavaScript.

Ffffound.com uses an onMouseDown effect in its markup, which is not a good solution because it doesn’t adhere to the main guideline of unobtrusive JavaScript coding16: Thou shalt separate JavaScript functionality from CSS style sheet and (X)HTML markup.

<a id="float-navi-prev" href="javascript:void(0);"
	onmousedown="try { move_asset_auto(-1) ;} catch (e) { }"
	onclick="return false;">prev(<span class="shortcut">k</span>)
</a>

Here it would make more sense to use a JavaScript library instead (like jQuery) and call the element via its identifier or class. That’s (almost) what Boston.com1715 does. All of the images in its gallery are labelled with the class bpImage in the markup, with the JavaScript pointers to them added to the array. The onKeyPress event triggers the scrolling window in the background, and the window’s browser is manipulated using the window.scrollTo() function.

Here is the (X)HTML:

	...

	<img src="[url]" class="bpImage" />
	<div class="bpCaption">...</div>

	<img src="[url]" class="bpImage" />
	<div class="bpCaption">...</div>

	<img src="[url]" class="bpImage" />
	<div class="bpCaption">...</div>

	...

And the JavaScript:

	function bpload(){ 

		// put pointers to all images with the class "bpImage" in an array
		imgArr = getElementsByClassName(document.body,"bpImage")
		isLoaded = 1;
	} 

	document.onkeypress = function(e) {
		if (!e) e = window.event; 

		// Pick up what key was pressed
		key = e.keyCode ? e.keyCode : e.which;

		// 107 is the ASCII code for 'k'
		if(( key == 107 ) && ( isLoaded ) ) {

			// if there are images...
			if ( currImg > 0 ) {

				// decrease the counter for the current image
				currImg--;

				// offsetTop returns the vertical coordinate of the
				// upper-left corner of the image
				// (we are not sure why the script adds 174px. Any idea?)
				window.scrollTo(0,imgArr[currImg].offsetTop+174)

			}
			else {
				if (currImg==0) {
					currImg--;
					window.scrollTo(0,325)
				}
				else
				{
					if (currImg<0) {
						window.scrollTo(0,325)
						}
					}
				}
		}

		if ( ( key == 106 ) && ( isLoaded )) {
			// a similar code snippet for 'j'
			...
		}
	} 

}

But you need to make sure that you clearly communicate that 1) keyboard shortcuts are available, and 2) they can be used to perform certain tasks more efficiently. If a user can easily manage his tasks with your application, he is less likely to switch to another application, if the feature set is more or less similar.

3. Upgrade options from the account page

If your application features several subscription plans, make sure to remove any interface friction for customers deciding to upgrade. Most users like to try the basic version of an application first to get a better sense of what it offers and how it works. If they are convinced the application meets their expectations, they will consider upgrading to a more advanced plan. It’s the designer’s task to make sure this transition is as simple and intuitive as possible.

Crazyegg upgrade page18
CrazyEgg19 integrates the option “Change plan” in its main navigation.

In fact, a lot of Web applications put upgrade options right on the user’s account page, making them easily accessible. This design choice has the simple advantage of providing users with an overview of available options and supported functionalities right away.

Bigcartel upgrade page20
Bigcartel21‘s upgrade plans are available in the app itself.

Note, though, the importance not only of featuring the available upgrade plans, but also of identifying the plan that the user is currently using and the features that are currently available to her. It is vital to provide users with precise information about what advantages they gain by upgrading their account. Take a look at our article Pricing Tables: Examples and Best Practices22 as well.

4. Advertise features of the application

Even though you’ve created a detailed marketing page, outlining your application’s every feature, and crafted a thorough help section on your website, your users are unlikely to have read it all. They’re probably not familiar with all the features of your product and would benefit from little tips inside the application itself.

Advertise new features in your application. These would usually go in the sidebar, out of the way of the main functions. If a user is nearing the maximum capacity of a certain feature for her chosen subscription plan, you should point this out and give her an option to quickly upgrade.

Freckle upgrade23
The Freckle24 time-tracking app tells you when you’ve run out of people on your current plan. The message also links to actions you can take if you need to upgrade.

Wufoo feature highlight25
Wufoo highlights its new form gallery feature at the bottom of the form creation page, making sure customers get the most value out of the app.

5. Use color-coded lists

Some applications feature feeds that aggregate various types of content. For example, you may have a project management application that shows you all the latest messages, tasks and files on the home page. If these items all appear together in one list, it may be difficult to tell what’s what. Many applications use color coding to help visually distinguish between different types of entries. A simple way to do this is to place a text label inside a colored box. This way, the list becomes easily scannable.

It’s important not to use various colors for the same task or similar colors for completely different tasks. The color scheme should not be random but should implicitly indicate the function each item serves.

Lighthouse color codes26
The Lighthouse27 issue-tracking app has color-coded labels on the right-hand side of each item on the overview page, which helps you quickly scan the list.

Goplan color codes28
The Goplan dashboard uses similar color-coded labels to differentiate various items, like tasks, notes and files, so you can quickly find what you need.

6. Offer personalization options

Many applications provide custom workspaces for people and businesses. Personalization can help make your users feel more at home. This can be done by giving users options to customize the look and feel of the application interface. Let them select the color theme, the link colors, the background and so on. Even a small amount of customization will allow your users to make their pages their own.

Campaign Monitor customization29
Campaign Monitor lets you choose a color theme for your account and upload your business logo. This helps businesses infuse the colors of their brands into the Web apps they use.

Personalization is certainly one of the simplest and most effective methods of binding your customers to your service, but it’s important to understand that the various personalization options should never come at the expense of the core application’s functionality. The system should always be capable of performing its functions and thus meet users’ expectations, despite how exactly users have personalized the application.

One useful approach to finding a compromise between a website’s core functionality and the user interface is to introduce various levels of personalization, depending on whether the user is a novice or an advanced user. It is also a good idea to allow the user to revert his account to the default settings or restore the settings that he had saved in his previous session.

Twitter customization30
Twitter31 lets the user customize his profile page background and colors, allowing him to craft a unique spot on the popular micro-blogging network.

7. Display help messages that attract the eye

Every Web application is different and has its own way of doing things. If the function of a particular element isn’t immediately apparent, you can provide short help messages to get people started. One important thing to note is that if you want to help people who aren’t sure what they’re doing yet, you need to attract their attention to this message. One way to attract attention is with color — putting a yellow “sticky” message in the sidebar, for example, is sure to stand out.

Goplan help stickie32
Goplan puts help messages in bright yellow boxes resembling paper stickies. The bright color ensures that users don’t miss them.

Alternatively, if you are looking for a subtler solution that doesn’t require much space to display and isn’t obtrusive for regular users of your application, you can consider displaying vibrant visual graphics (for example, small icons) next to the design element needing explanation. For instance, pointing users to new, updated or useful features of an application’s search engine, as Wishlistr.com33 does, makes sense.

Icons in use34
Classic: Wishlistr35 uses a light bulb to focus the user’s attention on the available search functionality of its system.

8. Design feedback messages carefully

Pretty much every application has some form of feedback messages. These are little messages that pop out when there is an error or warning or perhaps when an action is completed successfully. Designing these messages correctly is important because you don’t want to confuse or startle your users when there’s nothing to worry about.

A good practice here is to do a couple of things. First, color code the different types of messages. Messages that notify users of successful actions are usually colored green. These employ the traffic-light analogy of green meaning “Go.” Warning and error messages are colored yellow. Same traffic-light analogy here: yellow means slow down and wait. You can also distinguish between warning messages and error messages by coloring errors red and warnings yellow.

Mailchimp error message36
Mailchimp uses color effectively for its error messages.

The second thing to do is add a unique icon for each message type. Icons can convey meaning instantly, without the user having to read the message. For example, a tick icon can symbolize completion of a successful action. An exclamation mark in a triangle is a warning sign. People will instantly recognize that this message warns them about something and will pay attention.

GetSignOff notification37
GetSignOff38 allows you to close notifications by using the little button in the top-right corner of the message box.

Lastly, you should provide a way for users to close the notification if they are likely to remain on the page for a while.

9. Use tabbed navigation

Many Web applications have adopted the tabbed navigation approach for their main navigation menu. Tabbed navigation is a menu that looks like each item is a tab on a file folder, with the active tab connected to the body of the page. Tabbed navigation isn’t just eye candy; it provides a usability benefit.

Freckle tabs39
Freckle uses tabbed navigation in a sub-menu relating to the time input menu.

Basecamp tabs40
Basecamp features the standard tabbed menu for the main navigation of its app.

If you make the menu look like tabs on folders, almost everyone will be able to figure out what it is and how it works. This is because the visual metaphor is strong and clear. The current page or section also becomes easy to see. Knowing where they are puts users at ease because they gain a greater sense of control.

10. Darken background under modal windows

In some applications, you may want to display a bit of information or quick input form that doesn’t really deserve a full page of its own. Some developers put that message or form in a modal window. Modal windows are little windows that pop up on top of the current page and that users need to interact with to proceed.

Squarespace edit box41
When editing things in the Squarespace42 website creation app, the background darkens to shift focus to the edit window.

To make this window stand out better, you can darken the content below it. The darker background will block out all the noise of the content behind the box and make the modal window the center of attention. This is very similar to using shadows around the window but is even more powerful in directing focus. The darker background also indicates that interaction with the content beneath is disabled and that the user should instead interact with the modal window.

11. Lightboxes and Slideshows

Some applications include a lot of images that users may want to browse. Displaying every image on its own page may not be the most efficient way to do it — both for your visitors and your server. Your visitors will need to navigate back and forth, and your server will incur extra hits that can be avoided.

SmugMug lightbox43
SmugMug44 uses lightboxes to enlarge photos. (Photo by Kurt Preston.)

Enter lightboxes and slideshows. Lightboxes and slideshows are used to display photos without having to load a new page. For example, the lightbox method will enlarge an image and place it as a modal window above the rest of the page, allowing the user to focus on the image itself while the background is darkened. This means less noise interfering with the viewing experience.

12. Short sign-up forms

The sign-up form is potentially one of the biggest barriers between you and potential customers. The longer the form, the more effort your visitors will have to make before becoming members of your website or, perhaps, paying customers. To minimize the barrier, we’ve got to speed up the process. This means removing all optional elements from the form and leaving only the core essentials. The optional stuff can be filled in later.

Evernote signup
Opening an Evernote45 account is easy, with only a handful of fields to fill in, all of which are grouped together in a compact box.

Conclusion

Making your application beautiful may lead to a satisfying user experience, but it will not guarantee a usable product. For example, an ugly website like Craigslist performs its function fairly well. Its poor aesthetic did not stop it from becoming hugely successful. Similarly, the minimalist interface of the Google search engine manages to fully accomplish its objectives without getting in your way. The interface disappears, letting you focus on getting things done.

Steve Jobs once said, “design is not just what it looks like and feels like. Design is how it works.” In fact, the usability and overall usefulness of a Web app is governed by how well it performs its functions and how easily those functions are accessed. Design with a goal in mind — a goal that the interface helps your users achieve. Not every technique will work in every situation or for every application. Only implement interface elements if they make sense in your particular context.

Related articles

Take a look at the following related articles:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
  2. 2 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  3. 3 http://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  4. 4 http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
  5. 5 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  6. 6 http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/
  7. 7 https://www.yammer.com/
  8. 8 https://www.yammer.com/
  9. 9 http://www.backpackit.com
  10. 10 http://www.backpackit.com
  11. 11 http://konigi.com/interface/mobileme-calendar-date-selector
  12. 12 http://docs.google.com/
  13. 13 http://konigi.com/interface/mobileme-calendar-date-selector
  14. 14 http://www.ffffound.com
  15. 15 http://www.boston.com/bigpicture/2008/10/earth_from_above_comes_to_nyc.html
  16. 16 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
  17. 17 http://www.boston.com/bigpicture/2008/10/earth_from_above_comes_to_nyc.html
  18. 18 http://www.crazyegg.com
  19. 19 http://www.crazyegg.com
  20. 20 http://www.bigcartel.com
  21. 21 http://www.bigcartel.com
  22. 22 http://www.smashingmagazine.com/2008/10/13/pricing-tables-showcase-examples-and-best-practices/
  23. 23 http://letsfreckle.com/
  24. 24 http://www.letsfreckle.com
  25. 25 http://www.wufoo.com
  26. 26 http://www.lighthouseapp.com
  27. 27 http://www.lighthouseapp.com
  28. 28 http://goplan.info/
  29. 29 http://www.campaignmonitor.com/
  30. 30 http://www.twitter.com
  31. 31 http://www.twitter.com
  32. 32 http://www.goplan.info
  33. 33 http://www.wishlistr.com/
  34. 34 http://www.wishlistr.com/
  35. 35 http://www.wishlistr.com/
  36. 36 http://www.mailchimp.com
  37. 37 http://www.getsignoff.com
  38. 38 http://www.getsignoff.com
  39. 39 http://www.letsfreckle.com/
  40. 40 http://www.basecamphq.com/
  41. 41 http://www.squarespace.com
  42. 42 http://www.squarespace.com
  43. 43 http://www.smugmug.com
  44. 44 http://www.smugmug.com
  45. 45 http://www.evernote.com
  46. 46 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  47. 47 http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
  48. 48 http://www.smashingmagazine.com/2008/08/11/5-useful-coding-solutions-for-designers-and-developers/
  49. 49 http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/
  50. 50 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  51. 51 http://www.smashingmagazine.com/2008/04/24/5-more-principles-of-effective-web-design/

↑ Back to topShare on Twitter

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

Advertising
  1. 1

    Gr8 post, i always love your stuff. :)

    7
  2. 2

    Thanks for the helpful post!

    3
  3. 3

    Great tips! Thanks!

    3
  4. 4

    Interesting stuff here. II’ve been looking into doing more user experience type work with online applications, and this sort of thing could provide some useful reference material. Your article from last week, 10 Useful Web Application Interface Techniques, was pretty useful as well.

    Thanks for the inspiration!

    3
  5. 5

    Thanks for the informative posts on web interface design. As someone starting out in this field, they are very helpful.

    0
  6. 6

    The first example under number 9, tabbed navigation, is pretty bad because the inactive tabs stand out more then the active tab.

    Overall, a good post, thanks.

    6
  7. 7

    great post! I love to read ui-things!

    1
  8. 8

    The one thing I really dislike being used within a website: “keyboard shortcuts”. In my opinion keyboard shortcuts should only be used within (windows) form applications and definately not within a public website. It’s too confusing for the end-user.

    5
    • 9

      It depends on what user you are serving.
      Keyboard Shortcuts are a life saver in many many applications where users are use to them.
      I love them and have requests from users to implement it in some applications that need fast data entry or repeatable tasks to be completed quickly.
      They can reduce the time a user needs to access a function or finish a task.
      Users can be confuse if they do have lots of nonsense options to click all over the place.

      -3
  9. 10

    thanks you Smashing Magazine !!

    1
  10. 11

    Nice!

    Love the post!

    1
  11. 12

    It’s true… “design is not just what it looks like and feels like. Design is how it works.” coz it’s really important to be functional and give the impression of your presence.

    Nice post Dmitry.. Thanks for sharing.

    DKumar M.

    0
  12. 13

    Again, fantastic article, Dmitry!

    -1
  13. 14

    brilliant article, thanks

    - we are actually applying many of these techniques on our soon to be launched.

    We’ll be using modal windows, easy sign-up forms, navigation tabs, carefully designed error messages and information windows…

    We hope to be at the forefront of usability, but without the option of color personalization.

    -3
  14. 15

    Good post, although what kind of user will take the time to learn keyboard shortcuts? Maybe for an application they use often, but even this should be limited to basic ones– not this ctrl-k stuff…good post though, enjoyed immensely.

    0
  15. 16

    J.U.I.C.E. for Smashingmagazine! But I generally oppose the use of pop-ups that blots out the background and forces you to locate a certain button to get rid of. It reminds me of the “last measure” sites out there that only has one purpose: To annoy you.

    0
  16. 17

    Christopher Coiler

    January 20, 2009 2:50 am

    Wonderful article. SMASHING IS BACK, BABY!

    -2
  17. 18

    very nice article.

    -2
  18. 19

    Another useful article from Dmitry. Thanks!

    -1
  19. 20

    “Displaying every image on its own page may not be the most efficient way to do it.”
    -> But that’s obviously what makes good page ranking.

    0
  20. 21

    Good article, I just want to mention that there is another way to implement keyboard shortcuts in your website that doesn’t need javascript, and its a WAI recomendation: the ACCESSKEY property for the A tag. That improves web accessiblity as many people have problems using a mouse.
    Example:
    <a href=”anotherpage.html” accesskey=”1″>Another Page</a>
    I used to use the first letter in the link name for accesskeys, but lately I discovered that this is not a good solution, because it can “collide” with shortcuts used on web readers like JAWS, so now I use numbers (0 for home page, 1 for contact, etc.).

    1
    • 22

      Great move Mikael! And while I know Macs quality is ideend on a slope, they are still the best computers for people out there. And the shortcuts you’ll get them really quickly

      -3
  21. 23

    There is a JS library that makes adding shortcuts very easy…
    JavaScript Keyboard Shortcuts Library

    2
  22. 24

    Fantastic list and my personal favourite, short signup forms! Especially with the boom of small social networks popping up, think it’s best to take the minimal amount of signup information and let the rest be done on the profile.

    Thank you for sharing this! Going to experiment with some of the other points made too.

    1
  23. 25

    Great Post!
    I have a passion for Interface Design and this is a great list.

    -1
  24. 26

    Excellent article!
    Exactly the kind of stuff I like to read.

    0
  25. 27

    It just goes to show how much thought and detail needs to go into web application interface design – almost a scary amount!

    1
  26. 28

    Thanks for this useful article. It’s so essential. Keep it up!

    -1
  27. 29

    Is there a way for web application developers to track whether or not people actually use keyboard shortcuts? Keyboard shortcuts are a good idea in theory (my experience as a web designer using Photoshop and other software is greatly enhanced by using them) but in the context of a web app they might add more complexity than I’d be willing to deal with.

    3
  28. 31

    Great article! Pointed out some thoughtful stuff.

    Jeez, there is so much information on this site. I just wanna *blip, scan it over into my head. Gosh ..

    0
  29. 32

    Wonderful article. I like re-build my site in that way.

    0
  30. 33

    As Always some amazing content. you always seem to have amazing articles on the stuff that is most relevant to designers and developers. hats off.

    0
  31. 34

    Great tips! I never really thought of using keyboard shortcuts in webapps, so thank for the heads up! I’ll be sure to use it next time I’m building something.

    1
  32. 35

    Regarding keyboard shortcuts, I find that more often than not, they create more confusion for the end-user. Since keyboard shortcuts are not the same across browsers and operating systems, I find many applications using shortcuts that are not cross-compatible. When the user presses a combination that has already been reserved by the browser or operating system, it usually overrides the web app’s command, leaving users confounded.

    2
  33. 36

    Great post! Although I would argue that Evernote’s signup form isn’t the best example.

    The name could be removed (since it isn’t required anyway) and the confirmation password field could also be removed. I hate captchas. I know they’re needed, but what does the first word say, (I think it’s Lieuf)? Surely there’s better captchas out there.

    But still everything you said makes sense and are good tips.

    0
  34. 37

    Nice,
    It’s so usefull!
    see also

    0
  35. 38

    Does anyone know where can I find script that does almost the same as in Facebook Albums, where you can navigate next/previous photo with keyboard arrows (right/left)?

    0
    • 39

      January 15, 2009 hahhaa! had fun reading here as usual i know some stereotypes towards us but that one was waaaaaaaaayyyyyy over the line how our country be africa? wala na nga tayong halos wildlife hehehe!

      -2
  36. 40

    This post worth a thumb up! :)
    Really helpful.. Thanks..

    0
  37. 41

    This is really great article for the web desginers/developers.

    Mukesh (Link [www.ingully.com])

    -1
  38. 42

    Very good post! Thanks! This is a perfect compilation of what I was searching for! A good inspiration! Keep going!

    0
  39. 43

    nice work mate!

    upgradeing, shortcut keys and short forms are good hints!! :)

    abid

    0
  40. 44

    Great stuff, always like stuff thats short and simple to understand, good examples provided.
    :)

    0
  41. 45

    Roel…

    That is really an old design methodology your talking about.
    Most users, even the less computer savvy ones, know about keyboard shortcuts. any program designed without them I would consider baad programming.

    The baad is sheep bad.

    0
  42. 46

    very useful article, thanks!

    0
  43. 47

    As always, sensible advice here. I can see these tips being used even in simple web design.

    0
  44. 48

    Excellent article. I especially liked the point you made of enabling shortcuts in your web apps. I love how Google Reader does this and I hope that soon more sites will follow this concept because for a shortcut junkie like me, it’s awesome.

    0
  45. 49

    Keyboard shortcuts in webapps have their place. Think about Google Docs: you end up using it as if it was a cut-down version of Word or Excel So you expect the keyboard shortcuts you use in those apps to work here: and quite often, they do!

    -1
  46. 50

    nice info … :) love to read and save this :)

    0
  47. 51

    very nice tips!!!

    0
  48. 53

    Really good little article. One comment I would make is that 5. Use colour-coded lists would benefit from some comment/caveat regarding colour blindness.

    Whilst colour coding can be useful for most people, for the 4-5% of people with colour blindness you may need to provide some additional sort of signal or at least ensure that the contrast between the colours bears up ok.

    If you look at this page through the filters at colorfilter.wickline.org you will notice that the disinction in the Lighthouse example becomes much less clear. To be fair they do use a text label and do not rely soley on the colour coding.

    And thats my point: colour coding is great when used a progressive enhancement, however it should not be relied upon as the sole means of conveying important information.

    1
  49. 54

    awesome article ! very useful

    0
  50. 55

    muy buenos consejos, gracias!.

    0
  51. 56

    It’s poor idea to define shortcuts from web application level, for the same reasons that accesskeys has been dropped from HTML standard. It’s better idea to define roles of particular elements of UI, and let user use his/her own shortcuts, or another methods to access them. Some info about it can be found at http://esw.w3.org/topic/HTML/DroppedAttributeAccesskey

    1
  52. 57

    I really like your interface design tips. Makes me know I’m on the right track when I recognize some that I already use…

    0
  53. 58

    Hi, cool site, good writing ;)

    0
  54. 59

    As always, very good and useful post, that I can immediately relate to the work I am doing right here, right now.

    0
  55. 60

    Действительно прикольный блог! Спасибо огромное и… разумеется, пишите еще!

    -1
  56. 61
  57. 62

    I enjoyed your article and though I agree with everything in it, I would say you could go deeper into the conceptual foundations of good user interface design. I found this article to be very good http://www.actionscript-flash-guru.com/blog/11 its called something like good UI design for web applications that live inside the web browser and I feel it compliments your article quite well.

    0
  58. 63

    SACHIN KHOBRAGADE

    January 20, 2010 12:05 am

    Really nice article Dmitry. Thanks for sharing .

    0
  59. 64

    Incredible information, this is very useful.. thanks

    0
  60. 65

    Really nice article…thanks for sharing your knowledge………….

    0
  61. 66

    Applications can enhance the user experience whenever they visit a certain site. I liked the recommendations that you gave to improve the interface designs. I agree that highlighting is a good strategy to keep track of changes. Also, shortening the forms is a good way to get the necessary information without disrupting the site visitor.

    We utilized such strategies when we created our company website through the help of a web development (toronto) company. Changes are highlighted in our site so that the site visitor can track the changes that he did. Also, web designer (toronto) made simple comment forms that require very few information to send a feedback to us. That way, we get their queries and suggestions without causing them an inconvenience. We will be incorporating your other tips in our next site update. Thanks!

    0
  62. 67

    Thanks for the awesome post, need to check it against my design

    0
  63. 68

    Excellent article. I would agree that keyboard shortcuts serve their purpose (at times) and at other times they may not be appropriate at all.

    I think they serve well in business application, particularly for adding shortcut keys to common modal windows that can be retrieved from any location in the application e.g. Adding a shortcut to create a new task in a scheduling application. A good way to let the user know of the shortcut key is to include it in the menu along side the caption e.g. “New Task… (ctrl + T)”

    1
  64. 69

    bunch of tutorials for user interface designers grab it now

    0
  65. 70

    As a user, lightboxes annoying me to no end because they break the navigation features of the browser. Specifically, the back button. After I click on something, I expect to be able to retreat one step back from where I am by clicking the back button. On a lightbox-enabled page, that action invariably takes you *two* steps back. Maybe there are lightbox implementations that don’t have this obnoxious behavior, but I haven’t seen one yet.

    I can’t count the number of times I’ve done this:

    1. Do a Google search
    2. Visit page in search results
    3. Click on image in photo gallery
    4. Watch image come up on screen
    5. Try to go back to the gallery by clicking, you know, “Back”
    6. Wind up on my Google search results.
    7. Give up on visiting that site altogether.

    I’m very intolerant of web designers breaking the browsing habits that have been ingrained in me for 14 years. Stop thinking of your website as a stand-alone island of code and graphics. Your websites and applications should work *with* the web’s existing features, not against them.

    1
    • 71

      You’re just old… move with the fluidity of the developing landscape, that’s how we all got this web thing past email in the first place kid .

      -1
  66. 72

    I disagree with #12 – that’s not a short sign up form. Really it should be email address, password, confirm password. They can choose the username after they’re signed in – make it an optional step to filling out a more complete profile.

    0
  67. 73

    I have used the article in class and it was very successful.

    0
  68. 74

    brilliant
    i like willy

    0
  69. 75

    Jonathan Ausbrooks

    May 23, 2011 8:45 pm

    Thanks for a marvelous posting! I truly enjoyed reading it, you can be a great author.I will ensure that I bookmark your blog and will eventually come back down the road. I want to encourage you continue your great writing, have a nice holiday weekend!

    0
  70. 76

    great post! thank you very much

    0
  71. 77

    am looking for information regarding this issue.” recognized techniques that can be used for the design of usable interfaces”.

    please help me anyone for ans this question please.

    0
  72. 78

    Very similar.

    1
  73. 79

    Check out Talygen web application as it has implemented some decent design considerations like ease of navigation, simplicity and clarity.

    0
  74. 80

    I would highly recommend using FeedbackGuru.com for website design reviews and feedback. Here reviews are done by usability and design EXPERTS and you always get meaningful and implementable feedback.

    0
  75. 81

    I recommend using FeedbackGuru.com to get EXPERT feedback on website/application design. This is one of the few sites where you get feedback directly from design experts (NOT from random users/members.)

    0
  76. 82

    Great article.. And one feedback about SmashingMagazine. The site layout uses lesser area for content. May be 50% or around..
    The smashing Job Board unnecessarily has excess space.. Also it is slow on Firefox with some netbooks..
    The site always has great articles. Pls fix it soon..
    Waiting for more,
    Farseen Abdul Salam

    0
  77. 83

    It was great thank you :)

    0

↑ Back to top