🧑‍🎨 Design
User Experience

Updated at 2013-11-13 11:58

Do not optimize the code, optimize the experience.

User experience design focuses on the overall usage process of a product. It is related to design in general, interaction design and user interface design.

User experience design focuses on the overall experience with the product. This includes basically everything that is related to the product in use, even advertisement and related services. The goal is that the product provides a positive experience with a practical outcome.

# UX Involves:
Product Design
Interface Design
Visual Design
Usability Testing

Involve end-users with the development. You learn what works and what does not a lot sooner and the problems are easier to fix. The sooner you start involving end-users in the development, the more you will achieve through it.

Help normal users to become power users. Don't assume everyone knows keyboard shortcuts on Mac and PC.

Understand the user needs and goals. What users tell you they want and what users really need are two different things. Users will always want a lot features while they really are happier with fewer. Remove all unnecessary elements and reduce redundancy. Is the user going to use this application once (kiosk) or will he return (game).

If a museum information stand start with a 2 minute tutorial, you are most likely doing something wrong.

Minimize mental effort needed to use the product. Minimize number of features, text you have to read, number of steps to use each feature, possibilities on each section and text you need to type. Automate stuff, do not ask for a permission, provide undo.

QR codes require relatively high amount of mental effort. You see them in use here and there so they cannot be linked to one single product. Scanning and using them is a hassle. But using them might still be better e.g. than typing the URL it contains.

Wii has low mental effort, the controls are intuitive because of the motion control.

Minimize your text content. Replace text with images and make text easier to read.

Make your input forms shorter.

Better design is not always reason enough to break standards. Consider what is your target audience and what have they used to.

Use four pages website if it is more usable than one long page.

Fulfil the mental models the end-users have. This reduces mental effort needed because users already understood how the product or process works. One major mental model is that something complex and valuable must be waited, so you may artificially slow down your software if you want user to value the output more.

You have a e-reader application. If you use shadowing and textures to make it look like in a real book, your application should work and animate like a real book.

Barcode scanner applications should work like real store scanners and beep when they scan successfully.

Add extra input if it simplifies the cognitive model. Bump application uses physically bumping your phones together to transfer information.

You have software that rates person's posture based on an image. Make it take a few seconds and show a progress bar even if the results could we returned instantly. And make the progress bar start at ~10%.

Make product appear really fast and responsive to interaction. Perform actions optimistically. Avoid confirmation windows and provide undo functionality. Download, upload and process data when user is doing something else.

Make "like" button to change state before you even send the request. Show message that is sent even before the application really sends it. If something goes wrong, show an error message later.

Load content before it is needed. Loading next content when user is filling a form or reading text is good. Instagram uploads the picture when user is filling name, location, etc.

Show dummy content. Facebook shows empty updates before the real content is shown.

Master the fundamentals, but focus on something special. When your product works as users expect it to, they will not care about the small problems. Then focus on a few features that the real users will love, not features that help the marketing to sell the product.

Start programs instantly. Do not show a splash screen or ask for configuration. Show a prerendered image of the UI in place of a loading notification.

User Experience Tools

Personas: Short and vivid descriptions of fictional characters that represent users. Used for understanding and creating tasks and maps better. Avoid if you are not sure of what will be the user types.

Usability Testing: Conduct usability testing. Used to find out user needs, how users do things and can they understand the product.

Analytics: Gathering and evaluating quantitative data to understand how people are using and being introduced to the product. Used to identify user behaviours. Use A/B testing when updating design.

Surveys: Asking users to respond to predetermined set of questions. Used to collect additional quantitative and qualitative information.

Expert Reviews: Evaluating existing product based on a set of usability guidelines and standards. Use to get quick overview of product's key usability issues.

Experience Maps: Visualizations of processes that users follow before, during and after using the product. For understanding whole user experience journey to highlight areas where design meets or fails to meet user needs.

Example User Experience Workflow


Understand the problem that is being solved from the eyes of users. User stories are iterated until the problem flow is clear.

Consulting Plan:

First Meeting 1 day Office and Document Research 2 days User Research 10 days Stakeholder Interviews 3 days Presentation of Findings to Board 1 day Stakeholder Interviews 3 days Prototype Development 10 days Validation Testing 5 days Wireframes, Stakeholder Interviews, Amends 10 days Validation Testing 5 days Wireframe Amends 2 days Handover to Visual Design and Development 0.5 days Sign-off Workshops 2 days Post Live Usability Review 10 days