Introduction
User experience design (UXD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction design, and extends it by addressing all aspects of a product or service as perceived by users.
The term User Experience was coined by Donald Norman.
The general idea of user experience is Make things easy for people.
Best Practices for Web UX Design
Understand your user
Understand what they want, what they know, and what they don’t know they want. To design a successful experience, you must research your users:
- Interview users
- Create user stories and scenarios
- Map out the customer journey
See beyond the page
Nowadays, web design requires an even broader skill-set as UX techniques mature.
Related: Reimagine the user experience, create what users love, and transform your business!
Here are a few checkpoints:
- Does the information architecture make sense?
For example, consistency is required in labeling for top-level and secondary navigation items. - Does the website create an emotional response?
The colors, visuals, and interaction design must all add up to hook the user into exploring the site deeper. - Is accessibility addressed correctly?
Accessible sites have real business value: they rank better in Google, and access larger audiences. - Does the text and visual content go well?
A site’s design includes all content. If the tone of the copy doesn’t match the visual style, the entire experience starts to dissolve.
Interactions remain the root of all UX
Interactions are not just about when a user clicks something on the site. The moment a user views the design, their brain processes visual interactions at the speed of thought.
Prototype early
Prototyping is the only sure way to gauge success. Usability tests at every iteration – will let you know whether you are on the right track, and what you need to change.
Device-Consistent Experiences
The only future-proof strategy is designing fluid experiences that adapt to any device.
Visual Consistency: Visual consistency ensures that site renders properly regardless of device. The same colors and graphics helps create a familiar experience wherever users log in.
Flexible Layout: When working on web designs, ensure that the layout scales appropriately. Obviously, the same site doesn’t look the same on every device. But the relative placement of menus, search functions, and key calls-to-action (like login) should match across devices. Users become accustomed to location quickly, and don’t want to relearn or switch their mental mapping.
Focus on context: Content suitable on the desktop is not always suitable for mobile. For instance, navigation can be stripped down in a mobile view to simple labels (or even shelved away in a navigation drawer), but they should certainly be fleshed out as you scale up to a tablet or desktop (e.g. horizontal or vertical menus). When you keep context in mind, you ensure that the design isn’t just consistent but also appropriate.
Responsive and Adaptive Design
Responsive Design (RWD) – Everything must be flexible: layouts, image sizes, text blocks . This flexibility, combined with smart use of CSS media queries, gives site the fluidity it needs to work on all devices.
Adaptive Design (AWD) – Design different sites for different categories of devices. Typically AWD sites have up to six variations, based on screen width: 320, 480, 760, 960, 1200, 1600
The mobile-first approach is the best strategies to create a responsive or adaptive design. Designing for the smallest screen and working your way up.
UX design checklist
Note that not all of these points apply to all products, but generally these are the ones that are most relevant.
- Avoid more than three primary colors
- Items on top of the visual hierarchy are the most important
- Primary action is visually distinct from secondary actions
- Interactive elements are not abstracted
- Form submission is confirmed in a visually distinct manner
- Alert messages are consistent and visually distinct
- Navigation is consistent
- Room for growth
- No more than two distinct font families are used
- Fonts used for text content are at least 12px in size
- Reserve uppercase words for labels, headers, or acronyms
- Different font styles or families are used to separate content from controls
- Font size/weight differentiates between content types
- Progress indicator for multi–step workflows
- Foreground elements (like content and controls) are easily distinguished from the background
