Archive for the ‘Usability’ Category
published by Dan in Tools & Resources | Usability
No I’m not trying to wiggle my way out of listing the best web design books. The post title is actually the title of one of the best web design books anyone can read - Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug.
The great thing about this book is that the “common sense approach” is something that is understandable to everyone. Reading the book will benefit everyone from web designers to website owners who know nothing about web design. Those who have an advanced knowledge might not think they can learn more but might actually be pleasantly surprised at the enjoyment refreshing one’s “knowledge base” can bring. If you feel like you won’t learn anything new at the very least you’ll enjoy the book’s humour.
On the other hand, those who do not have any background on web design will find this book not too difficult to read since it doesn’t contain any code and presents usability concepts in a way that won’t stress your brains. If you don’t believe me just read the glowing customer reviews on Amazon.
A quick list of some of the things you’ll learn:
- First Law of Usability - Don’t make me think. Users want websites to be self-explanatory. They want things to be intuitive. Don’t make them think!
- User habits such as the fact that most users do NOT…
- read. Instead they simply scan pages so you should avoid being wordy.
- take time to learn how things work.
- Simple usability tests; and
- a whole lot more…
published by Dan in Usability | Website Design
- Allow misspellings in search - It is harder to type using the small keyboards found in mobile devices resulting in more typo errors made by mobile users. Because of this you should make sure that if your mobile site has a search function you should factor in incorrect spellings so that users can easily find the information they need even with a bunch of typo errors.
- Place basic navigational elements in the page - Examples of basic elements that you should provide would be a “Back to top/homepage” link, a “Next Page” link, or “New search”. This way once the user has finished browsing through the page he she can easily go back or go forward without having to scroll back up.
- Test. Test. and Test - In the end even if you do follow these tips but do not test the mobile site before launching it chances are your users will find a critical bug or two. So make sure you debug and do user testing to make the needed changes before the site is launched.
published by Dan in Usability | Website Design
- Highlight selected items - Navigating through a mobile site is usually not as easy as doing so in a normal website on your PC. One reason for this is that unlike with PCs where you can easily tell where your mouse is, allowing you to simply hover and click with ease, cursor control in mobile devices is not as easy. It often leads to confusion resulting in irritating wrong clicks. To help users avoid this problem make sure you provide a way for them to determine where they are at the mobile site page. You can do this by highlighting the part of the page where the cursor is currently pointing. For this very same reason it is usually good practice to make the background colour of the mobile site white so that whatever colour you choose to highlight items you can be sure that the item will stand out.
- Minimise user input - Users will need to type in information at one point or another but make sure you help them out by minimising the occurences where they will need to provide information by typing. Instead give them a list of options where they can choose an answer or narrow down their queries whenever possible. When doing this, however, make sure that you don’t end up giving them a long long list of links to browse through. This will only be effective if you give them a several choices and then giving them the option to search if they still need to narrow things down.
to be continued…
published by Dan in Usability | Website Design
When designing mobile sites one of the biggest limitations everyone should remember is the size of the screen. The small screen size limits the amount of content that can be viewed at one time. This means that to make the user interface of your mobile site visually appealing yet efficient as possible you should:
- Remove unnecessary information - Cut down the content to the bare minimum. Forget about wittiness and paragraphs. Instead opt for bullet points and concise yet descriptive wordings.
- Present information upfront - Instead of relegating vital information to a click or two away from the landing page present it at the landing page immediately. People using mobile devices to access the internet are generally in a hurry and need access to immediate information. It would be more convenient for them if the information they need is found on the landing page.
- Use breadcrumbs for navigation - Forget about sidebars. Sidebars will eat up space and we already know there is little enough of that with mobile devices. Instead relegate the navigation to the top of the page by providing breadcrumbs. This will allow users to not only move around but also keep track of where they are. If you do not wish to use breadcrumbs then place the links/sections you planned on putting on the sidebar but again this time on the top of the page.
to be continued…
published by Dan in Accessibility | Usability | Website Design
- Use visual illustrations - Present visual illustrations whenever appropriate and/or possible. Use pie charts or bar graphs when quoting statistics instead of simply discussing it in paragraph form or listing it down in tables.
- Break information into small chunks - Bullet points are good. Avoid long sentences and paragraphs.
- Good spacing - Use adequate spacing between lines of text as well as between paragraphs. The spacing between lines of text usually depends on the font used so make sure you use a font that is easy on the eyes.
- Use CSS to increase the distance between:
- the text and underline in links - This may seem unimportant but for some with reading disabilities the underline could make it even harder to distinguish letter and read.
- the target area of navigation links - Just make sure that the target area is clear or very distinguishable from the other space surrounding it. Make the target are a different color because increasing the target area and leaving it a white space is not good in terms of usability. Plus it can be really irritating if people mistakenly click on the link even if the mouse is simply hovering on white space.
- Provide a large print version of your page/documents - You can do this by making it easy to change font sizes. Just make sure that if you do this everything scales properly because it can even be more confusing if lines get broken and/or text ends up overlapping each other.
Resource: Learning difficulties & web accessibility by Webcredible
published by Dan in Accessibility | Usability | Website Design
Below are a few tips on designing a website for the learning disabled.
- Be consistent - Make the buttons, links, and the whole appearance of the website as consistent as possible. Aside from the appearance clickable elements should behave as consistently as possible. If you a new tab opens when a button is clicked then use pop-out tabs all throughout. If you make use of drop down menus use them all throughout instead of mixing drop down menus with expandable menus.
- Do not use idioms - Idioms can be confusing and taken literally. Instead use simple everyday language using words in their literal context/meaning.
- Avoid using abstractions - If you want an action to be taken spell out what you want to heppen along with the information needed. For example instead of just giving a “Contact Us” link give a telephone number and/or email address beside the words contact us.
- Summarize your content - Summarize the content of an info-rich page and place the summary at the top of the page. If technical terms are used throughout the article on the webpage make sure you avoid this in the summary and use simple words.
- Provide an audio version - This is perfect for those with reading disabilities becasue they can just listen to the verbal content instead of having to read through a long article. In the same way if your website has mostly audio content provide a written transcript to help the listening disabled.
to be continued…
Resource: Learning difficulties & web accessibility by Webcredible
published by Dan in Usability | Web Development | Website Design
If you have passed the planning stages of your web design and already have an existing one you can still make use of focus groups to help make improvements.
As I have mentioned before the ideal thing to do in order to determine your current website’s usability is by conducting usability tests. This entails the browsing and completion of tasks by participants individually.
Focus groups can be used to get a deeper insight on how the participants in the usability test perceived your website. After conducting the individual usability tests you can gather your participants and form focus groups allowing them to discuss their experiences during the usability testing. Encourage participants to expound on the areas that gave them greatest difficulty and allow the other participants who did not find that part too troublesome or difficult to explain why they found it easy and how they approached the problem. Analyse their differences.
Have a brainstorming session with the participants regarding features they want to be present and ask which features they deemed unnecessary. In the end though most of what will be tackled in the focus group will likely echo your findings garnered from the usability tests you will still be able to get a better grasp of your users psyche and expectations. You might also uncover an problem that wasn’t apparent during usability testing and the participants might surprise you with a novel or at least sound concept you overlooked.
published by Dan in Usability | Web Technology | Website Design
Every user has his/her own habits when browsing a web page. In general though users follow a certain pattern and focus on the same parts of the page. There will always be users that will have browsing/reading patterns that diverge from the norm but learning the habits of the majority of the users is good enough to aid in making a better web design.
Eye tracking is a method used by usability experts to determine the parts of the pages users look at, the frequency with which they look at those parts, and the amount of time they spend looking at those parts. The data garnered from this technique is very useful in web design because you can then adjust your web page design and make it more effective by placing the most important contents in key positions/placements.
Eye tracking is usually done as part of usability testing, however, not all usability consultants offer this service (in fact only very few do). To do eye tracking the web design consultant need to not only be knowledgeable about this technique but also have the equipment to carry out the test. In my next post I will be discussing briefly how eye tracking is done.
Note that eye tracking has many applications though primarily it is used for all kinds of research from medical research to primate research. Our interest in eye tracking is obviously its application in computer/web design usability and it is this application we will be tackling on the next post.
published by Dan in Usability | Website Design
Customisable websites can be really cool but you should remember to address possible usability problems that may arise from making your site customisable. Here are a few things you should remember when designing a customisable site.
- The most important thing you shouldn’t overlook is to provide an easy way to reset the site’s configuration. Customisable websites are fun to play around with, especially when there are new features or a user is new to the site. Unfortunately this also means that users are likely to do something that they do not really like to keep while they explore your site’s capabilities. A reset button is the easiest way to go back to the original format/content without having to undo everything they did step by step.
- If you want users to be able to add/remove content make sure that adding applications is easy. If something has to be installed to make an app work make sure that installation would be really easy. If possible users should not have to bother installing anything and should be able to simply add/remove content with one or two clicks.
- If you want to allow users to change the layout of the web page it would be a good idea to follow iGoogle’s example and make it easy by letting it be done simply by clicking and dragging the content around. The problem with this is that users sometimes drag the content around without meaning to, messing up the page layout. To prevent this give users the option to lock the page’s layout after they have tweaked it to their satisfaction.
published by Dan in Usability | Website Design
It is said that pictures paint a thousand words. The question is what are the images in your clients’ website telling the world. When it comes to selling products online the images accompanying the product details/description makes a big difference. Customers are often reluctant to buy products without seeing an actual snapshot of the product.
As a web designer it is your duty to explain to your client the importance of not just the quality of the product images but also the presentation of these images, including the usability aspects. While it usually isn’t too hard to explain the need for professional quality photographs, although you will be surprised that there are plenty of clients that will still opt for amateurish photos (even stock photos!) to be able to save money, it is usually a bit harder to explain the need for optimising the images for usability purposes. Many clients, stuck in the traditional magazine/catalogue thinking, do not realise the options available to them that could enhance not only their website’s look but usability as well. If presented and explained properly though, clients are likely to agree, especially after showing its effectiveness in terms of sales conversion.
In my next few posts I will be discussing some of the important things you should incorporate in your web design with regards to product images.
0845 838 7448 
