UX basics

This topic will cover:

• Overview of UX
• User Experience Honeycomb
• Technology
• Important factors for web development
• Overview of core web design skills
• UX design principles–Schneiderman, Norman and Nielsen
• Determine the appropriate design principles for the site
• Human interface
• Usability
• Usability engineering.

The term 'user experience' (UX) originated in the early 1990s when a cognitive psychologist, Donald Noman, joined the staff at Apple.

UX design focuses on the user. By understanding what the visitors to a website want, who they are, and how they behave, a designer can craft a design that will be far more effective than one created by a designer sitting in a closed room--no matter how talented they might be. Essentially, it is a process of exhaustively testing every aspect and every element of the design and the process, making changes and testing again--iterating the design until it is right.

UX could be something positive or negative, good or bad. This depends on characteristics of a website such as:

• design
• structure
• functionality
• navigation
• usability.

At the core of UX, is ensuring that users find value in what you are providing. Peter Morville represents this through his User Experience Honeycomb.

For there to be a meaningful and valuable user experience, information must be:

• Useful: Your content should be original and fulfil a need.
• Usable: The site must be easy to use.
• Desirable: Image, identity, brand and other design elements are used to evoke emotion and appreciation.
• Findable: Content needs to be navigable and locatable onsite and offsite.
• Accessible: Content needs to be accessible to people with disabilities.
• Credible: Users must trust and believe what you tell them.

The honeycomb identifies all the areas that are critical to a good user experience. These can be broken down further and used as a checklist.¹

Another important factor of UX design is technology. Without understanding technology, a designer will be missing a layer of knowledge--like a peanut butter sandwich without the bread.

Technology comprises both machines (hard technology) and scientific thinking (soft technology) to solve problems and promote progress. It consists of knowledge and methods required to carry out and improve the production and distribution of goods and services, and also entrepreneurial expertise and professional know-how.

Technology includes inventions and innovations.

The main features of technological environments:

• are components of macro or indirect action environments
• change very fast
• affect the way resources of the economy are converted into output
• are self-reinforcing
• an invention in one place leads to a sequence of inventions in other places.²

Factors for web development technology

There are several categories of web development technology that web developers could use for any project. A solid foundation in these factors and how they improve the user experience is crucial.

Convenience and usability

You may have several reasons for building a website, but ultimately there should be one or two primary functions and you will want to make sure that you are using the right tools and platforms for the job.

Consider, for example, an eCommerce website. A search function is a necessity, allowing customers to find the items they want to buy. JavaScript is one of the core technologies with several libraries that offer autosuggest for search functions. This would make browsing your store easier, especially for new customers who may not know the exact keywords to use.

Speed and performance

Website performance and page speed are major considerations because of how strongly they affect overall user experience (UX). Forty per cent of people abandon websites that take more than three seconds to load!

One technology that contributes to the speed of a website is the web hosting service. A web hosting service is what makes a website accessible through the web. Investing in one that provides a good amount of space may seem expensive but will surely be worth every cent.

Choosing a web hosting service provider depends on your hosting needs such as site backup, disk space, control panel, customer support availability, and so on. You should also consider the host reliability and uptime guarantees.

Security

There are plenty of security threats and vulnerabilities in websites. One of them is cross-site scripting (XSS) which gives attackers the ability to inject client-side scripts (such as JavaScript) into web pages being viewed by users. It may be used to hijack an account and impersonate the real account owner so security plugins can be used to maximise a website’s defences.

Aesthetics

While web design is in a separate discipline, it still has a bearing on web development—the two come together in creating the overall UX.

A website’s aesthetics should reinforce its function. For example, colour-use to emphasise key clickable objects or using white space to focus attention. This should be consistent across various devices.

One of the core technologies for this is Cascading Style Sheets (CSS), which is used to add styles to web pages. There are a lot of CSS frameworks and concepts that already support different devices.

Unique selling point

This is simply the marketing term for 'what you have that your competitors don’t' and the concept works the same way in websites. There is a wide selection of features that you can put on your website: cost calculators, file converters, shirt design makers and so much more.

You can combine all the technologies mentioned in the previous items to build just one website. These factors are also worth revisiting when updating or redesigning an existing site. In any case, only you can think of your own unique selling point.³

Core web design skills

With the rapid progression of web development technology, the requirements for web designers are getting higher and higher. In addition to being proficient in professional skills, understanding the necessary web development languages will have long-term benefits for you.

HTML

Whether you are a developer or not, you should know basic HTML/CSS. This will help you to more easily read, edit and solve problems in your content. The level and scope you need to know will depend on your actual work as a designer or developer. As a minimum, you should be aware of basic skills such as how styles and colours are controlled and adjusted by code. 

CSS

CSS and HTML are partners in website development and are the basic building blocks of web page structure and style:

• HTML determines the structure of the site
• CSS handles the visual appearance (i.e. adjust colours, change fonts or add stunning backgrounds).

JavaScript

With the ability to write design code in HTML and CSS, you can help render yourself more competitive by learning to program in JavaScript (JS) which will allow you to enable more complex features on web pages. According to a survey by StackOverflow, JS is the most popular programming language for full stack (front-end and back-end) developers.

Web Server Management

Most web designers think they can ignore the server, but the web server and downtime issues are inevitable. You do not need to be a back-end expert, but understanding how a web server and its basic features work will help you solve problems faster.⁴

The user’s experience is not solely defined by the product's design. Users bring their own experiences and abilities to the encounter, which informs their experience.

For example, users’ experiences are influenced by:

• cultural and personal attributes
• the environment where they experience the product.

UX design principles vary based on the business needs, the designer and the target audience. Finding a design principle that works for you is part of establishing yourself as a professional.

Let us explore three types of principles:

1. Schneiderman’s 8 principles of human-computer interface design
2. Norman’s 7 principles
3. Nielsen’s 10 heuristic principles.

Schneiderman’s Principles of Human-computer Interface Design

What do the 8 golden rules mean in practice?

1. Strive for consistency

Sequences of actions are consistent in similar situations. Prompts, menus and help screens use identical terminology. Colours, layout, capitalisation, fonts, spellings and so on are consistently applied throughout the site.

2. Seek universal usability

Recognise diversity--you, the designer, must consider the type of user frequenting your system: ranging from novice user, knowledgeable but intermittent user and expert frequent user. What are the diverse abilities, age ranges, disabilities, international differences and technological diversities of your users?

3. Offer informative feedback

For every user action, the system should respond in some way. In web design, this can be accomplished by DHTML. For example, a button will make a clicking sound or change colour when clicked to show the user something has happened.

4. Design dialog[ue]s to yield closure

Sequences of actions should be organised into groups with a beginning, middle and end. The informative feedback at the completion of a group of actions shows the user their activity has been completed successfully.

5. Prevent errors

Design forms to minimise or prevent errors. For example:

• choose menu selection over form fill-in and do not allow alphabetic characters in numeric entry fields
• segment long forms and send sections separately so that the user is not penalised by having to fill the form in again (but make sure you inform the user that multiple sections are coming up--this can be achieved with step progression bars).

Expect users to make errors, try to anticipate where they will go wrong and design with those actions in mind.

6. Permit easy reversal of actions

If users do make an error, instructions should be written to detect the error and offer simple, constructive and specific instructions for recovery.

7. Keep user in control

Experienced users want to be in charge. Surprising system actions, tedious sequences of data entries, inability or difficulty in obtaining necessary information and inability to produce the action desired all build anxiety and dissatisfaction. To increase the pace of interaction, use abbreviations, special keys, hidden commands and macros.

8. Reduce short-term memory load

A famous study suggests that humans can store only 7 (plus or minus 2) pieces of information in their short-term memory. You can reduce short-term memory load by designing screens where options are clearly visible, or using pull-down menus and icons.⁵

Norman’s 7 Principles

In 1988, in order to assess the interaction between humans and computers, Donald Norman proposed 7 principles that can be used to transform difficult tasks.

1. Use both knowledge in world and knowledge in the head.
2. Simplify task structures.
3. Make things visible.
4. Get the mapping right (User mental model = Conceptual model = Designed model).
5. Convert constraints into advantages (Physical constraints, Cultural constraints, Technological constraints).
6. Design for error.
7. When all else fails − Standardise.⁶

Nielsen's 10 Usability Heuristics

Heuristics evaluation is a methodical procedure to check user interface for usability problems. Once a usability problem is detected in design, it is dealt with as an integral part of constant design processes. Heuristic evaluation includes usability principles such as Nielsen’s 10 usability heuristics.

The 10 usability heuristics serve as a checklist in evaluating and explaining problems for the heuristic evaluator while auditing an interface or a product.⁷

Instructions

Implement visual design principles to a website

Using Nielsen’s 10 usability heuristics, audit a website of your choice.

Go to the forum to share your response with your peers, identifying why the website did or did not meet the heuristics.

The success of any website entirely depends on how well designed it is. A well-designed site, which includes usability and functionality, determines success and not just the visual design. Websites are often the face of a business and potential customers will visit websites before they choose to use a business’s products and services. Lacking in any aspect of web design could end up tanking your brand impression.

Web page design is more critical for conversions than you think. Website design is not limited to how a site looks and feels, but also how it works. A simple looking website with exceptional usability and a good structure typically performs amazingly on Google. User views of such websites are also higher than those with poor user experience. The performance entirely depends on the effectiveness of the website.

Here is the list of 9 good design principles which will make your website aesthetic, user-friendly, effective and engaging:

Simple is best

Over-designed websites may not work as putting too many elements on the page distracts visitors from the main purpose of your website.

Simplicity always works. Clean and fresh design of your website not only makes the website appealing, but also helps users to navigate from one page to another. To load a website containing design features which do not serve the purpose may be frustrating to visitors. Keep your design as simple as possible so that the visitors find it easy-to-use and navigate through seamlessly.

Consistency

Consistency in website design matters:  fonts, sizes, headings, sub-headings and button styles must be the same throughout the website. Plan everything in advance. Finalise the fonts and the right colours for your texts, buttons and so on, and stick to them throughout the development. CSS (Cascading Style Sheets) come in handy to keep the complete information about design styles and elements.

Typography and readability

No matter how good your design is, text still rules the website as it provides users with the desired information. Since search engine crawlers are very much familiar with this data, it becomes an integral part of SEO (search engine optimisation) activities. You should keep your typography visually appealing and readable for visitors, along with tricky use of keywords, meta-data and other SEO-sensitive elements.

Consider using fonts that are easier to read. Modern sans-serif fonts such as Arial and Helvetica can be used for body texts. Make proper combinations of typefaces for every design element (such as headlines, body texts and buttons).

Mobile compatibility

Keeping in mind the ever-growing usage of smartphones, tablets and phablets, web design must be effective for various screens. If your website design does not support all screen sizes, chances are that you will lose users to your competitors. Design for mobile-first and make your design responsive.

Colour palette and imagery

A perfect colour combination attracts users while a poor combination can lead to distraction. This necessitates you to select a perfect colour palette for your website to create a pleasing atmosphere and leave a good impression on visitors. Enhance UX by selecting a complementary colour palette to give a balanced look to your website design.

Remember to use white space and avoid using too many colours (3 or 4 tones for the whole website is ample to give an appealing and clear design).

Apply the same approach to selected images, keeping the overall colour palette in mind.

Easy loading

No one likes a website that takes too much time to load. Avoid this fault by optimising image sizes and combing code into a central CSS or JavaScript file (to reduce HTTP requests). Compress HTML, JavaScript and CSS for enhanced loading speed.

Easy navigation

Visitors spend more time on websites that have easy navigation. Effective navigation is assisted by creating a logical page hierarchy, using breadcrumbs and designing clickable buttons. You should follow the 'three-click rule' so that visitors can get the required information within three clicks.

Communication

Users want to get information and if your website can communicate with your visitors efficiently they will spend more time on your website. Tricks that may work to establish effortless communication with the visitors are:

• organising information by making good use of headlines and sub-headlines
• cutting the waffle
• using bullet points, rather than long sentences.⁸

Grid-based layout

The grid-based layout arranges content into a clean grid structure with columns, sections that line up and feel balanced and impose order and results in an aesthetically pleasing website.⁹

Keeping the principles of good website design, you can easily develop an aesthetically pleasing and functional website.

Human-computer interaction (HCI) is the study of how people interact with computers. This includes the extent computers are or are not developed for successful interaction with human beings.

• User
• Computer
• Interaction.

User

When we talk about HCI, we do not necessarily imagine a single user with a desktop computer. By 'user', we may mean an individual user, a group of users working together, or maybe even a series of users in an organisation with each involved in some part of the job or development. The user is any person trying to get the job done using the technology.

An appreciation of the way people’s sensory systems (sight, hearing, touch) relay information is vital to designing a first-class product. For example, display layouts should accommodate the fact that people can be side-tracked by the smallest movement in the outer (peripheral) part of their visual fields, so only important areas should be specified by moving or blinking visuals. And of course, people like designs that grab their attention. Designers must decide how to make products attractive without distracting users from their tasks.

Computer

When we talk about the computer, we are referring to any technology ranging from desktop computers, to large-scale computer systems—even a process control system or an embedded system could be classed as the computer. For example, if we were discussing the design of a website, then the website itself would be referred to as 'the computer'.

Interaction

There are obvious differences between humans and machines. Despite these, HCI attempts to ensure that they both get on with each other and interact successfully. To achieve a usable website, you need to apply what you know about humans and computers and consult with likely users throughout the design process. You need to find a reasonable balance between what can be done within the schedule and budget, and what would be ideal for your users.

The goals of HCI are to produce usable and safe systems, as well as functional systems. To produce computer systems with good usability, developers must attempt to:

• Understand: the factors that determine how people use technology.
• Develop: tools and techniques to enable building suitable systems.
• Achieve: efficient, effective and safe interaction.
• Put: people first.

Underlying the whole theme of HCI is the belief that people using a computer system should come first. Their needs, capabilities and preferences for conducting various tasks should be what direct developers in the way that they design systems. People should not have to change the way that they use a system to fit in with it. Instead, the system should be designed to match their requirements.

1. Requirements analysis
   • Establish the website's goals from the standpoint of the user and the business.
   • Agree on the users’ needs and aim for usability requirements.
   • Appraise existing versions of the website (if any).
   • Carry out an analysis of the competition.
   • Complete discussions and questionnaires with potential users.
2. Conceptual proposal
   • Outline site design and architecture at an abstract level.
   • Perform a task analysis to identify essential features.
3. Prototyping
   • Create visual representations (mock-ups) or interactive representations (prototypes) of the website.
   • Evaluate usability using a proven method.
   • Using the results, create more mock-ups or improve the prototypes.
   • Repeat this process until the design and usability goals are met.
4. Development
   • Create the final product.
   • Evaluate functionality through testing, quality assurance, usability testing and field testing.
   • Use the evaluation results to improve the product.
   • Repeat this process until the business goals are met.
5. Launch and housekeeping
   • Launch the website.
   • Maintain and tweak with user feedback (housekeeping).
   • Use the feedback to create new requirements, and begin major design improvements (system iteration).

The importance of HCI in website development

The importance of HCI in the future of website development is not to be taken lightly. It has been shown that a large percentage of the design and programming effort of projects goes into the actual website design. The interface is a fundamental part of making the site more successful, safe, useful, functional and, in the long run, more pleasurable for the user.

The tools and techniques that have been developed in this field have contributed immensely towards decreasing costs and increasing productivity. Savings have been created through decreased task time, fewer user errors, greatly reduced user disruption, reduced burden on support staff, the elimination of training and avoidance of changes in maintenance and redesign costs. Studies have shown that by estimating all costs associated with usability engineering, the benefits can amount to 5000 times the project’s cost. HCI is a web imperative now, and it will continue to be so in the future.¹⁰

Factors in HCI

A large number of factors should be considered in the analysis and design of a system using HCI principles. Many of these factors interact with each other, making the analysis even more complex. The main factors are listed in the following table.

An expansion of some of these main disciplines which have contributed to HCI includes:

Computer science

• technology
• software design, development and maintenance
• User Interface Management Systems (UIMS) and User Interface Development Environments (UIDE)
• prototyping tools
• graphics

Cognitive psychology

• information processing
• capabilities
• limitations
• cooperative working
• performance prediction

Social psychology

• social and organisational structures

Ergonomics and human factors

• hardware design
• display readability

Linguistics

• natural language interfaces

Artificial Intelligence (AI)

• intelligent software

Philosophy, sociology and anthropology

• Computer-supported cooperative work (CSCW)

Engineering and design

• graphic design
• engineering principles.

Usability is one of the key concepts in UX design. A usable system is:

• easy to learn
• easy to remember how to use
• effective to use
• efficient to use
• safe to use
• enjoyable to use.¹¹

Usability research helps organisations understand user needs, identify potential issues and generate ideas for improvement. While usability testing is often used to evaluate a website’s user interface (UI), this method is also invaluable for discovering the best way to present information on your website. By paying attention to how people read, interpret and access content, you better understand how to communicate, structure and format information.

It is great when sites have good navigation, but too often we see the user experience fail at the content level: people can navigate to the content but do not understand it.

Analysis shows that people often use websites to collect, compare and choose products or services. Ensure users evaluate your digital copy so that articles and information match their needs and expectations. People read online content differently than printed material.

The usability study methodologies for evaluating UI versus content are fairly similar. However, there are nuances to the methods that are worth considering when the usability study's primary goal is to evaluate digital copy.¹²

User testing

User testing offers a wide variety of services for testing a user's experience. You’ll have the ability to choose the user profiles that you’d like to survey and they even offer a service for you to see real-time video of test participants using your site or app.

Usability Tools

This testing tool allows you to test both conversion and user experience. With 9 individual applications that you’d otherwise pay for separately, Usability Tools allows you to access a user research panel, run A/B tests, record visitor activity, test forms and more.¹³

Why is usability important?

Many everyday systems and products seem to be designed with little regard to usability. This leads to frustration, wasted time and errors.

Examples of interactive products include: mobile phone, computer, personal organiser, remote control, soft drink machine, coffee machine, ATM, ticket machine, library information system, the web, photocopier, watch, printer, stereo, calculator, videogame etc. How many are actually easy, effortless and enjoyable to use?

For example, a photocopier has a button on its control panel marked 'C'. Imagine that you just put your document into the photocopier and set the photocopier to make 15 copies, sorted and stapled. Then you push the big button with the 'C' to start making your copies.

What do you think will happen:

(a) The photocopier makes the copies correctly?

(b)The photocopier settings are cleared and no copies are made?

If you selected (b), you are right! The 'C' stands for clear, not copy. The copy button is actually the button on the left with the 'line in a diamond' symbol. This symbol is widely used on photocopiers but is of little help to someone who is unfamiliar with this detail.¹⁴

What is website site mapping and why is it needed?

'Site mapping' is the visual process of outlining a website’s structure, high-level functionality and navigation scheme. The end deliverable can be a sketch, image, PDF, or presented in a tool like SlickPlan.

A website’s sitemap should be defined early in the website planning process. There’s only a handful of activities that should precede this step (e.g. Business Objectives, User Research).

Site mapping is a critical phase to the structure of a website because it represents a crucial deliverable of information architecture (IA)—the foundation to the 5 competencies of user experience design.¹⁵

Information Architecture

When wearing the information architect hat, your job is designing a user interface (UI) structure that satisfies the corporate business strategy, product strategy and user experience strategy and accommodates all user cases and product requirements. Information architecture addresses questions such as:

• What are users’ primary goals and how can they achieve them using the application?
• How do users get from place to place?
• What rules exist that users have to work around?
• How are product features and components branded?
• What is the optimal scope of the application’s feature set?
• How do the UI roadmap and product roadmap position the application in its vertical market?
• How should I enable users to create and store multiple objects?
• What is the application’s search mechanism?

Through laying the groundwork and producing the deliverables shown in the sidebar, information architecture provides the foundation for the other competencies.

Interaction Design

With increasing pressure to create rich user experiences, the interaction designer bears the greatest load and is responsible for conceptual design, which requires exposure to the latest UI patterns and components. In laying the groundwork for and producing the deliverables, the interaction designer dives deepest into the minutia of page elements, presentation and page flow.

Questions the interaction designer must address include:

• What layout pattern would work best?
• Which features and information are of higher importance and how do I draw users’ attention to them?
• How should I incorporate the user feedback I am getting from user research, user surveys and formative and summative usability testing?
• What behaviours occur on dragging and dropping, on mouseover, and so on?
• How can I communicate the strengths of a feature or application?
• How can I satisfy users’ primary needs and support the tasks that let them achieve their goals?
• How can I draw on users’ intuition to get them to the next step?
• How can I ensure users are aware they’re performing a subtask that’s part of a greater task they’ve started?
• How can I use the UI components that are available to me—such as grids, tabs, and panels?
• How can I maintain consistency throughout the application?

The emergence of rich application experiences has increased the workload for interaction designers. What, in a traditional Web design process, we once specified as page-by-page state changes, we now achieve through a UI-component-by-UI component, multi-state specification often expressed as a matrix. At present, no single methodology that efficiently enables the documenting of rich application designs has emerged as the standard in the UX design community.

On the plus side, the focus of specifications has shifted. Remember when interaction designers had to specify a UI component, then give the specification to the engineers to go build it? Now designers can just pick a pre-built component that the engineers can configure.

Usability Engineering

At your company, when you are the sole user experience designer, and shifting into usability engineering, it is beneficial to completely remove yourself from the other four competencies, for three reasons:

1. Doing so immediately places you in the mindset of the user.
2. It favourably affects your ability to maintain neutrality when conducting usability tests.
3. It gives you perspective on design churn.

Shifting into a user mindset helps you lay the groundwork for usability testing and create the pre-test and post-test deliverables. It is essential when conducting usability test sessions, evaluating the findings of a usability test and making design recommendations.

Visual design

Visual design communicates your brand. That’s why everyone has an opinion about it. But it also communicates interactivity, information structures, workflows and relationships between the elements and components on a screen, making it an essential aspect of UX design for applications—whether for the desktop, the Web, or mobile devices.

People often overlook that for every type of user interface element the interaction designer specifies, the visual designer must design a widget or devise a corresponding style. And the visual designer must consistently apply these styles to every instance of each element throughout the application.

However, in this era of rich application frameworks, if the interaction designer has selected page elements from a reasonably stylish UI component library, the visual designer can concentrate more on branding and navigation.

Prototype engineering

Prior to the advent of rich user experiences, it was unusual for an engineer—a coder—to be part of a UX team. In fact, product development and product management might have resisted an engineer working on the UX team, considering engineering and design mutually exclusive. But with new rich UI component libraries emerging weekly, and the separation of the UI, or presentation, layer from the application logic and database layers in the code, both UX and engineering see having a prototyper on the UX team as advantageous to the overall product team.

Ideally, an interaction designer and prototype engineer work closely together to deliver prototypes of concept models for testing by the usability engineer. The findings of usability test sessions determine the designer’s next course of action—either iterate the design of the feature based on test results or move on to the next feature.

Prototyping offers a huge opportunity for increasing process efficiency. When done well, it can alleviate uncertainty about design intentions, clarify functionality and reduce the need for documentation. It also provides a working, though perhaps limited, representation of the application, so everyone on the product team can evaluate what’s working well in the user interface and where gaps or issues still exist.¹⁶

Research an initial design for a supplied brief

Culture Kings clothing store wants to update the navigation on their website to attract more customers. 

Your task is to assess the usability of their website. This will assist with the research phase of this project. 

Create a portfolio including:

1. a lean persona development of their customer (at least 2) 
2. usability assessment of their website based on the customer persona.