Welcome to the Marine UX wiki page! Here you will find lots of information about UX research and design principles. It should be noted that most of the information covered here is high-level overview information and not all principles apply to every single situation. This page is simply meant to encourage user-centred design thinking so we remember that we are designing for our users, not ourselves.

This wiki is divided into six main sections: (1) Introduction to UX, (2) UX Research, (3) Experience Mapping, (4) Information Architecture (IA), (5) Interaction Design, and (6) Visual Design for UX.

The Introduction to UX section is exactly what it sounds like: an introduction to the world of UX and human-centred design thinking. What does ‘usability’ mean? Why do we need UX research and design? These types of questions will be answered in this section.

The UX Research section contains information about why we need user research, and describes not only the different research methods that can be done but also where and when each research method should be used.

The Experience Mapping section explains what experience mapping is and also describes some experience mapping exercises to really help you empathize with your users.

The Information Architecture (IA) section explains the concept of IA as well as some different IA models along with when and where you might consider using each model.

The Interaction Design section explains the principles around interaction design and how it differs from visual design and IA.

The Visual Design for UX section is for the visually creative UX’ers! This section contains lots of helpful information about the use of visual design and how it can evoke an emotional response from your users. Sometimes your goal as a UX designer is to leave a lasting positive emotional experience with your users (think of the Apple Store or Nespresso stores), but sometimes, as long as your users can easily use the tool to perform their duties without anger and frustration, then that is considered a win by your organization (think of a data entry or reporting tool).

So let’s get into the wonderful world of UX!

Welcome to the wonderful world of UX!

What does it mean to say that something is usable? What is User Experience?

There are many opinions on the definition of the word ‘usability’, but the International Organization for Standardization (ISO) did us all a favour and came up with an exceptional definition:

“The extent to which a product can be used by SPECIFIED USERS to achieve SPECIFIED GOALS with EFFECTIVENESS, EFFICIENCY and SATISFACTION in a specified CONTEXT OF USE.”

We can break each of these components down a bit further:

• Effectiveness – the degree to which a product, service, or system enables someone to achieve their goals
• Efficiency – is usually measured by speed and error rate
• Satisfaction – a user’s response, perceptions, and opinions of the experience
• Context of use – the environment the user is in, device they are using, time of day, inside or outside, etc.

A User Experience is made up of all tangible and intangible aspects of interacting with an organization. A user experience may be as quick as a few seconds, or can extend over years, but the principles remain the same and will be explained in further detail in the following sections.

Why do we need UX research and design?

The easiest answer to this question is empathy. As designers, we want to be mindful of how our users interact with the products and systems that we design and to ensure they have a positive experience. But UX also has business and strategic advantages. For public service, UX is the transparent liaison between the business (legislation, initiatives, programs, etc.) and the end-user, whether that is the general public, or government employees. For the public, good UX allows for the message sent by the business to be received, as intended, by the users. For employees, good UX allows the users to perform their duties with “effectiveness, efficiency, and satisfaction”.

The true merit in UX principles is that they ultimately replace opinion-based decision making with research-based decision making. UX design principles and research methods are based on cognitive and behavioural psychology research theories and methods. Combined with measurable heuristics such as usability testing, user feedback surveys, baseline statistics, and key performance indicators (KPIs) the foundation of UX principles is based on actual data, and not just opinions.

UX Research

Research is probably the single-most important requirement for understanding our users. Without it, we have no idea who are users really are and how they actually interact with systems or products in their own environment.

There are 4 main categories of user research: behavioural, attitudinal, qualitative, and quantitative. Qualitative and quantitative research refers to the data source information (qualitative asks why and how, quantitative asks how many and how much), and behavioural and attitudinal research refers to the research approach (attitudinal methods refer to what people say, and behavioural methods look at what people actually do).

Although there are a lot of different research methods, UX research most frequently uses the nine methods listed in the following table.

The following matrix shows where each research method falls along the attitudinal, behaviour, qualitative, and quantitative spectrum.

It is important to note that you will never get all the answers with one research method. Use triangulation—a minimum of three methods—to cover all different research sections (behavioural, attitudinal, qualitative, and quantitative).

After the research has been collected, analyze and sort your findings into the three or four most common groupings (depending on the project, these groupings might be role-based, skill-based, or even context-based). You will use these groups to create the personas.

Personas

Personas are defined and driven by user behaviours, not demographics or psychographics, but we still include these elements to remind us that personas do actually represent real people. The main goal of a persona is to remind us (developers, business, managers, etc.) that we are not our users. It also allows our design decision-making to be driven by data and not based solely on opinion. Lastly, personas are supposed to be memorable and help us empathize with our users.

Once you have three of four personas established, you then identify primary and secondary users; typically in agile, you only focus on primary users for your MVP (remember this iteration of the 80/20 rule: 20% of the functionality will cover 80% of the users). Once the personas are complete, you can create user stories or usage scenarios.

Usage Scenarios

Usage scenarios are based on Bailey’s Human Performance Model: somebody, doing something, somewhere. Personas cover the ‘somebody’ and usage scenarios cover the tasks and context of use—the ‘doing something, somewhere’ parts.

Similar to personas, focus on the top 20% of the user scenarios completed by 80% of the users. Identify scenarios where the whole process works well and scenarios when things don’t work well. Use the following guidelines to create usage scenarios:

• Keep them brief (2–3 sentences)
• Write them from the user’s perspective
• Describe the actions, not the technology
• Scenarios consist of a trigger, activities, and resolution
• Capture normal and critical issues or problematic situations in different scenarios

User Story

A user story is very similar to a usage scenario but shorter (usually only one sentence) and really only focus on one specific need, pain point, or problem.  A user story is typically written using the following template:

As a <person/user/profession>, I need to <get/do/make/access something>, so that I <can accomplish a goal/avoid pain or frustration/make life easier>.

User stories like these are helpful when you are just starting a project with something like a product vision board workshop. Create a user story for each of your personas and that will really help focus the solution brainstorming sessions.

In a proper UX development cycle, the research, personas, and user scenarios are completed before a single line of code is written. With agile/scrum, this phase can be referred to as Scrum 0.

Experience Mapping

Experience mapping (also commonly referred to as journey mapping) is an exercise used to plot a user’s experience from start to finish, and is based on research. An experience map goes beyond a usage scenario because it actually involves the technology/product/system that the user uses to accomplish their goals.

The following is a list of experience characteristics to consider when creating experience maps:

• Triggers – senses, cognitive processes
• Flow – experience points, interactions, journeys
• Time – could be seconds, years, decades, etc.
• Participation – passive, active, social
• Intensity – from flash to immersive
• Coverage – products, services, environment
• Emotion – trust, comfort, aesthetics
• Meaning – symbolic, pragmatic, semantic

We create experience maps to uncover product/system issues and also to identify areas for innovation to improve the user’s experience. An experience map is also a visual tool to communicate your research findings.

You can use some of your user research to steer the creation of the experience map, but you can also do additional experience map research, such as business stakeholder interviews, and even leverage analytical tools to identify criteria such as number of support calls or web traffic.

From your research, you can draw conclusions about your users that will help guide the building of the experience map. These factors include:

• Goals and motivations
• Activities
• Context and frequency
• Experience points
• Artifacts and materials (what is needed to accomplish user’s goals)
• People (who is involved)
• Emotions
• Pain points and opportunities

We must not forget that user support is part of the user experience. This is important because a user can love a product but if they get into trouble, call support, and then can’t solve their problem or have a frustrating experience with the support representative, then their overall experience could be classified as “bad”. A ‘service blueprint’ is like an experience map but also puts a focus on the business-side, which include business processes and support[1].

Visualizing your experience map

Presenting an experience map as a visual artifact is important so that you can actually see the entire user journey and follow the user along their journey. It also helps when presenting your experience map to management so they can truly understand the user journey.

There are many different ways to visualize experience maps and really no one “correct” way. The following formats can be acceptable depending on how the map will be used:

• Large format poster
• Book
• PowerPoint deck
• Website

Information Architecture

Information Architecture (IA) can be defined as “the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support USABILITY and FINDABILITY” (Akendi, 2019). If you think of UX design as a human body, IA is the skeleton.

The main components of IA are as follows:

• Understanding what content users need
• How users think content should be organized (mental models)
• How you organize the content
• How you maintain that content

Users have mental models of how they think information should be organized. These models are often influenced by many different factors that can include digital literacy, current environment, cultural values, education, geographical location, and even other previously learned mental models. Our goal as designers is to discover the user’s mental model for our specific tool/system and create our IA to match.

The terms “berry picking” and “scent of information” refer to user behavior that implies if users feel that they are on the right track to complete a goal, they will keep searching for what they are looking for. If there is no scent of information, they can quickly become frustrated and most likely abandon their search. The following list contains obstacles that prevent users from ‘following the scent’:

• Iceberg syndrome – content located below the fold
• Unclear links – missing or broken links, links that don’t actually look like links
• Banner blindness – the right-hand column of a screen/webpage is often not seen by users
• Missing words – lack of a trigger or action word
• Inconsistent language – ambiguous, policy/legislation, or marketing terminology
• Orphan pages – missing or misplaced links such as 404 error pages

When doing IA research, open and closed card sorts are the most effective. Open card sorts allow users to create their own category headings. This method is great at the start of your user research (after you have created personas) to get an idea of users’ mental models and the language they use to categorize your content.

A closed card sort has fixed headings. Use a closed card sort when you want to validate your initial research and design. If you find that there are cards left over in a closed card sort, then you need to update your IA.

When designing for multiple platforms you need to consider whether your IA will be omni-channel or multi-channel. Omni-channel IA is consistent across all platforms (think of a news website like CBC). Multi-channel IA is optimized for specific platforms (think of how a banking app looks and feels vastly different than online banking on a desktop computer).

There are two main IA approaches: bottom-up and top-down. Bottom-up IA is content oriented and is useful when you have a lot of content to provide such as a sports or news website. Top-down IA is task-oriented and is ideal when users are coming to perform certain tasks (think of the mobile banking app again).

When building an IA, there are four main areas that you should focus on:

• Organizational schemes – how content is grouped together
• Hierarchy – how content groups are structured
• Taxonomy – how content groups are related (each term inherits the properties of all the terms above it)
• Labelling – language used to describe content groups; use controlled vocabulary to map the users’ language to the system/business language

Users move through content using two main methods: navigation and search. There are many different navigational systems so make sure you choose one that best matches the users’ mental models. Your content must also be searchable. This can include a site map, index, and functional searches. In order for successful search implementation you need good controlled vocabulary and reliable metadata.

Now that you have an idea of what the UX skeleton looks like, we can move to the UX muscular system, Interaction Design!

Interaction design (ID)

In the UX-as-a-human-body metaphor, think of Interaction Design (ID) as the muscular system: the form and function that allows users to complete their goals. It is important to remember that visual design and interaction design are not the same thing, although there is a bit of overlap. For example, anything related to conditional logic is typically done by an interaction designer who might say “I want an action button that has an active and inactive state” but it is the visual designer who would design the button to make sure the look/feel and colours match the company branding and other visual themes.

Interaction interfaces

There are many different types of interaction interfaces in the digital world, but the three most common types are: (1) command line or black box interfaces, (2) graphical/tangible user interfaces (GUI/TUI), and (3) natural user interfaces (NUI).

Command line interface

The command line interface is often referred to as black box because of the DOS computer systems that were invented in the late 1970s and early 1980s. A command line interface is a good representation of systems that force users to use recall memory to operate the system. This type of interaction can take a long time to learn and with an initially high error rate, but once the system is learned, the operation is extremely fast.

Graphical and tangible user interfaces

Modern computer interfaces, phones and tablets use GUI and TUI interactions. Windows and Mac operating systems visually represent the disk and file structure of the computer so that the interaction is more natural and affords a small learning curve so that even novice users can use these systems rather easily. A computer mouse and a drawing tablet are examples of TUI interactions because they are used in ways that align with our natural body movements so learning is very intuitive.

Natural user interfaces

A natural user interface is an interface that humans can interact with in a completely natural way, with no physical intervention. A good example of a natural user interface is a Google Home or Amazon Alexa device. By simply talking to the device in the same way you would speak to another person, you can complete tasks, schedule events, browse the Web, and perform many other actions.

Interaction design principles

The most important thing to remember when designing interactions is to use design principles to guide your process. Design principles are based on psychology and computer interaction studies and are proven theories that explain how to make interaction designs more intuitive.

Akendi’s seven principles of design are listed here:

• Support users’ capabilities
• Show users what they need
• Build on what users already know
• Empower users
• Save users time and effort
• Help users out of trouble
• Respond to user actions

Design Patterns

Similar to design principles, we use design patterns because they are based on research findings. Although user behaviour might deviate a little from system to system, we can use design patterns because they are proven to be consistent and predictable. Design patterns also allow us to talk to other UX designers using a common vocabulary.

Design patters are separated into the following pattern groups:

User Patterns

• Navigation (menus, breadcrumbs, tabs, etc.)
• Search (autocomplete, advanced, etc.)
• Data (tables, filters, facets, etc.)
• Input (checkboxes, buttons, ratings, etc.)

System Patterns

• Feedback (input errors, outgoing links, etc.)
• Graphical (colour coding, active vs inactive states, etc.)
• Accessibility (change contrast, enlarge text, etc.)

Context Patterns

• Site type (corporate, ecommerce, portal, etc.)
• Page type (forum, blog, product, payment, etc.)

Prototyping

Prototyping is a great exercise to test your information architecture (IA) and interaction design (ID) early in the design process. And because some people are visual learners, they may not completely understand the IA and ID until they can actually see something. The key business value of prototyping is saving money by reducing the number of redesigns—hopefully to zero.

When prototyping, remember the 80/20 rule and focus on 20% of the functionality that will be used 80% of the time. Low-fidelity and high-fidelity prototypes are equally as effective but for different reasons. For example, a low-fidelity prototype can test accurately test your IA, whereas a high-fidelity prototype can help test a user’s emotional response to branding, or the colour scheme.

As you arrive at the prototyping stage, you should think about whether you should prototype in a vertical or horizontal way (while this is mostly common for app and web page design, these principles can still be applied in many different design projects). In a horizontal methodology, your first round of prototyping would involve a little bit of all ‘pages’ such as 10% of the home page, 10% of the login page, 10% of the payment screen, etc. Then the second round could involve the next 20% of each page, and so on with numerous rounds of prototyping. With a vertical methodology you would complete 100% of the home page in the first round, 100% of the login page in the second round, and 100% of the payment screen in the third round. The following image helps show the difference between horizontal and vertical prototyping.

Wireframes

A wireframe is essentially a literal blueprint of the design. There are a wide range of wireframe fidelities, from low-fidelity (outlines of objects to mark out real estate) to high-fidelity (some visual elements such as branding, graphics, and fonts).

A wireframe should provide answers to the following questions:

• For designers: Does the concept meet our objectives?
• For the business: Does the system follow the business rules?
• For the developers: How does the system behave?
• For management: is the represented approach suitable

The image below is an example of a low to medium-fidelity wireframe for a webpage (if you are looking for more information or ideas about wireframes, this is a great place to start).

It is important that wireframes undergo usability testing and it is not uncommon to have two or three different prototypes to test. Again the main goal is test and refine so that the design that is handed off to the developers is very close to the final MVP that will be built and delivered.

So now we have a skeleton with some muscles, tissues, and organs. Now we need to add the skin with Visual Design!

Visual Design

If information architecture (IA) is the skeleton and interaction design (ID) is the muscles, then visual design is the skin, the part that you see that conveys emotions and tells stories. Through visual design elements, organizations can effectively communicate their brand message to the end-user while also enhancing the user experience in a multitude of ways such as making buttons easy to identify or having interactive graphics.

Gestalt Principles

Gestalt principles are derived from Gestalt psychology, which is a school of thought that explains how humans naturally perceive visual inputs. This is very important when designing a good user experience because if you ignore Gestalt principles, users will become confused and frustrated and eventually leave without even engaging with the tool. This is a key concept for all user groups because these principles are based on human interpretation and are not influenced by environmental, cultural, or educational factors.

For a great read (and video) on Gestalt principles, check out this link!

Visual Principles

There are a set of standard design principles that should be applied to any visual design project, whether it is a poster, website, mobile app, etc. The four main visual principles are space, colour, typography, and contrast.

Space

Space refers to how design elements are spatially arranged in a given field of view. This includes using whitespace to create cohesion or separation, and using grids for arrangement.

Whitespace doesn’t have to be white, it can be any colour. Whitespace is used to create breathing room between design elements to be more visually appealing, but it also makes information processing easier because the brain isn’t overwhelmed by multiple stimuli in close proximity with each other.

Grids used for alignment and structure improve users’ ability to scan and find content, but grids are also visually pleasing because they are balanced.

Colour

Colour is one of the most important visual principles to keep in mind when designing. Different colours have a wide range of emotional meaning attached to them and can be used to communicate an organization’s branding or strategy. Colours can even convey functional meaning (think of a blue hyperlink). But as easily as colour can add value to your designs, it can just as easily reduce their usability. You must keep accessibility requirements in mind when designing with colour, such as ensuring there is enough contrast to distinguish between elements, and acknowledging the common inability to distinguish green from red. It is very important that you don’t use colour as the only means of conveying information.

Typography

There is a lot more to typography than people usually think, which is why it can be a make-it or break-it point of your user experience design. There are about 12 different properties of type, and each has the capability of increasing and decreasing usability (for an in-depth look at type properties, click here). The most important high-level guidelines for typography are to stay on brand, be consistent, and create mood. Be aware that similar to colour, different typefaces convey different emotions. If you want users to trust your design because it is banking software, it probably isn’t a good idea to use Comic Sans.

Contrast

While too much contrast can create feelings of chaos, a good designer will use the right amount of contrast to guide the user’s eye to certain elements. Spatial contrast uses different sizes, values, shapes, and other methods to create contrast and can convey both abstract and logical meanings. For example, the image below is a very basic example of how scale and space can create the idea of movement through a process.

Whether you started with the big circle or the small circle, your eye naturally follows the chain to the other side (this is also a great example of Gestalt principles at work).

Iconography

An icon is a graphic symbol that represents an object, action, or idea. Icons can be processed by human brain at an incredible speed so they are very useful as either controls (click the icon and something happens or you are brought somewhere) or visual elements that support content.

There are four types of icons: (1) literal, (2) universal, (3) metaphoric, and (4) abstract.

Literal icons

Literal icons are easily recognizable, represent their literal meaning, and most often are represented by an actual physical object. Because they represent their literal meaning, literal icons are great for novice users since no prior learning is required to understand its meaning. The following are examples of literal icons:

Universal icons

Universal icons are generally understood around the world because of common acceptance. Although they must be learned, universal icons are still great for novice users because they are mostly considered “common digital knowledge”. The following are examples of universal icons:

Metaphoric icons

Metaphoric icons take a little more time and exposure to learn because they are normally used to represent a seemingly unrelated object. The connection between the icon and the action it represents is symbolic, which makes it more difficult for novice users and means that localization might impact learning and acceptance. The following are examples of metaphoric icons:

Abstract icons

Abstract icons can only be learned and usually represent abstract ideas such as brands. They are great for brand recognition but are also the most difficult to learn. The following are examples of abstract icons:

Conclusion

As mentioned in the introduction, this page is meant to be a very high-level overview of UX principles. There are a lot of great resources online (free and paid) and more and more community events are being held in cities everywhere. Meetup and Eventbrite are great starting places for community events, and there are even UX communities within the GoC that hold awareness events such as lunch-and-learns to help spread the UX methodology. Remember, at the end of the day you are designing for your users, not yourself, and you are designing based on research, not opinion.

Contact

If you have any questions about the above material, or simply want to chat UX over a coffee, feel free to send me an email.

[1] This model is called Service Design, where you not only consider the end-to-end customer/user experience, but also take into consideration the interaction experience of the service providers and internal business processes with the end-user. For more information on Service Design, click here.

Resources

Books

Observing the User Experience: A Practicioner's Guide to User Research
Elizabeth Goodman, Mike Kuniavsky & Andrea Moed. Published September 21, 2012 by Morgan Kaufmann

Understanding Your Users: A Practical Guide to User Requirements Methods, Tools, and Techniques
Catherine Courage & Kathy Baxter. Published January 11, 2005 by Morgan Kauffman

Measuring the User Experience
Tom Tullis & Bill Albert. Published July 17, 2012 by Morgan Kauffman

Quantifying the User Experience: Practical Statistics for User Research
Jeff Sauro & Jim Lewis. Published March 30, 2012 by Morgan Kauffman

Interviewing Users
Steve Portigal. Published May 2, 2013 by Rosenfeld Media

Usability Inspection Methods
Jakob Nielsen and Robert Mack. Published May 9, 1994 by Wiley

It's Our Research: Getting Stakeholders Buy-in for User Experience Research Projects
Tomer Sharon. Published April 2, 2012 by Morgan Kauffman

Universal Methods of Design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions
Bruce Hanington & Bella Martin. Published February 1, 2012 by Rockport Publishers

Usability Engineering
Jakob Nielson. Published October 7, 1994 by Morgan Kaufmann Publishers (first published 1993)

User Interface Design
Jenny LePeuple and Robert Scane. Published 2003 by Crucial

Cost-justifying Usability
Deborah J. Mayhew and Randolph Bias. Published 2005 by Morgan Kaufmann

Designing with the Mind in Mind
Jeff Johnson. Published May 20, 2010 by Elsevier Science & Technology

About Face 3: The Essentials of Interaction Design
Alan Cooper. Published May 7, 2007 by John Wiley & Sons (first published 2003)

The Usability Engineering Lifecyle
Deborah J. Mayhew. Published 1999 by Lifecycle

The Inmates are Running the Asylum: Why high tech products drive us crazy and how to restore the sanity
Alan Cooper. Published February 24, 2004 by Sams

The Design of Everyday Things
Donald A. Norman. Published September 19, 2002 by Basic Books (first published 1988)

Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability
Steve Krug. Published 2014 by New Riders Publishing (first published 2002)

101 design Methods: A Structured Approach for Driving Innovation in Your Organization
Vijay Kumar. Published 2013 by Wiley

The Ten Principles Behind Great Customer Experiences
Matt Watkinson. Published 2013 by Pearson

This is Service Design Thinking
Marc Stickdorn & Jacob Schneider. Published January 2013 by Wiley

Information Architecture for the World Wide Web: Designing large-Scale Web Sites, 2nd Edition
Louis Rosenfeld & Peter Morville. Published December 4, 2006 by O'Reilly  Media (first published 1998)

Ambient Findability: What we find changes who we become
Peter Morville. Published October 3, 2005 by O'Reilly Media

A Practical Guide to Information Architecture
Donna Spencer. Published 2010 by Five Simple Steps

Card Sorting
Donna Spencer. Published April 5, 2009 by Rosenfeld Media

Information Architecture: Blueprints for the Web
Christina Wodtke. Published October 16, 2002 by New Riders Publishing

Search Patterns: Design for Discovery
Peter Morville & Jeffery Callender. Published Frebruary 2, 2012 by O'Reilly Media

Information Architects Hardcover
Richard Saul Wurman. Published October 1, 1997 by Watson-Guptil

About Face 3: The Essentials of Interaction Design
Alan Cooper, Robert Reimann & David Cronin. Published May 7, 2007 by Wiley

Designing Interations
Bill Moggridge. Published October 1, 2007 by MIT Press

Designing for Interaction: Creating Smart Applications and Clever Devices
Dan Saffer. Published August 24, 2009 by New Riders

Designing for People
Henry Dreyfuss. Republished November 1, 2003 by Allworth Press

Envisioning Information
Edward R. Tufte. Published May 1990 by Graphics PR

Designing Interfaces 2nd Edition
Jenifer Tidwell. Published January 6, 2011 by O'Reilly Media

Sketching User Experiences
Bill Buxton. Published 2007 by Elsevier inc.

Prototyping
Todd Zaki Warfel. Published November 30, 2009 by Rosenfeld

Web Form Design
Luke Wroblewski. Published May, 2008 by Rosenfeld

Articles

The Design of Browsing and Berrypicking Techniques for the Online Search Interface
Marcia J. Bates. 1989. Online Review 13(5): 407-424

Blogs and wesbites

Akendi
akendi.com

Nielson Norman Group
nngroup.com