User flows are paths that your users will take to perform specific actions on your interface. It allows us to visualize the path a user takes through an application.
The userflow begins with the consumer’s entry point on the product, like an onboarding screen or homepage, and ends with the final action or outcome, like purchasing a product or signing up for an account.
Analyze the efficiency of a task
How many steps does the user have to take to complete a task?
Each piece of a flow represents something that must be designed
Even seemingly simple tasks can actually be quite complex
A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors.
Wireframes are a crucial and important component for your project. It’s an easy and fast way for crafting your design experience. By having your user persona in mind and the problem you want to solve, wireframe focus on how your interactive project work and behave. More specific, wireframe is a visualization tool for presenting the layout element inventory: the content; navigation; header & footer, etc.
Wireframes are effective because they:
Require minimal skills to create
Allow for a quick, iterative designs and modifications
Focus on how site works and reads, not “look and feel” in early stages of site development
Gets early client buy-in.
Phase 1 - Low Fidelity
Low-fidelity wireframe is a high-level concept representation of your project.They represent concepts and workflows throughout a screen layout creation.
Wireframe are the entry point for a designer to think strategy and interface. It’s the initial step for putting user goal into an visual representation.
All low fidelity wireframe should be done by paper with pens and post it. Students don’t need to have good drawing skills in order to make wireframe. Those low fidelity wireframe should not focus on the drawing aesthetic but, rather on the functionality of the project.
All drawing should be done quickly. Here some characteristic:
Easy and fast to do
Cheap
All made with papers by using pens, pencil, post it etc
They are not real screen scale, around 4 to 5 screens into one paper
Black and white only, however having a warm colour for call to action is suggested
Mid-fidelity wireframe are a significantly more detail prototype. They include multiple level of interactivity, design element, content and workflow.
One of the biggest difference is also the fact that designer should at this stage work at a real scale template level. Mid-fidelity wireframe should be done digital with a vectorial creation tool such as Figma.
Once all setup, students should focus on all design elements inside their layouts canvas such as:
Navigation
Title
Content
Hyperlink
Imagery
Slider
Bouton
etc
Fonts
Font choice is an important component of your research. As such, students should incorporate the selected fonts in their mid fidelity wireframes.
Imagery
Good mid fidelity wireframes do not include imagery. However, the designer should clearly represent inside that wireframe where imagery will be by using a visual code such as a rectangle with an “x sign” However, iconography can be tolerated and integrated.
Content
As Paul Rand mentions in the book Conversations with Students, design is the relationship between form and content. At this stage, almost all content should be integrated. This way, you can easily understand the full reality of your pages and adjust the layout accordingly.
High fidelity mocks help to clarify the visual look and feel of your digital projects. At this stage, students should execute a pixel-perfect approach on every page.
Feedback is a gift — you should think critically while you share it. Here are some guidelines to put in applications while you’re giving feedbacks to your classmates.
The clearer you are, the better your feedback will be. Always start by first clarifying the design aspect you’re referring to: the primary navigation, home page, dialog etc. Once done, mention the issue or problem you observed at this location.
Provide the problem, not the solution
As designers, it’s easy to see an opportunity to present alternative solutions when a problem is found; however, the best feedback is when they are clear, but broad enough for open discussions.
For example, instead of saying “ I think all heading text titles should be bigger with a darker black”, students should place emphasis on “The contrast and font hierarchy between title and content should be higher”. This structure narrows down the issue while it’s still open for discussion.
Stay objective
When it’s time to give feedback, it’s always important to remember that often you are not the potential audience for the project itself. By having this approach in mind, try to understand it in the context of the intended audience.
For example, instead of commenting “I don’t like this”, try to formulate clearer feedback by saying “This might be difficult for your users to understand."
Well established in the industry, a heuristic evaluation is a inspection method for computer software that helps to identify usability problems in the user interface design.
According to Nielsen Norman group Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics”).
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
#2: Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
#3: User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing
#5: Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
#6: Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
#7: Flexibility and efficiency of use
Unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
#8: Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
#9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
#10: Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Crazy 8’s is a fast-paced technique to generate design solutions.Inspired from Google Sprint technique, under a time-based approach, each participant draws a high-level representation of eight different ideas for the problem to clarify as a team. The goal is to go fast. It’s not about the details, but rather about the idea.
Before starting to sketch, each participant needs to understand what they need to focus on.
In class, each student will have 5 minutes to explain their business problem in front of the class. Since the slides will be projected during the presentation, it is primordial that the above-mentioned research is completed before the first in-site class.
Part 2 Sketching
Set the timer for eight minutes.
After each presentation, all other students will have 8 minutes to sketch potential design solutions to solve their classmate’s problems.
You can use Google timer for time reference.
[Part 2 Sketching] Example
Part 3 Sharing
Remember, at this stage, no sketch or idea is bad or wrong.
Each participants will share ideas.
Preference tests
The preference test or A/B testing or methodology gives designers feedback between two solutions with various variables. Specifically, this technique forces designers to create design variations for a specific page or experience.
Goal & Hypothesis
For good research structure it’s important to define the testing goal and hypothesis. For each preference test make sure to clarify exactly what you want to emphasize and highlight.
Examples
I want to ensure the save button is visible right away for everyone
I want to properly highlight error messages at the bottom of the screen
I want to increase the visibility of comments inside a specific thread
Design variations
For each hypothesis/goal definition, the designer should create a minimum of two clear, strong (mocks) variation choices. These two choices should be clearly distinguished by:
Spacing
Colour
Font size
Content
Hiearchy
Image choice
Animation
Procedure
Before asking people for opinions and preferences, it’s important to prepare proper variations with a clear and simple presentation layout. This layout should include:
Clear goal statement
Display inline both variations in their context without any superficial information
Allow spaces for voting and people’s comments around design choices
At a glance, writing usability test scenarios sound easy to do. However, after deeper reflection and investigation, it’s obvious the investigator must have a plan. Here is a light but strong usability testing playbook for a successful usability testing execution.
Context
This small playbook focuses on the tasks driven validation from a prototype. Especially, this phase wants to validate assumptions around general flow, information hierarchy, clarify visual assets, and positioning.
#1 Define Usability Goal
It’s important to have a good, in-depth interactive prototype. Various end-to-end tasks and goals should be well designed and integrated. Second, before the test, you should narrow down a few key core components you want to test such as:
Account creation
Onboarding
Create, edit, delete, and complete an entry
Search and filtering information
Etc
#2 Usability Scripts
A script is a text which includes questions as a request for participants to execute in the prototype. Here is a text example for a morning alarm mobile app:
In this prototype, you will test and evaluate an alarm mobile application. Specifically, you will evaluate specific tasks such as setting a time alarm, snooze, and rescheduling an existing time. Reminder, no answer or test is wrong or bad. We are not evaluating you, but rather the prototype. At any time, you can leave the prototype.
#3 Step-by-step testing scenario:
Alarm setup
From this page, select a new alarm configuration
Great, now adjust the time for 7:00 a.m.
From this same page, change the ringing song type
Congratulations! Task 1 is done
Once all of the tasks are done, make sure to add an extra box for information.
Awesome! You achieved the alarm setup. Do you have any general feedback about the configuration itself? Are there any particular elements that were confusing?
Micro Animation is a key core component of any good user experience. According to Material design from Google, UI Animations break down into three principles.
Informative
Informative animation allows users to get informed on relationships between elements, actions, availability, and outcomes.
Examples
Horizontal and vertical scroll
Page transition between element or sections
Focused
Focused animation allows the user to get a visual indicator of what’s currently happening on the page without creating unnecessary distraction.
Examples
Visual indicator of someone typing in an input text field
User waiting for task confirmation due to a processing loading delay
Small icon animation while an action is currently happening such as a phone pictogram moving to represent a phone call
Celebrating
Celebrating animations allows the user to get a visual indicator of achievement moments in their user journey. This approach adds character and specific project flavours.
Specifically. it's where all your design elements are cataloged.As a designer, you either interact with a style guide for understanding the current visual language of an existing project or you are part of creating the style guide while you build the design experience for a new project.
What should we put inside a design style guide?
Colours with hex code
Typography information such as name, size and example in practice
All icons and logo used in your design
All design assets used such as buttons, drop down, hyperlink text, navigation elements etc
What a design style guide is not...
A lot of people and designers think a style guide as a moodboard experience which is definitely not the same thing. Style guide is also not just a space with screen shots and imagery of your digital interface experience. It must include editable assets from your design.
Is a design style guide a design system?
While both concepts overlap together, the design style guide and design system are not the same.
The graph previously illustrates well how a style guide is a part of the design system. Specifically, your style guide focuses much more on hands on artefact.Rather, the design system focuses on the big picture at scale for other disciplines involved in design (Engineers, product manager, etc).
