Mais conteúdo relacionado



  1. Usability of Web Application
  2. Brief description on usability of web application. Users should be able to simply, quickly, and intuitively use any web app, like with any tool in life, be it a car, phone, or anything else. After all, a useful web app doesn’t do much good if it’s a pain in the butt to use – many users will eventually give up and go to an easier-to-use alternative. What the user isn’t even conscious of you’ll be able to see immediately and fix any interface issues. Okay, now here are our 10 Web Application Usability Guidelines:
  3. 1. Have a Consistent and Standardized UI Whatever you settle on for your interface, keep it constant. Don’t have one style for one page, another style for other pages, and whatnot. It takes long enough to establish familiarity with an interface – don’t make it even harder for the user by introducing inconsistency, be it color scheme, layout and order of elements, and anything else. Also, try to use as many standardized elements as possible. There’s no need to get creative with buttons – it’s not an art piece, it’s an actionable item the user will frequently click on and not think about. Have buttons look like buttons, check boxes look like check boxes, sliding/”click next” areas look just like what they do, and so forth. Example: Notable App Notable is allows you to take any webpage screenshot, sketch or wireframe and exchange notes on specific details with anyone and is a fantastic example of what we have just been talking about. The homepage, all internal pages and the actual application all have a consistent UI and standard styling, as you can see from the images below:
  4. Screenshots
  5. 2. Guide the user The worst thing to a user is having to guess what to do next. Guide the user so he or she won’t have to. If you want them to proceed onto the next step, then make it clear where to click to progress. If one action is more important than the other, have the button or action area for it prominently displayed. You don’t need to go as far as hand-holding the user (which could turn some people off), but limit the choices and make the desired choices ridiculously obvious.
  6. 3. Make (Call-to-Action) Interactive Objects Obvious Make click and tap targets as large as possible. Why hide them if you want the user to be clicking on them? Haven’t you felt frustrated pixel-hunting for a button in certain web apps? Don’t make your users suffer the same – make the interactive objects big and obvious. At the very least, make interactive objects noticeably bigger than the surrounding elements and text so that they stand out. Here are some effective examples of Call-to-Actions buttons:
  7. 4. Give Feedback – Both for User’s Interacting and Progressing There few things worse in a web app than not knowing if your click or tap went through. You sit there like a sucker waiting for the action to complete when in reality your click or tap didn’t even register – especially when it’s for a process that asks not to click multiple times. So give visual feedback when a user’s interacting, as well as the user’s progress if applicable. When a user clicks or taps a button, you can have a visual feedback that the user has done something, be it a loading wheel, a change in the button’s appearance, or any other visual cue. The same goes for progress – if a user is uploading a file or something, have a loading bar so they know it’s loading as well as how much time is left. Don’t leave them guessing if their file is uploading, the browser decided to give out, or some other error occurred.
  8. 5. Never Have Users Repeat Anything & Keep Signup Info to a Minimum Ask for any info only once. After all, don’t you hate repeating yourself. Don’t make users suffer through that. Have them perform any action only once, ask them for info only once, and anything else that your web app needs from the user should only be done once. The quickest way to turn a potential user away from your app is to ask them, when they are signing up, to fill in lots of text-fields. There really is nothing more annoying and time-wasting. Ask for only for a maximum of five or six fields, that should be enough to keep their interest. Should you need more information after signing-up ask for it then. Example: GoSquared GoSquared, an app that monitors your website’s visitors in real-time, has a very simple (yet well designed) and effective sign-up form.
  9. 6. Always Have Default Values in Fields and Forms Guiding the user. Having a simple default value in a text field will push the user in the right direction as to what they need to type in. “First name”, “Last name”, “Email address”, “Password”, “Country”, and so forth.
  10. 7. Explain How the Inputs Info Will Be Used A continued theme of not having the user guess or be uncertain as to what’s happening in your web app. Make it as clear, comfortable and affirming as possible for your users by clearly explaining how any inputed info will be used. “Your email will be your login username”, “Your location will be used to *do something*”, and so forth. Here are some examples:
  11. 8. Don’t Have any Reset or Mass-Delete Buttons Big red “self destruct” buttons are big no-no. There’s almost no situation where a user will have to wipe every scrap of data and start again – usually it will be going back and fixing or changing one or a few values. Thus, a reset and mass-delete button would serve no purpose other than to frustrate the user by having to input everything again should they accidentally click the button (or out of curiosity even). Avoid this by not even giving users the option.
  12. 9. Have Clear and Explanatory Error & Success Messages This further puts the user at peace and comfort with your web app. You reaffirm that nothing major is wrong, or that it wasn’t their fault for getting the error message, or whatever else. Instead of a “Oops, something went wrong” message that doesn’t inspire confidence, have something more specific and explanatory like “Our database which holds your account info is temporarily inaccessible and will be back shortly”.
  13. 10. Include a Clear Visual Hierarchy and Navigation (Breadcrumbs) Make sure your layout and navigation is very clear. This gives the user a sense of where they are in your web app, which makes them feel in control and confident in using your web app. Example 1: Delicious Breadcrumbs are traditionally used as a sub-navigation, but with Delicious, they are elevated prominently and used as the main nav tool for the user. This is perhaps the only truly perfect example of breadcrumbs being used