A Practical Guide to Information Architecture
Simple steps to create better information architecture in your own projects, large and small.
A comprehensive collection of UX techniques available for use on UX projects.
Mix and match these UX techniques to create a UX process best suited to the project at hand. We’ll be updating this page regularly with additional content, links and tutorials about how to apply these techniques.
Are we missing a UX technique? Perhaps you’d like to write a tutorial or case study about one of these techniques? Get in touch!
Looking for an online course that teaches how to use these techniques? View our big list of UX courses.
Japanese translation of this page by Shu Wakasa.
|Technique||What It Is||When To Use It||How To Use It|
|Diary Study||Asking users to record their experiences and thoughts about a product or task in a journal over a set period of time.||Research||Conducting a diary study is really as simple as providing users with a diary and a timeframe, as well as guidelines about what (and what not) to record.
Read Andrew Maier's article, Jumpstart Design Research With A Diary Study for more details.
|User Interviews||User interviews are a key activity for understanding the tasks and motivations of the user group for whom you are designing. Interviews may be formally scheduled, or just informal chats (for instance, in a suitable location that your target demographic are present).||Research||Interviewing someone takes practice. Read how to how to improve your interview skills for tips on getting better.|
|User Testing||Sitting users in front of your website or app and asking them to perform tasks, and to think out loud while doing so.||Research, Analysis, Design, Production||Read about how to run a user testing session even if you're a complete novice.
Also be sure to check out Steve Krug's short book, Rocket Surgery Made Easy for a comprehensive guide on how to plan for, schedule and conduct usability tests.
|Unmoderated Remote Usability Test||URUT is similar to in-person usability testing however participants complete tasks in their own environment without a facilitator present. The tasks are pre-determined and are presented to the participant via an online testing platform.||Research, Analysis, Design, Production||Chris Gray's article How to Run an Unmoderated Remote Usability Test outlines the process and includes an animated video to walk you through it.|
|Storyboards||A storyboard is a tool inspired by the filmmaking industry, where a visual sequence of events is used to capture a user’s interactions with a product. Depending on the audience, it may be an extremely rough sketch, purely for crystallizing your own ideas. |
Sometimes it can be useful to create a slightly more polished version of this—a comic—to communicate this sequence of events to key stakeholders in order to achieve buy-in for a concept.
|Analysis||Check out Matt's comic strip, A Day In The Life Of A UX Designer, as an example of capturing daily tasks in a comic-strip format.
We'll definitely be publishing more information on how to create storyboards and comics on uxmastery.com soon!
|Personas||A persona is a fictitious identity that reflects one of the user groups for who you are designing.||Analysis||
Creating personas for your project involves morphing qualitative and quantitative data from analytics, surveys, interviews, user testing sessions, and other research activities into a handful of representative “typical” users. These personas are assigned names, photographs, motivations, goals, and a believable backstory that is rooted in the backgrounds of real people using your website or app. Read the process Matt followed for this activity at SitePoint or take a look at Gregg Bernsteinn's short animated video.
|Mental Models||A mental model diagram is a fishbone or horizon diagram where the top towers represent individuals' motivations, emotions, and stories related to their experience in achieving a particular goal, regardless of the tools they use. The top part of the diagram is person-focused, not solution-focused. The bottom towers of the diagram represent the features of your organization's offerings, aligned beneath the appropriate upper towers that they support the best. You can see where your organization's design and business requirements support people's goals well and where they need improvement. The diagram as a whole is generative, not evaluative, helping your organization realize weaknesses and gaps in the way you support people and adapt existing products, services, or processes to particular behavioral audiences or situations.||Analysis||How it works: stories collected from essays, web, empathic interviews, etc. are collected, combed for relevant actions, emotions, and philosophies and grouped in mental spaces. Requirements gap analysis is then conducted by slotting requirements into the mental spaces and seeing how they align with what users have said.
Advantages include an in-depth understanding of gaps between individual's perceptions and motivations vs. business and design requirements. Since they are unstructured and open ended interviews, the likelihood of the results being skewed by stakeholders is minimal, which leads to a more accurate understanding of what will benefit and be well-received by the users. There's some flexibility in data collection--it can come from blogs, Twitter, diary entries (see Diary Studies), etc. as long as it is the voice of the individual and not being generated by highly directed questions (courtesy Mike Oren, PhD).
Indi Young describes the process in her book of the same name.
|Collaborative Design||Inviting input from users, stakeholders, and other project members.||Design||Provide all participants with some paper and a pen, and have them complete exercises such as drawing wireframes, or writing on printouts of screens that they like or don't like. Read Jason Furnell's Facilitating Collaborative Design Workshops article for more.|
|Workflow Diagram||A workflow diagram (or activity diagram) is a graphical representation of activities and actions conducted by users of a system.||Design||Traditional workflow diagrams created by Business Analysts would comprise strict UML notation.
Interested in writing about workflow diagrams for uxmastery.com? We'd love to hear from you. Contact us now!
|Sitemap||A sitemap is a complete list of all pages available on a website.||Design||Creating a sitemap is a useful task at the beginning of the design process, as it can be used to shape which screens to wireframe.
Interested in writing for uxmastery.com about creating sitemaps? We'd love to hear from you!
|Wireframe||A wireframe is a rough guide for the layout of a website or app. A prototype is similar in that while far from being a polished product in terms of visuals or functionality, it gives an indication of the direction that the product is heading. “Mockups” is the term I use for wireframes that have been created in high fidelity, but for some people these three terms are interchangeable.||Design||Static wireframes can be created with pen and paper, but these days the software available for creating interactive wireframes makes the task quick and easy to do. Watch this space for a tutorial on this topic.|
|Paper Prototype||Paper prototyping is the process of creating rough, often hand-sketched, drawings of a user interface, and using them in a usability test to gather feedback. Participants point to locations on the page that they would click, and screens are manually presented to the user based on the interactions they indicate.||Design||Watch this YouTube video of a user testing session using a paper prototype.|
|Mood Board||A mood board is a collage, either physical or digital, which is intended to communicate the visual style a direction is heading (or should be heading). Stakeholders may use a mood board to provide a visual designer with the atmosphere they would like their site to convey and the colour palette to explore.||Design||Paul Wyatt's list of tips for creating a mood board is a good place to start. Interested in writing something about mood boards for uxmastery.com? Get in touch!|
|A/B Testing||Good for testing new or experimental features before releasing them to all customers.||Design,Research||Give one version of a page or feature to some customers; give another to the rest. Measure the performance of each to see which was more successful.|
|Beta Launch||Releasing a closed beta release of your product involves allowing only a select group of users to use the software and provide feedback before it becomes available to the wider public.||Design, Production||Joel Spolsky's article, Top Twelve Tips For Running A Beta Test is a great place to start.|