Website Usability & Design
What is Usability?
Usability is the ease of use of different objectives, such as software applications, websites, machines, and processes. Teams should have these criteria in mind when creating a great user experience: Easy to learn; Efficiency; Satisfaction; Branding; and Errors.
Why Usability?
On the Web, usability is a necessary condition for survival. If a website is difficult to use, people quit the website and do not come back. If the homepage fails to clearly state what a company offers and the tasks users can do on the site, people become disinterested in navigating further. If users find a website's information hard to read or understand, they quit the website.
Usability helps an organization Increase effectiveness of a product; Increase efficiency of a product; Increase user satisfaction of a product; and Decrease cost of a product.
What are Usability Standards?
Usability standards must be adhered to while designing the usability of a website/product. They are:
· Page Layout: This defines the placements and style of various elements, such as text and graphics on a webpage. There are different standards for the header, introduction page, content page, and background. For example, within a header, the following components must always remain consistent:
o Usability helps an organization:
§ Logo
§ primary navigation bar
§ utility navigation
§ official client name type treatment
· Site Navigation: Effective site navigation enables the user to navigate through the websites. Site navigation is divided into primary, secondary, utility, and footer navigation, text links, buttons, and site map.
· Images and Text: Arial is the primary font to be used for all body copy on our sites. Also, images for our sites need to represent a broad range of clients, services, and products. Therefore, there is flexibility (and a need) in the library to use images showing a range of content. That said, they should be unified in their sensibility and be optimistic, knowledgeable, approachable, significant, and distinguished.
· Legal: All elements on a webpage must be adhere to various legal requirements. Any compliance risk must be considered and assessed for.
· Content: All content must be appropriate and relevant for the users.
· Global: The contents of the webpage must be designed keeping in mind that the users may be from different part of the world. Content must be reviewed for any local or geographic connotations.
· Accessibility: Increasingly, it is becoming mandatory for organizations to cater to individuals with disabilities. Most countries have laws which require all services to follow certain guidelines (typically a version of the W3C guidelines) so that the webpage is accessible.
· Scalability: WebPages and its elements should be designed keeping in mind that requirements will change over a period. For example, if you choose a pull down list because you have five options, tomorrow you may have more. You should consider how usability could be impacted if that happens.
· Searching: As users become increasingly impatient with websites, the search function is gaining significance. Ensuring that all content on a webpage is searchable has become a basic design requirement. We use the term ‘product’ because usability applies to all products, not just websites.
How to Optimize User Experience?
The user experience is defined as the complete end-to-end user satisfaction when using a product or a system. It is all about how a user feels using a product, system, or service. Usability increases user satisfaction and productivity, leads to customer trust and loyalty, and contributes to tangible cost savings and profitability.
· Here are some of the guidelines or best practices that you can follow to optimize user experience for a website:
1. Do not display unsolicited windows or graphics that pop up.
2. Optimize the credibility of information-oriented websites. For example, always ensure that the site is as up-to-date as possible.
3. Standardize task sequences.
4. Reduce the user’s workload.
· Here are some other rules to follow:
o Minimize page download time.
o Warn the users before the time expires.
o Display information in a directly usable format.
o Format information for reading and printing.
o Provide feedback when users must wait. For example, if the processing of some information will take 10 to 15 minutes, then you must inform the user about the status of the process.
o Inform users of long download times.
o Develop pages that will print properly.
Ten Usability Heuristics by: Jakob Nielsen
A heuristic is defined as a usability principle that is used to examine the user interface of a product or a website. This principle can be used in the following two ways:
· Trial-by-error learning: Trying out some approaches without actually following hypotheses that are used so as to prove correct results.
· Rule-of-thumb: Using the knowledge derived from experience to come to a conclusion for any kind of a problem. Jakob Nielsen defined 10 usability heuristics to examine the user interface design.
Elements of Customer Satisfaction
The four components of the UX Maturity Scale consists of Availability (Is it available? Ex. All major websites); Performance (Do pages load fast or slow? Ex. Google Chrome); User Interface Design (Is it graphically appealing? Ex. Twitter, YouTube); and Usability (Is it easy to use? Does it match the user’s expectations? Does the UI follow usability standards? Ex. Wikipedia).
Why is Research Important?
This lessens the calls and e-mails to the call center. There will be fewer mistakes, easier to recover from once that happened. It makes customer growth faster. This increases customer retention and lowers development costs. It lessens rework and users can get in & do what they need to do without getting their fingers burned).
Four Types of Investigation
I. Research with People
The Advantages of this is that it can be used to test concepts before prototyping or requirements; catches the issues internal teams are often too close to see; can provide reliable data on customers’ ability to complete specific tasks; illuminates issues or problems with navigation or information architecture; and some methods are helpful for iterating prototypes and design.
This involves Formal task-based usability study; Focus group; Survey; Card Sort; “Guerilla” testing; Ethnography; Participatory design; and Assessing Impact and Criticality.
II. Inspection Methods
The Advantages of this is that it is relatively fast, efficient, and inexpensive; helpful in identifying potential usability issues early in a project; and can be a precursor to formal testing. Inspections Methods includes Rapid Usability Assessment (RUA) which deals with Heuristic evaluation, Expert view, and Cognitive Walkthrough.
III. Unobtrusive Methods
The Advantages of this is that it provides reliable data to determine customer preferences and it doesn’t require recruiting of participants. It is useful for determining most effective design for completion or measuring the outcome of specific objectives. Unobtrusive methods involve Online Experimentation which deals with multivariate and A/B Testing, Web Analytics, and Voice of the Customer Reporting.
IV. Consulting
Web Design Basics
Know what your website’s purpose is. Know who your Audience is, Desired Outcomes, and Tie to broader organizational goals and strategy.
In Setting and Measuring Goals, set specific and measurable goals. Build the website around the goal and keep in mind the one-click rule.
In Conceptualizing your website, take note of the User stories. It sketches how and why users will interact with the site. These are based on interviews and intelligence on audience and stakeholders. The Information Architecture is a simple outline of what content will appear on the website and how it will be arranged.
The Homepage should be simple with the most important options. The key questions for your team are: Does the information architecture reflect the most important user stories?; Will new content or sections need to be added in the future?; Who will create the content for each section?. A Wireframe is a visual representation of the elements of your website. This can be a Microsoft Word document, an Illustrator graphic, or even a pencil drawing. It’s not a literal recipe for the website but it is more of a visual aid to use in discussions with stakeholders.
Content Management Systems
Web CMS (or just CMS) is a program installed on your web server that manages the website. Changes in design affect the entire site, not just one page. A non-specialist can keep website content up-to-date (but you might need help with initial setup). If you use a propriety CMS, understand what you’re paying for.
User Centered Design (UCD)
Fundamental – The UCD Process
The User Centred Design Process is exactly that – a process that is entirely focussed on the observing and understanding the user, identifying needs, and designing and delivering a usable and efficient solution to meet those needs.
This process (Research>Concept>Design>Implement>Launch) integrates into the standard project process (in slightly different forms depending on the project methodology – waterfall, agile etc).
The 6 Core Principles are (1) The design is based upon an explicit understanding of users, tasks, and environments (2) users are involved throughout the design and development (3) The design is driven and refined by user-centred evaluation (4) The process is iterative (5) The design addresses the whole user experience (6) The design team includes multidisciplinary skills and perspectives.
User Centred Design should help deliver solutions that enable a user to reach their goal easily and efficiently. The user should be able to interact with the solution in a satisfying and consistent manner as well.
Glossary
Concept design is created towards the outset of the project and is used to explore alternative design options which might meet the user needs – often captured on whiteboards, hand-drawn sketches, or simple wireframes. The main benefit of conceptual design is to get rapid feedback from users on the suitability of design ideas and feedback from technical architects on the feasibility of design.
Ethnography is the name given to a set of research methods which seek to view a person’s experience from that person’s perspective – getting into the user’s shoes.
Expert Audits are reviews of a particular interface or service against a set of predefined best-practice criteria.
Functional Prototype may be created in a wire framing tool that supports some degree of interaction, or sometimes created in code. Whilst usually not being integrated to ‘back-end’ services, they allow the UX Designer and interested parties an opportunity to interact with the system and perform a set of predefined tasks.
Implementation review is a review highlighting any discrepancy between the UX Design Specification and the solution implemented by the Development Team.
Personas are fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or product. Persons are useful in helping to guide decisions about a product, such as features, interactions, and visual design.
Styleguide – Where used for similar purposes, consistency between elements on interfaces will establish user trust and efficiency. Once a user has found an element they may more easily find the same element on another screen, behavior of elements is also consistent – even when accessed on different screens. The Styleguide supports this outcome by designating the positioning, and visual appearance of elements.
Usability Testing is the evaluation of a solution by users, against a set of criteria agreed with the project team. Testing can occur very early in the project with paper-based design concepts (low-fidelity), and later in the project with functional prototypes. Testing can be open or more structured, but the planning, conducting, and testing requires preparation to ensure the user is at ease, not ‘led’ by the moderator, and that the intended data is clearly documented.
User Journeys is a record of the steps taken by a user to reach a particular goal. For each step the creator notes, what information the user may need require, with whom they might interact, what ‘pain-points’ they might encounter, and what outcome they might expect. Initially captured with a whiteboard and pen and later documented in a template which can be easily shared with the project team.
Wireframes is a low-fidelity visual representation of a digital service. Often, a wireframe represents the basic page layout, structure, key components, and navigation structure.