Human Centered Design: 1. 1. Inspiration 2. 2. Ideation 3. 3. Implementation ——————————————————————— UX Process : VISUAL 1. 1. Research :

IA Comes Before UX (information architecture- how information is organized. You can think of information architecture as a map. That map will be used by both the people who use the app and the app itself, along with its creators.)

2. 2. Take findings > Ideate 3. 3. Prototyping 4. 4. Iteration 5. 5. Visual Design ———————————————————————

PORTFOLIO: Your first UX designer portfolio should tell a story about the what, the how, and the why. The what is the problem you solved for each project. The how is your approach to solving that problem. The why is your reasoning for the path you took to solving it.

3-4 pieces for portfolio Name in view (CSS : sticky) Rollover with Description Description of Company / Role Problem Process Solution Visuals ——————————————————————— QUESTIONS TO ASK AT INTERVIEW: 1. 1. What is your UX process? 2. 2. What’s your role in comparison to the other disciplines? 3. 3. Whats the team like? ——————————————————————— Agile Method: The Agile Method is a particular approach to project management that is utilized in software development. This method assists teams in responding to the unpredictability of constructing software. It

uses incremental, iterative work sequences that are commonly known as sprints. The Agile Method Defined: A sprint is a period of time allocated for a particular phase of a project. Sprints are considered to be complete when the time period expires. There may be disagreements among the members of the team as to whether or not the development is satisfactory; however, there will be no more work on that particular phase of the project. The remaining phases of the project will continue to develop within their respective time frames. Lean UX ——————————————————————— UX Testing with Screener Questions: screener questions—multiple-choice questions that can either eliminate users from taking part in your study or give them access to it. Many of the guidelines for writing good screener questions are the same as the guidelines for writing great Multiple Choice questions:

• • Always provide a “None of the above”, “I don’t know” or “Other” option just in case you’ve forgotten to include an answer that applies to the user or the user is confused by the question. This is especially i mportant to include in screeners, because if users don’t have this option and pick an answer at random, they might end up in your study accidentally.

• • Provide clear and distinct answers that don’t overlap each other so that (for example) a size 6 doesn’t have to decide if they want to be grouped with the 0-6 sizes, or the 6-12 sizes.

• • Avoid asking leading questions or yes/no questions because users will be inclined to give you the answer they think you want instead of the one that really applies to them. We find that instead of asking direct questions, instructing users to select the option that most closely applies to them, followed by a list of statements, is the most neutral way to phrase most screeners. This method ensures that users will answer honestly because it’s less obvious what answer is desired.

Examples • • Screeners based on familiarity with a product

• • Screeners based on frequency of use

• • Screeners based on industry or occupation

• • Screeners that deal with personal information

always perform a dry run, in part to ensure that your screeners are effective!

The Benefits Of Research Planning

Very generally speaking, UX research can answer two types of questions:

1. What’s useful? What do people need? Who is the target audience? 2. What’s usable? Does the design work for people, and how it can be improved? Dozens of research methodologies could be implemented to answer these and more specific questions, and it is up to designers, researchers and their teams to decide what works best for them and when is the right time to answer their questions.

Here are the benefits of planning UX research:

• Get a better feel of stakeholders.. A written plan helps you identify what works and doesn’t work for people,

and what questions they are trying to answer. • Engage stakeholders.. A study plan ensures they are properly involved with the study and its results. If there’s

no written plan, then there’s a greater chance that stakeholders won’t feel engaged. • Writing things down helps you.. When you put things in writing, they look very different than how you

imagined them when they were just thoughts in your head. Always have a written study plan, even if you don’t share it with anyone else.

Now, let’s quickly identify the target audience for the research planning document.

Who Are You Planning For? Who Are The Stakeholders?

As with every product or service, the best offering comes from carefully identifying the target audience, their needs and their wants. Different UX research stakeholders are interested in different aspects of a research plan:

• Product managers and software engineers are mostly interested in the study’s goal, research questions and schedule. In some cases, they are also interested in the criteria for participants. These stakeholders are usually interested in goals and questions because these determine the content of the study and its focus. They are interested in the schedule to make sure it enables them to make timely design, business and development decisions. Criteria for participants interest them when the product targets a very specific demographic and they want to make sure participants are representative of that demographic.

• Managers and executives are probably interested in the study’s goal and the overall cost of the study, because they are likely sponsoring the study. Usually, their bandwidth does not allow them more than that.

• You! The plan is mostly for you. As soon as you put your thoughts in writing, something happens, and you find holes in them. These holes help you improve the plan. A written plan also helps you focus and better prepare for the study. The fact of the matter is that if you can’t boil your plan down to a page, you probably don’t really understand it.

Now that we’ve discussed why a planning document is important and who it is for, let’s get to the nitty gritty of the document.

The Plan That Stakeholders Love: The One-Pager

The users of a research plan love brevity and appreciate succinct definitions of what will happen, why, when and with whom. Here are the sections that go in a one-page research plan:

• Title. The title should combine the thing you’re studying and the methodology; for example, “Monster.com field study” or “XYZ Phone data-entry usability test.” Sometimes mentioning the target audience of the study is also appropriate; for example, “Whitehouse.com news page interviews with senior citizens.”

• Author and stakeholders. State your full name, title and email address on one line. After you get the stakeholders’ buy-in for the plan, add their details as well — the research belongs to everyone now.

• Date. Update it whenever the plan is updated. • Background. Describe what led to this study. Discuss the recent history of the project. Be brief, no more than

five lines. • Goals. Briefly state the high-level reason (or reasons) for conducting this study. Try to phrase it in one sentence.

If that wouldn’t make sense, create a numbered list of very short goal statements. If you have more than three to four goals, you are either aiming too high (meaning you have too many goals) or repeating yourself.

• Research questions. These are the specifics, the core of your plan. Provide a numbered list of questions that you plan to answer during the study. It is extremely important that your stakeholders understand that you will not necessarily be asking the study participants these questions. As a rule of thumb, have no more than seven to ten questions, preferably around five. Later on, you will construct your study script to answer these questions. An effective way to think about research questions is to imagine that they are the headings in the study’s summary.

• Methodology. In an academic environment, this section has one primary goal: to provide as many details as other researchers need in order to repeat the exact same study. In practice, the goal of the methodology section is to briefly inform the stakeholders of what will happen, for how long and where.

• Participants. Provide a list of the primary characteristics of the people you will be recruiting to participate in the study. Have a good reason for each and every characteristic. If you have two participant groups, describe both groups’ characteristics in lists or in a table. Append a draft form that you’ll use to screen participants.

• Schedule. Inform stakeholders of at least three important dates: when recruiting starts, when the study will take place, and when they can expect results. Large research projects require more scheduling details. For example, if the study involves travel to another city or country, more dates might be required for on-site preparation and meetings or for analysis workshops.

• Script placeholder. When a full study script is ready, it will appear under this title. Until then, all you need is a heading with a “TBD” indication.

———————————————————————

A Sample UX Research Plan:

XYZ Phone Data-Entry Usability Test by John Smith-Kline, Usability Researcher, jskline@example.com Stakeholders: Wanda Verdi (PM), Sam Crouch (Lead Engineer) Last updated: 13 January 2012 Background Since January 2009, when the XYZ Phone was introduced to the world, particularly after its market release, journalists, bloggers, industry experts, other stakeholders and customers have privately and publicly expressed negative opinions about the XYZ Phone’s keyboard. These views suggest that the keyboard is hard to use and that it imposes a poor experience on customers. Some have claimed this as the main reason why the XYZ Phone will not succeed among business users. Over the years, several improvements have been made to data entry (such as using horizontal keyboards for most features), to no avail. Goals Identify the strengths and weaknesses of data entry on the XYZ Phone, and provide opportunities for improvement. Research Questions 1. How do people enter data on the XYZ Phone? 2. What is the learning curve of new XYZ Phone users when they enter data? 3. What are the most common errors users make when entering data? Methodology A usability study will be held in our lab with 20 participants. Each participant session will last 60 minutes and will include a short briefing, an interview, a task performance with an XYZ Phone and a debriefing. Among the tasks: enter an email subject heading, compose a long email, check news updates on CNN’s website, create a calendar event and more. Participants These are the primary characteristics of the study’s participants: • Business user, • Age 22 to 55, • Never used an XYZ Phone, • Expressed interest in learning more about or purchasing an XYZ Phone, • Uses the Web at least 10 hours a week. [Link to a draft screener] Schedule • Recruiting: begins on November 12 • Study day: November 22 • Results delivery: December 2 Script TBD ———————————————————————

A short plan that you and your stakeholders prepare together is key to a successful start of a UX research project.

• Boil down your collective knowledge, agreements and understanding of what will happen, why, with whom and when. • Set the right expectations among stakeholders. • Try to keep the plan to one page. • Secure buy-in for the UX research by making it a team effort. • The core of the plan is the list of questions you are trying to answer. Choose the right ones.

What to Include in a Single Page User Research Plan?

With only a single page; there’s no room for fluff. Leave the academic writing skills in the classroom and stick to

plain English. Here’s what you need to make this work:

• A title – it should be obvious but over the years we’ve come to realize it isn’t always. Labelling a document makes it easier for someone to know what it’s about.

• Authorship details – if people have feedback on the plan; who should they give it to? • Stakeholder details – who else is the plan being shared with? This helps stakeholders identify other relevant

parties (if you’ve omitted anyone). • The date – this should also include any revision dates. People want to be certain they’re working with the latest

version of a document. • Document control – if your company uses a document control system; it’s a good idea to follow it in your titles,

filing, etc. • An introduction – this is your background. A quick paragraph on why the research is needed and any history

that is relevant. • Objectives – what are you trying to achieve? One short statement. Research is best when it tries to satisfy a

single objective; if you have dozens of objectives – you’re over-reaching and you need to plan again. • The questions to be asked – another short list. You can’t get the answers to hundreds of questions from any

piece of research; 3-5 is probably best but no more than ten. • The methods to be used – what will you do, where will you do it and how long do you need. • The people involved – it’s always a good idea to define the users you will do your research with. Use broad

brush strokes and keep detail to a minimum. • The time needed –it’s always a good idea to keep people informed as to when they will see results from a plan.

If a project is a long one; you might want to include some preliminary milestones so that people can check on progress as well as a final reporting date.

• Where supporting information can be found – if there’s any other data that might be relevant; you can signpost it. This can include both previous studies, results, etc. and the suggested scripts that you use in the research.

• ——————————————————————————————————————

Quantitative vs. qualitative research These two methods define the type of data that's being collected, whether it's qualitative, a subjective belief, or quantitative, an objective measurement. Quantitative research measures quantifiable things: measurements, quantities, and variables. Quantitative data supports your design decisions and helps answer early questions. Now, let's consider qualitative research. This information is subjective. It's based on the opinion and belief of the person being asked. So, why would we bother with qualitative research? Opinions and beliefs do something that quantitative data cannot; they begin to explain why. In best practice, both quantitative and qualitative research are used together to support each other's findings. A quantitative piece of data should frame the idea, then a series of subjective, qualitative observations may begin to provide insight, or explanation behind it. Research Method – a structured process of collecting data. Secondary Research – reviewing and summarizing existing research (Tool: books, articles, library, video, etc..). Primary Research – research collected directly from participants. (Tool: Interviews) Quantitative Research – an output of research that results in something measurable, such as a quantity, statistic, or numerical information. Objective Data – research information that is difficult to argue against. Qualitative Research – an output of research that results in something subjective, such as beliefs and opinions. (Tool: Survey) Subjective Data – research information that is collected through interviews and includes feelings, perceptions and concerns. (Tool: Interviews, Ethnography) Generative Research – research that is conducted during the early stages of a project. It may also be called formative research. Evaluative Research – research that is conducted in the later phases of a project, validating research by testing potential solutions. It may also be called summative research.

Market Research – research that studies human behavior toward a market-based economy, focused on understanding how humans connect to goods, services, and experiences. Iterative Design – the process of testing and refining repeatedly until a successful solution has been discovered. Competitive Analysis – a market research strategy used to evaluate the strengths and weaknesses of an rganization’s competition. Media Scanning – reviewing materials written and produced by competing organizations. Observational Note Taking – involves a researcher watching and recording human behavior unnoticed. Helpful during initial research. Can discover unknown issues. Photo Ethnography – recruiting research participants to document an aspect of their life with photography. Helpful during initial research. —————————————————— Surveys are administered by a researcher asking the questions verbally. Through either the telephone or in person. Questionnaires asked a series of open-ended and closed-ended questions in a specific order to the sample audience. The effectiveness of the questionnaire relies heavily on the quality of the question it asks. Online survey makers: SurveyMonkey and Qualtrics —————————————————— CREATING A DESIGN RESEARCH PLAN Research Process Overview

• Problem • Objectives • Actions • Results

—————————————————— KWHL Table: What do you already know, What do I need to find out, How will I learn it, What did I (or hope to) learn? * GREAT WAY TO ORGANIZE AND PLAN RESEARCH ——————————————————

Define info problem

Identify info needed

Determine all possible sources

Select the best sources

Locate sources

Find information with sources

Engage (ACTION): read, hear, view, touch

Extract relevant info

Organize from

multiple sources.

Present the

Info.

Judge the product & process

Commented [1]:

RESEARCH LOGIC MODEL

1 SECONDARY RESEARCH

Purpose

Actions

Outcomes

2 ETHNOGRAPHIC RESEARCH : Observation

Purpose

Actions

Outcomes

3 INTERVIEWS

Purpose Find out experience from the user’s point of view

Actions Speak with people

Outcomes Have more empathy

Making the leap from researching to design: Brainstorming Ground Rules Visualize : Sketch and map out ideas, don’t get caught up in details. There’s no bad idea: Get all your ideas out Embrace getting stuck: Take a break

Use low cost materials • Quick construction

Plan for multiple revisions (iterations)

An empathy map is a collaborative tool teams can use to gain a deeper insight into their customers.

How Would I Use an Empathy Map? A sample empathy mapping session may be as follows: Assemble your team and have them bring any personas, data, or insights about the target of your empathy map. Print out or sketch the empathy map template on a large piece of paper or whiteboard. Hand each team member sticky notes and a marker. Each person should write down their thoughts on stickies. Ideally everyone would add at least one sticky to every section. You might ask questions, such as:

• What would the user be thinking & feeling? What are some of their worries and aspirations?

• What would their friends, colleagues, and boss be likely to say while the user is using our product? What would the user hear in these scenarios?

• What would the user see while using our product in their environment?

• What might the user be saying and/or doing while using our product? How would that change in a public or private setting?

• What are some of the user’s pain points or fears when using our product?

• What gains might the user experience when using our product?

Empathy maps can be used whenever you find a need to immerse yourself in a user’s environment. They can be helpful, for example, when:

– diving into the customer segments of a business model canvas – elaborating on user personas

– capturing behaviors when pair interviewing a customer – building out the “user” in your user story

Personas: Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users’ needs, experiences, behaviors and goals. Creating personas can help you step out of yourself. It can help you to recognize that different people have different needs and expectations, and it can also help you to identify with the user you’re designing for. Personas make the design task at hand less complex, they guide your ideation processes, and they can help you to achieve the goal of creating a good user experience for your target user group. How Are Personas Created? Personas can be created in a myriad of ways, but designers are recommended to follow this general formula:

• Interview and/or observe an adequate number of people. • Find patterns in the interviewees’ responses and actions, and use those to group

similar people together. • Create archetypical models of those groups, based on the patterns found. • Drawing from that understanding of users and the model of that • understanding, create user-centered designs. • Share those models with other team members and stakeholders.

What Are Personas Used For?

• Build empathy. • Develop focus. • Communicate and form consensus. • Make and defend decisions. • Measure effectiveness.

Scenario & Storyboards

A scenario is basically a story about someone (usually your users) using whatever is being designed to carry out a specific task or goal. Scenarios are typically used to provide a picture of the intended user experience (i.e. what ideally should happen), but can equally outline what currently happens. Before you can create scenarios, you need to know who you're building for, what those people's issues are, and how you can come up with solutions.

Guide to carrying out scenario mapping: 1. Find a good room or area that you can use for 2-3 hours (for each session) 2. Send out your scenario mapping invites

3. Grab as many different colored post-it notes as you can 4. Grab a roll of brown packing paper and some blu tack for transporting it 5. Introduce the scenario mapping session 6. Start mapping your first scenario (Take one of your primary users (for which you’ll hopefully have a persona) and the key, or one of the key tasks that they will be undertaking.) 7. Outline some context for the scenario 8. Walk through the steps the user would take 9. Stick your post-it notes for the step on the wall 10. Repeat for the next step until the user has completed their task 11. Repeat steps 7-10 until you’ve mapped out all the key user tasks 12. Take photos of your scenario maps 13. Get feedback MOODBOARD: A moodboard is any physical or digital presentation that visually captures the mood or feel of a particular assignment or task that can help a designer make aesthetic and goal-related choices before the project begins. EXAMPLES:

MOBILE

Why Hidden Navigation Is Less Effective Why does hidden navigation have these effects? Throughout the article, we hinted at several answers:

1. Low salience: A small icon is harder to notice on a large screen size (and even on a smaller mobile one). 2. Low information scent: The menu icon or label doesn’t usually tell people what’s inside it, so they have no

idea if they’ll find what they need by clicking on it. 3. Extra work: To figure out what’s inside the menu, people must expand it. That increases the interaction

cost for users and makes them less likely to do it, or, if they do it, they may take longer. 4. Lack of standards: Hidden navigation is implemented in different ways by different sites. Some sites use it,

some don’t. On mobile, patterns are starting to form, but on desktop there is a lot of variability and inconsistency in the placement and the labeling of hidden navigation.

5. Low familiarity: Especially on desktops, hiding navigation is not a common pattern and people may not expect to find global navigation under an expandable menu. Some people may also still be unfamiliar with the hamburger icon that is frequently used for such menus. This low familiarity is exacerbated by the lack of

standards which reduce long-term learnability (as further discussed in our course on The Human Mind and Usability, learning is facilitated by repeated exposure to the same pattern.)

Hamburger menu alternatives for mobile navigation 1. Tabs 2. Tabs with a ‘more’ option

3. Progressively collapsing menu 4. Scrollable navigation 5. Dropdown menus

6. The hamburger menu might be a good choice

Lean UX According to this excellent O'Reilly article, the core principles behind Lean UX are maximizing value and minimizing waste in software design. The Lean UX cycle can be expressed as think-make-check, similar to the Lean Startup method’s build-measure-learn feedback loop. MVP (Minimum Viable Product) = Earliest Testable Product Do some up-front analysis, discover as much as you can before starting development. But don’t spend too much time on it and don’t trust the analysis too much – start prototyping and releasing instead, that’s when the real learning happens. The iterative approach is really a way of delivering less, or finding the simplest and cheapest way to solve the customer’s problem. The MVP process follows four steps:

1. Find a problem worth solving. 2. Determine the smallest possible solution (MVP). 3. Build and test the MVP at small scale (show its unique value). 4. Engage and excite early adopters (also known as earlyvangelists).

Make sure the MVP always communicates the value of the product

USER STORIES: A user story represents a small piece of business value that a team can deliver in an iteration. While traditional requirements (like use cases) try to be as detailed as possible, a user story is defined incrementally, in three stages:

• The brief description of the need

• The conversations that happen during backlog refinement and iteration planning to solidify the details

• The tests that confirm the story's satisfactory completion How detailed should a User Story be?

• A team member can view the iteration's stories and their status with main fields. • A team member can view the current burndown chart on the status page, and can click it

for a larger view. • A team member can view or hide the tasks under the stories. • A team member can edit a task from the iteration status page.

User stories keep products user focused. User stories promote cooperation between team members. User stories help prevent feature creep and design dead-ends. How to use User Stories as UX documentation:

Independent We want to be able to develop in any sequence.

Negotiable Avoid too much detail; keep them flexible so the team can adjust how much of the story to implement.

Valuable Users or customers get some value from the story.

Estimatable The team must be able to use them for planning.

Small Large stories are harder to estimate and plan. By the time of iteration planning, the story should be able to be designed, coded, and tested within the iteration.

Testable Document acceptance criteria, or the definition of done for the story, which lead to test cases.

Well-formed stories will meet the criteria of Bill Wake's INVEST acronym: Here are a few things to remember when trying user stories on a UI design:

• Identify a full set of user stories before doing any visual design. Resisting the temptation to jump straight into designing may save time and headaches and lots of wasted effort.

• For each user story, see if it can be broken down into smaller, more specific stories. “Epics” are fine for a high-level overview of the needed features, but don’t leave things too broad. Drill down to the specifics early on, and solve usability problems at the outset.

• Never put a design element in an interface that doesn’t have a corresponding user story. Documenting the what and why of each element promotes organization and makes the handoff to the development team much smoother.

---------------------------------------------------------------------------------------------- Content Strategy: The Art of Clear Communication Content strategy is about bringing the right content to the right person at the right time, in the right context, and making sure it's accurate, up-to-date, and appropriate through ongoing engagement.

Content strategy overlaps into these other disciplines

Use personas and empathy maps (Users goals and motivation)

Does the content meet the project goals? Is a content and useful and created for the audience? Is it clear and concise and is it consistent in speaking with one voice? Is the content supported? Scenarios and activity flows: The purpose is to establish when the audience access the content, why they are there and what they want to accomplish and how to get them through the experience in the most effective way possible.

Example of an activity flow chart:

Information architecture: Information architecture is the structural design of shared information environments, the art and science of organizing and labeling websites, intranets, online communities, and software to support usability and findability. They typically contain user flows, content audit, and content models Questions: How do we structure content for easy access and understanding? What is the nature of each piece of content? How do we accommodate each piece of content? What is the next thing the audience will look for or need?

Workflows: Who is creating,editing, approving, adding, publishing and managing content. How and where is content added? Example of workflow chart:

Making sense of information architecture: 1. Language matters: context is different for each person 2. There is no one right way to organize something. Goal matters. 3. We need pictures: show alternative ways of gathering information. Visualize

something hard to explain. Be careful of reductionism. Show the process, not just results.

Card sorting: Card sorting is a technique in user experience design in which a person tests a group of subject experts or users to generate a dendrogram (category tree) or folksonomy. It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths. Card sorting uses a relatively low-tech approach. The person conducting the test (usability analyst, user experience designer, etc.) first identifies key concepts and writes them on index cards or Post-it notes. Test subjects, individually or sometimes as a group, then arrange the cards to represent how they see the structure and relationships of the information.[1] Groups can be organized as collaborative groups (focus groups) or as repeated individual sorts. The literature discusses appropriate numbers of users needed to produce trustworthy results.[2]

Participants sort cards into groups while you observe. Each index card has a task that people can perform on your site.

• Things already there • Things wanted • Actions people can perform

1. What are the key tasks people will want to perform on the site (I.e. activities to perform, info to find, help, products, services)

Tasks should be realistic and specific. Should be user specific. Represents all areas of site. Find users that will use your product.

• Start with one on one with participants. Watch the groupings. • Later, add more people, make them feel comfortable • Do a run through, think out loud, alternative arrangements • Look for overall patterns • Look for groups difficult to create • Record the number of cards in each group

After each participant has completed the card sort exercise, you'll need to record the groupings they used in a spreadsheet. Use the participant name as the identifier, then the name they gave to the first group, followed by the reference numbers from the

card they put in that group. Repeat this down the page for each group in turn. If some of your participants created hierarchies of groups. You can check that you entered the data correctly by doing the sum of the column. The sum of the numbers in the column should be the same as the sum of all the numbers from one to the number of cards you have. The formula is really simple, number of cards multiplied by number of cards plus one. Divided by two. So if you had 30 cards, it would be 30 times 31 divided by two. After you've run all of your participants, you'll end up with a spreadsheet full of group names, each name containing a set of card reference numbers. This is the data that you'll need for your analysis.

Reverse Card Sorting Reverse card sorting (also called inverse card sorting, reverse lookup, or tree testing) is a variation on closed card sorting where you place cards representing content, tasks, or navigation items onto a predetermined hierarchy (or other type of structure) and then assess how often users placed the cards into the “right” categories on the hierarchy. Participants are asked to place the cards at the correct level of the hierarchy. The primary metric for this method is the mean percentage of cards that are sorted into the correct location on the hierarchy. This method can be used to validate changes to Web site navigation, hierarchical menus, or other task structures.

Wireframing: Wireframes allow you to map out the functionality of the pages, catch problems early, and save time on revisions later. Mapping out the functionality early will reduce the amount of back and forth that often comes with the development phase. Wireframing allows you the opportunity to get to know your client better. You will start seeing patterns in behaviors and motivations the more time you spend with your client.it helps them focus better as well. Wireframing is a great tool for gathering feedback and figuring out flaws early. Wireframes are a great way to prioritize content by helping reveal space constraints and designing the hierarchy of elements on the page. Having the opportunity early on to to visualize the hierarchy of your pages and begin visually displaying the space constraints will save you a lot of time later when you begin stylizing the pages and filling them with content . Structure – How will the pieces of this site be put together? • Content – What will be displayed on the site?

• Informational hierarchy – How is this information organized and displayed? • Functionality – How will this interface work? • Behavior – How does it interact with the user? And how does it behave? Annotated Wireframes are great for adding a broad range of details to any basic wireframe without cluttering it or risking scope creep – or missing the point com- pletely. For example, although wireframes are the quickest and easiest way to spe- cifying interaction, annotations are often necessary to communicates what happens when certain actions are triggered. Some examples of detail you can include: • Functionality: clicks, taps, swipes, zoom, pop-ups, data inputs and outputs, etc. • Content: text, fonts, layout, sizing, linking, graphics, multimedia, dimensions, resolution, etc. • Behavior: animation styles, speed, and positioning, interactions, link destinations, etc. • Key constraints: hardware, software, browser, data, etc. — — — — — — — — — — — — —

Visual Design in UX With the understanding that there is no one “perfectly beautiful” aesthetic, we can now delve into the role of visual design in UX. After all, it’s far more than merely making things pretty. Usability.gov defines visual design as “strategically implementing images, colors, fonts, and other elements,” in order to enhance a design or interaction, and engage users. Visual design differs from interaction design. Interaction design focuses on the functionality needed to accomplish a task. Visual design engages users by drawing the eye to the correct functionality, prioritizing tasks on a page through size, color, and the use of whitespace, and even increasing brand trust through the use of visual cues. Two main takeaways: First, don’t rely on visual design alone to save a bad experience. The most attractive visuals won’t fix features or functionality that is wrong for the user or poorly constructed. Second, don’t ignore visual design! We all have competition, and visual design can be the strategic differentiator that encourages users to value one application over another equally usable one. RULES:

• Stay consistent • Test visual concepts as well as paper prototypes • Don’t get distracted by trends

Visual Hierarchy Hierarchy Principles:

• Size — Larger elements will dominate and catch eyes first. • Color — Bright colors catch eyes ahead of muted, drab ones. • Contrast — Stark differences between elements draw eyes to the brighter one.

• Alignment — Users expect to find certain elements in the same place. • Repetition — A repeated quality (e.g.,colored parts of text) draws the user’s eye. • Proximity — Putting related elements (e.g., header with associated text) close together means

these are related. • Whitespace — Including whitespace around elements singles them out as separate groups of

information. • Texture and Style — Using distinct textures/styles (e.g., chunky, military-style buttons) draws

the eye while setting the theme. Hierarchy Patterns: (In Western world)

• Z pattern o The user sees the “text-lite” page and scans from the top left to top right, then glances

down through the content (following a diagonal) to the bottom left, before moving to the bottom right.

o You can make use of this pattern by ensuring that you include the most important information along the Z pattern this eye movement follows. You’ll have four points joined by three lines going in a Z-shape.

• F pattern o With the F pattern, users begin by scanning left to right along the top, but then scan

down the left side of the page, looking for visual clues to the information they seek.

COLOR THEORY: HUE (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); VALUE (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue).

The basic, twelve-spoke color wheel is an important tool in creating color schemes. MONOCHROMATIC Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. ANALOGOUS Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Traditionally, analogous color schemes all have the same chroma level, but by using tones, shades, and tints.

COMPLEMENTARY Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades.

SPLIT COMPLEMENTARY The split-complementary color scheme is a variation of the complementary color scheme. In addition to the base color, it uses the two colors adjacent to its complement.

TRIADIC Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel.

DOUBLE-COMPLEMENTARY (TETRADIC) The rectangle or tetradic color scheme uses four colors arranged into two complementary pairs. This rich color scheme offers plenty of possibilities for variation.

— — — — — — — — — — — —

TYPOGRAPHY Type on the web has many roles: it is an interface, a brand, sets tone, and directs the user. Typography has many roles and can either add or take away from User Experience.

It’s really tied to legibility.i

STYLE GUIDES: Style guides promote consistency, establish a shared vocabulary, make testing easier, and lay a future-friendly foundation.

Check out Pattern Lab Style Tiles A List Apart - A style guide tutorial — — — — — — — — — — — — — — — — — — — — -

Usability testing sessions: inexpensive, highly actionable data, whole team insights, many users center product improvements. Find out if you were meeting users needs Behavioral data Cheap, fast, actionable insights Same-day turn-around SMALL SAMPLE SIZES OF 5 ARE OK (get participants who you think would be perfect to use your product and observe their tasks. After they’re done asked them an interview how they liked interacting with the product.) Analyze the observations for insights. Usability testing is a super flexible technique that allows for the assessment of a variety of aspects of an interface including the broad product concept, interaction design, visual design, content, labels, calls-to-action, search and information architecture. It is a proven technique for evaluating products, and in some organizations is used as a pre-launch requirement. URUT (unmoderated remote usability test) is a technique that can offer quick, inexpensive and robust usability testing. There are two broad methods for URUT with varying ways for collecting participant behaviour and these are dictated by the technology platforms: URUT utilizing video recordings of participants interacting with interfaces. These studies are more qualitative in nature with participants thinking aloud during the recording to provide insight.

URUT where the behavior is captured via click-stream data and is run more like a survey. Of particular value can be the ability to use the technique for benchmarking and context-sensitive studies. It is a great tool to have in your bag of research techniques and can be a great compliment to in-person methods. Exploring the different tools on offer and experimenting with the technique is the best way to learn and develop expertise. Make it clear what is expected of participants, keep your research objectives in mind, and avoid bias. Tools: Tools that support video recordings of participants include: Open Hallway Usertesting.com TryMyUI What users do Tools that track click stream data include: Usability Tools Loop11 Conducting your own Usability Tests Watching Rep users using your product to gain feedback and issues with the product You get real life feedback 3 things to focus on: Participants Tasks Environment Do a small study 1st, then larger later Use social media or Craigslist to recruit qualified participants ATTRIBUTES OF PARTICIPANTS: Age range, Gender, experience levels QUESTION ON QUALIFICATIONS: 1. Which of the following describes how much time you spend online each day? • Less than ___ mins. • ___ to ___ mins. • ___ to ___ mins. • ___ to ___ hrs. • More than ___ hrs. 2. How frequently do _____? • Less than ___ mins. • ___ to ___ mins. • ___ to ___ mins. • ___ to ___ hrs.

• More than ___ hrs. You'll need to call people to go through the screener, send them confirmation details, and then call them back again the day before they're due to show up so that you can reconfirm that they'll attend. ASKING THE RIGHT QUESTIONS: • Give people specific tasks to perform • Try avoiding general questions • Avoid leading questions METRICS: Efficiency Effectiveness Satisfaction A big benefit of usability studies is that, as well as quantitative data, which is percentages, proportions, and other hard numbers, these studies also provide lots of qualitative data, that is,

participant's words, actions, and attitudes. Different question-types need different types of tasks, some exploratory and some directed. After a usability session you are likely to have a couple of questions for the participant. Some of your questions may be to do with what the participant said or did during the session. Others may be about how the participant does this task in their daily life. You may also want to ask questions about the participant's satisfaction with the task they performed . These are all things that you obviously can't create tasks for. Instead, the questions are more interview style. However, it's important that your questions stay behavioral. Once we understand what questions we have, we need to turn those into tasks that participants can perform for us. This type of task is called an exploratory task. Directed task – Best done after they’re familiar with it Impression Task - Best done before they’re familiar with it TEST PLAN:

The main parts of the test plan are: a description of your participant profile; a link to the screen used to recruit participants; who will be doing the recruiting; how participants will be rewarded; the research questions you want to answer; a link to the task list you'll use to answer those questions; a link to your post session question list; where the test will take place; how the room will be set up; what equipment will be used to show the product to participants, a link to the test schedule; when the sessions will take place; and when the team will meet to discuss the findings. Make participant feel that they’re not being evaluated. They aren’t. Try doing a dry run 1st. Use a script. Be humble. Ask participants to think out loud if possible. MINIMAL REPORT: A quick summary document that describes what happened and what the team plans on doing about it.

Participatory design: A Participatory Design (PD) workshop is one in which developers, business representatives and users work together to design a solution. PD workshops: Give users a voice in the design process, thus increasing the probability of a usable design Enable technical and non-technical participants to participate equally Provide an opportunity for developers to meet, work with and understand their users Provide a forum for identifying issues Provide an opportunity to get or enhance user buy-in Are highly productive Use techniques which can be easily learned and applied in future activities. Sample Agenda

Agendas will vary depending on the problem at hand, the attendees, and the amount of time available. The following is an example only. Introductions —Participants introduce themselves. The facilitator can set the tone by being first to do so. Usability presentation —This is an opportunity to get participants thinking about usability. Objectives and Expectations. Be clear about the purpose of the workshop, and identify what each participant expects as an outcome. Identify issues —The issues may be with a system to be replaced, or with the domain in general. Use affinity diagramming to extract and structure the issues. Design goals —With the issues in mind, identify the usability goals that the system must meet. Scenarios— Scenarios serve to centre the discussion on the actual users. Have participants read and refine the scenarios. Paper prototyping. Split the group in two and have each spend a short amount of time (no more than 20 minutes) working independently on solutions that address the selected scenario or scenarios. Combine designs. Each group presents its design and the group discusses relative merits. Further design work. Depending on the outcome of the first prototyping session, decide how to use the remaining time most effectively. At the end of the workshop, review expectations and objectives to ensure they have been met. Document the outcomes as soon as possible. Be prepared to diverge from the prepared agenda if necessary. A/B Testing A/B testing is exactly what it sounds like: you have two versions of an element (A and B) and a metric that defines success. To determine which version is better, you subject both versions to experimentation simultaneously. In the end, you measure which version was more successful and select that version for real-world use. Create Your First A/B Test Once you’ve decided what to test, the next step, of course, is to select a tool for the job. If you want a free basic tool and don’t mind fiddling with HTML and JavaScript, go with Google Website Optimizer. If you want an easier alternative with extra features, go with Visual Website Optimizer DO’S Know how long to run a test before giving up. Giving up too early can cost you because you may have gotten meaningful results had you waited a little longer. Giving up too late isn’t good either, because poorly performing variations could cost you conversions and sales. Use a calculator (like this one) to determine exactly how long to run a test before giving up.

Show repeat visitors the same variations. Your tool should have a mechanism for remembering which variation a visitor has seen. This prevents blunders, such as showing a user a different price or a different promotional offer. Make your A/B test consistent across the whole website. If you are testing a sign-up button that appears in multiple locations, then a visitor should see the same variation everywhere. Showing one variation on page 1 and another variation on page 2 will skew the results. Do many A/B tests. Let’s face it: chances are, your first A/B test will turn out a lemon. But don’t despair. An A/B test can have only three outcomes: no result, a negative result or a positive result. The key to optimizing conversion rates is to do a ton of A/B tests, so that all positive results add up to a huge boost to your sales and achieved goals.

Guerrilla usability testing: the art of pouncing on lone people in cafes and public spaces, [then] quickly filming them whilst they use a website for a couple of minutes.” Employing the technique

• Beware confirmation bias • Explain what’s going on • Be Ethical • Make it casual • Be participatory • Don’t lead participants • Keep your eyes peeled • Capture the feedback • Be a timecop