fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@@ -0,0 +1,38 @@
---
Copywriting for UX/UI
---
##Copywriting for UX/UI
###What is it?
To put it simply UX writing is a conversation with your audience. UX writing is the process of writing copy for user-facing touchpoints.
This must come first naturally even before wire-frames. Words are often the best starting points for creating your intital layout designs.
Usually designers and writers need to work in unison as to get the message, tone, voice and language just right. Every word and space
inbetween should speak to the intended user like a good friend. Boring cannot be in your vocabulary unless your product calls for it
(Portfolio Management?). A good writer can put a fund, modern touch onto anything.
###Types of UX/UI Copy:
*Headlines
*Subheaders
*Body Copy
*Captions
*CTA's
*Notifications
*Errors
*User Onboarding
*Menu Copy
*Tool Tips
*Product-generated Emails
<img src="http://assets.uxbooth.com/uploads/2017/01/Screen-Shot-2017-01-19-at-1.56.06-PM.png">
###In a Nutshell UX Writing is:
*Writing for design, where words have purpose, driven by user goals
*The opposite of sales and marketing jargon
*Takes into account the user's thought process and emotions
##Cool Resources:
-https://uxdesign.cc/storyframes-before-wireframes-starting-designs-in-the-text-editor-ec69db78e6e4
-https://uxplanet.org/copywriting-for-interfaces-types-of-copy-in-web-and-mobile-ui-6326f92865f8

View File

@@ -0,0 +1,20 @@
---
title: A B Testing
---
## What is A B Testing?
A/B testing (sometimes called split testing) is comparing two versions of a web page or element to see which one performs better. You compare two web pages or elements by showing the two variants (let's call them A and B) to similar visitors at the same time. The one that gives a better conversion rate, wins!
Every website wants visitors converting from just visitors to something else(Convertions, sign ups, or just take action for something). The rate at which a website is able to do this is its "conversion rate". Measuring the performance of a variation (A or B) means measuring the rate at which it converts visitors to goal achievers. Data scientists use A/B testing to see which version(s) of their product leads to their desired goal faster. Sometimes large companies run hundreds or thousands of A/B tests to make product decisions. These tests are almost always randomized, large, and blinded. This means that the subject or user does not know abou the A/B test.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
For more information on A/B Testing please read
<a href='https://vwo.com/ab-testing/' target='_blank'>The Complete Guide to A/B Testing</a> and
<a href='https://hbr.org/2017/06/a-refresher-on-ab-testing' target='_blank'>A Refresher on A/B Testing</a>.
<a href='https://www.optimizely.com/ab-testing/' target='_blank'>What is A/B Testing?</a>

View File

@@ -0,0 +1,16 @@
---
title: Content Audits
---
## Content Audits
Content audits its a task from the Information Architecture stage within a UX project. A content audit is an activity of checking all of the content on a website(Copy, Images, video, and any other type of content) and compiling it into a big list or file. There are three main types of audits you can perform:
-Full content inventory: A complete compilation of every content on the site. This may include all urls as well as all assets (such as downloadable files and videos).</br>
-Partial content inventory: A listing of a subset of the sites content. A partial inventory may include, for example, the top few levels of a hierarchical site or the past six months of articles. All sections of the site will be covered.</br>
-Content sample: A less detailed collection of example content from the site.
The content audit type will depend on the nature of the request, mostly for website redesign its required to do a full content inventory, for project maintenance, it's a partial one!
#### More Information:
Ux mastery has a great guide on content audits https://uxmastery.com/how-to-conduct-a-content-audit/

View File

@@ -0,0 +1,16 @@
---
title: Customer Journey Map
---
## Customer Journey Map
A customer journey map explains the potential trayectory of the customers experience: from initial contact, through the process of engagement and into a long-term relationship.
It may focus on a particular part of the trayectory or give an overview of the entire experience. What it always does is identify key interactions that the customer has with the organization. It talks about the users feelings, motivations and questions for each of these touchpoints.
It often provides a sense of the customers greater motivation. What do they wish to achieve, and what are their expectations of the organization?
A customer journey map takes many forms but typically appears as some type of infographics. Whatever its form, the goal is the same: to teach organizations more about their customers.
![A customer journey map takes many forms but typically appears as an infographic.](https://www.smashingmagazine.com/wp-content/uploads/2014/12/1-broadband-provider-journey-opt.jpg)
#### More Information:
All about customer journey map here: https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/

View File

@@ -0,0 +1,13 @@
---
title: Fitts Law
---
## Fitts Law
Fitts's Law provides a model of human movement which can accurately predict the amount of time taken to move to and select a target. In human-computer interaction Fitts's Law is typically applied to movement through the graphical user interface using a cursor or other type of pointer.
The law describes a simple rule of UI design that the distance from one point to the next should be reduced, while having the target object be larger to reduce the amount of time for selecting a target. Ideally, the further the user has to traverse towards a target, the larger that target should be in order to make the interaction more smooth.
<img src="http://cdn.sixrevisions.com/0128-05_chart.jpg" class="layzr-loaded">
#### More Information:
A very robust article about Fitts law: https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design

View File

@@ -0,0 +1,19 @@
---
title: Focus Groups
---
## Focus Groups
### Definitions
* A group of people who have been brought together to discuss a particular subject in order to solve a problem or suggest ideas. - Cambridge Dictionary<br>
* A group of people brought together to give their opinions on a particular issue or product, often for the purpose of market research. -Collins English Dictionary
Α focus group is a group of people gathered together because of their common characteristics, such as age, gender, occupation, income etc. Focus groups are formed in order for researchers to conduct a market research, for specific demographic groups. <br>
Unlike an interview, where the input comes from a single person, in focus groups we have different answers from various people which provide a more diverse and accurate insight in the market's needs and wants. Additionally, discussions in focus groups allow people to interact with each other, form new opinions and see different perspectives of the topic in question.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
https://www.thebalance.com/what-is-a-market-research-focus-group-2296907

View File

@@ -0,0 +1,31 @@
---
title: Hicks Law
---
## Hicks Law
Hicks law states that the time it takes to make a decision increases as the number of alternatives increase. It's named after British and American psychologists William Edmund Hick and Ray Hyman.
### Understanding Hick's Law with an Example
Do you remember the old video games from over 20 years ago, and how much fun it was to play them? The controls were so simple you could learn to play in seconds. For example, Super Mario with just left, right, and jump controls.
In comparison, todays input controls of modern gaming consoles and PC games have many choices and combinations. All these controls multiply the available options that a user can choose in any certain situation.
Having so many options makes learning the game and enjoying it much harder and time-consuming.
### What it means in UX Design
Hicks law can be used to narrow down big volumes of information without overloading the user. When you need to simplify a complex process, use Hicks law. Present specific parts of that process at any one time on the screen.
An example can be a payment process. Instead of showing everything at once, you can break it down. Show the screen with shopping cart details, then another with delivery information, then optional account creation, and so on.
Reducing the number of perceived options on the screen makes the interface more user-friendly. It is also more likely that the user will accomplish the goal and not give up or get confused.
**It is important to point out not to oversimplify!** Breaking down choices to a series of too many small chunks can also cause the user to drop off before reaching the goal.
### More Information:
Hicks' Law - <a href='https://en.wikipedia.org/wiki/Hick%27s_law' target='_blank' rel='nofollow'>Wikipedia</a>
Design Principles: Hick's Law - <a href='https://uxplanet.org/design-principles-hicks-law-quick-decision-making-3dcc1b1a0632' target='_blank' rel='nofollow'>uxplanet</a>
Good UI (75 patterns tested by A/B Tests) - <a href='https://goodui.org' target='_blank' rel='nofollow'>UI screens get better when backed by A/B Tests</a>
Understanding Hick's Law - <a href='https://www.youtube.com/watch?v=OU7ekX05UEU' target='_blank' rel='nofollow'>Youtube</a>

View File

@@ -0,0 +1,29 @@
---
title: Human Computer Interaction
---
## Human Computer Interaction
Human-Computer Interaction (HCI) is a field of study that focuses on the design of computer technology and, in particular, the interaction between humans
(the users) and computers. It encompasses multiple disciplines, such as computer science, cognitive science, and human-factors engineering. While it originally
concerned computers, HCI has since expanded to cover almost all forms of information technology design.
Humans interact with computers mostly through graphical user interfaces (GUI), and sometimes through voice user interfaces (VUI). In the field of User
Experience/User Interaction (UX/UI), human-computer interaction is studied to ensure optimal user satisfaction and engagement with a piece of software.
### Design Principles
Several experimental design principles can be applied to designing or evaluating a user interace:
* Early focus on user and task: Establish how many users are needed to perform the task(s) and determine who the appropriate users should be; someone who has never used the interface, and will not use the interface in the future, is most likely not a valid user. In addition, define the task(s) the users will be performing and how often the task(s) need to be performed.
* Empirical measurement: Test the interface early on with real users who come in contact with the interface on a daily basis. Keep in mind that results may vary with the performance level of the user and may not be an accurate depiction of the typical human-computer interaction. Establish quantitative usability specifics such as: the number of users performing the task(s), the time to complete the task(s), and the number of errors made during the task(s).
* Iterative design: After determining the users, tasks, and empirical measurements to include, perform the following iterative design steps:
1. Design the user interface
2. Test
3. Analyze
4. Repeat
### Relation to User Experience Design (UX)
In many ways, HCI was the forerunner that would grow to become what we now call “User Experience (UX) Design.” Despite that, some differences persist between HCI and UX design. Practitioners of HCI tend to be more academically focused, and are involved in scientific research and developing empirical understandings of users. UX designers, on the other hand, tend to be industry-focused, and most UX designers are involved in building a product or service—for example, a smartphone app or a website. Regardless of this difference, the practical considerations for products that UX designers concern themselves with have direct links to the findings of HCI specialists about the mindsets of users. Due to this, there is little point in separating these realms to any great extent.
#### More Information:
- [Human Computer Interaction (Wikipedia)](https://en.wikipedia.org/wiki/Humancomputer_interaction)
- [The Encyclopedia of Human-Computer Interaction, 2nd Ed.](https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/human-computer-interaction-brief-intro)

View File

@@ -0,0 +1,43 @@
---
title: User Experience Design
---
## User Experience Design
User Experience Design is a field that focuses on how the end users interacts with a product or a service. User Experience Design cover covers a wide range of aspects related with a product and not only the visual aspect(such as the GUI). A UX Designer is responsible for the overall experience the end users has with the product and thus a UX Designers role could span from the business side of the product, such as Market and User research, to the Graphical aspect, such as GUI, Interaction Design(sometimes called IxD) and Sound Design. Due the wide area a UX Designer covers it is not uncommon for people to branch out and specialise in certain aspects of the User Experience field, such as User Research, User Interface, User Interaction, Motion Design, Copywriter etc.
This section and it's guides, will cover a wide variety of user experience design concepts.
#### Articles, Resources and Inspiration for User Experience Design
<a href='https://www.prototypr.io/home/' target='_blank' rel='nofollow'>Prtotypr.io</a>
[Prototypr.io] (https://www.prototypr.io/home/)
<a href='https://uxplanet.org/' target='_blank' rel='nofollow'>UX Planet</a>
[UX Planet] (https://uxplanet.org/)
<a href='https://uxdesign.cc/' target='_blank' rel='nofollow'>UX Collective</a>
[UX Collective] (https://uxdesign.cc/)
<a href='https://medium.com/google-design/tagged/ux' target='_blank' rel='nofollow'>Google Design on Medium</a>
[Google Design on Medium] (https://medium.com/google-design/tagged/ux)
<a href='https://medium.com/@pablostanley' taget='_blank' rel='nofollow'>Pablo Stanley</a>
[Pablo Stanley on Medium] (https://medium.com/@pablostanley)
[Boxes & Arrows](http://boxesandarrows.com)
[Usabilla](http://blog.usabilla.com)
#### Textbook for User Experience Design
The Design of Everyday Things: Revised and Expanded Edition -> (Amazon)[https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654/ref=sr_1_1?ie=UTF8&qid=1538897807&sr=8-1&keywords=design+of+everyday+things]
Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) -> (Amazon)[https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1?ie=UTF8&qid=1538897464&sr=8-1&keywords=don%27t+make+me+think]
Interaction Design: beyond human computer interaction 4th edition -> (Amazon)[https://www.amazon.com/Interaction-Design-Beyond-Human-Computer/dp/1119020751]
#### Mostly Free Online UX Design Curriculum
[Springboard Learning Path: User Experience Design - Julia Debari](https://www.springboard.com/learning-paths/user-experience-design/learn/#)
[UX Design for Mobile Developers
by Google](https://www.udacity.com/course/ux-design-for-mobile-developers--ud849)

View File

@@ -0,0 +1,24 @@
---
title: Information Architecture
---
## Information Architecture
Information Architecture, or IA, is usually undertaken by a User Experience (UX) professional with a background in thebroader discipline of UX. (IA is a part of UX). This is not a creative/visual design undertaking but one that is more focused on information design, user task flows and scenarios, use cases, content design, information hierarchy.
The types of documents one produces in the practice of IA are typically refered to as sitemaps (different from flow charts), feature maps, content maps and inventories (although these can also be created by content editors). The IA also cares about the actual verbiage used throughout the navigation and content of the site or product, aiming for clarity and consistency. You'll see reference to 'customer journeys,' but this is not UX or IA  it's something else altogether.
It helps to know where IA sits within the schema of the team and other documentation. The high-level flow of project documentation and process looks like this: (note: assume client signs off at multiple points in the process)
1. Discovery Phase & kickoff: project brief, requirements gathering (technical, functional, creative/brand, content).
2. UX-IA Phase: research > personas > user flows > sitemaps > wireframes. Interaction design details are worked through and finalized. If prototypes are scoped (in budget), sample protos are produced reflective of the user flows and interaction design, and the creative if/when it's ready per the schedule.
3. Creative Deisgn: rough mockups (informed by all the documentation up to this point), high-fidelity mockups (with more accurate final art and content), production-ready art assets produced and delivered to dev.
4. Dev has been working behind the scenes, usually agile or agile-fall in methodology. Dev, UX and creative collaborate on various aspects of the project at any given time. They all know what eachother needs and is expecting from the other.<BR>
(This is a general overview of how a multi-disciplinary team would operate. There are many variables that affect process. Ultimately, the best process is one that the team and client can articulate and stick to, and that produces the desired end result.)
IA is a critical discipline within the digital product/experience creation process. When done well, it is transparent and unnoticable. When done poorly, it dissolves client trust in the team, leads to extra work/time/money spent, possible delays in deliverables and if not caught before shipping/launch, it can embarrass the client to their target audience not good for the production team.
## Other Resources
- [Information architecture - Wikipedia](https://en.wikipedia.org/wiki/Information_architecture)
- [Usabilty.gov](https://www.usability.gov/what-and-why/information-architecture.html)

View File

@@ -0,0 +1,9 @@
---
title: Instructional Design
---
## Instructional Design
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/user-experience-design/instructional-design/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

View File

@@ -0,0 +1,29 @@
---
title: Interaction Design
---
## Interaction Design
## What is Interaction Design?
Interaction Design, often abbreviated as IxD is concerned with the practice of designing interactive digital products such as websites, apps, softwares systems, and/or services. However, Interaction Design also comes handy when designing non-digital products. Interaction Design mainly focuses on behavior.
Below are five distinct charecteristics of Interaction Design as defined by the eminent industrial designer and IDEO founder Bill Moggridge (Shared from Interaction Design Foundation IDF):
## 1. Design involves changing situations by shaping and deploying artifacts
Design is about transformation and the means available for the designer to bring the change in a particular situation is ultimately the designed artifact.
## 2. Design is about exploring possible futures
This sounds too obvious to mention, but from an educational perspective, it shouldnt go unnoticed, especially since it entails a basic difference in orientation. Analytical and critical research emphasis on that what already exist, while design revolves and speaks about what could be.
## 3. Design entails framing the “problem” in parallel with creating possible “solutions”
This charecterstic speaks about how the situation gets changed when we have designed something. It follows the notion that the situation in which the design is used is no longer same compared to when we were designing it.
## 4. Design involves thinking through sketching and other tangible representations
When a designer is working on designing a possible solution, they are not just copying images from their inner eyes, their drawings or sketches are actually the experiements and prototypes of what turns insights into strenghts and possible changes.
## 5. Design addresses instrumental, technical, aesthetical and ethical aspects throughout
Every prototype that is being designed introduces considerations and tradeoffs in all these dimensions, and there is no obvious way in which they can be sequenced. This notion holds equally for interaction design Technical decisions influences the aesthetic qualities of the resulting interaction, instrumental choices on features to offer have ethical repercussions, and so on.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href='https://www.interaction-design.org/' target='_blank' rel='nofollow'>Interaction Design Foundation</a>

View File

@@ -0,0 +1,64 @@
---
title: Moodboards
---
## Moodboards
Moodboards are a way to convey the feeling about product you are about to make. Also to get inspiration for colour palette and shapes to use later. In other words, moodboard is <a href="http://www.creativebloq.com/graphic-design/mood-boards-812470">a collection of textures, images and text related to a design theme as a reference point</a>.
Creating a moodboard is really simple. There are two ways: either manual or digital.
For creating manual moodboards you will need:
- Different magazines, newspapers, books and/or posters that you can cut
- Paper
- Scissors
- Glue
Start out with finding the images, shapes, colours, messages you feel that resonate with your will-be product.
Cut them out.
If you have cut out all that you need, arrange them on paper, and glue them.
The end result might look something similar to this:
![papercut moodboard](https://raw.githubusercontent.com/ejke/ejke.github.io/master/else/moodboard.jpg)
The other option is to create digital moodboard. The technique is quite the same, you need:
- Internet connection
- Basic knowledge of copy and paste functions
- Image editing software
The positive aspect is that you don't have to limit your moodboard to images in magazine. The negative aspect is that it might be hard to find the right images, since you have all internet to search from.
The places to start look for images and ideas:
- <a href="https://images.google.co.uk/">google</a>. Goole Images can be chosen according to colour, shape or form, so if you can search it, then it is possible that you find it.
- <a href="https://www.pinterest.dk/">Pinterest</a>. Same as for google, yet different.
- free images. Such as <a href="https://pixabay.com/">Pixabay</a>, <a href="https://www.pexels.com/">Pexels</a>, or <a href="http://www.freeimages.com/">free images</a> sites, you can find tons of inspiration already in one picture.
- go outside with a camera. There might be the exact item for your moodboard waiting for you to take that picture.
Again, when you have sufficient images, it is time to put the moodboard together. For that, you also have different possibilities:
- Gimp/Photoshop/Paint. In first two you have greater ability to move images around, paint is just as good as paint can be (sufficient, but uncomfortable).
- Inkscape/Illustrator. These are not ment for this kind of work, but can do the job. Additionally you have do and add vector art to your moodboard.
- Online tools: just search for 'moodboard' with your favourite search engine and you should find plenty of sites that offer the template for competing moodboard.
![digital moodboard example](http://stuckwithpins.com/blog/wp-content/uploads/2015/08/moodboard-s2s.jpg)
Note:
When creating moodboards, try to avoid using titles or pictures of the thing you are creating moodboard for.
For example, when creating moodboard for Harry Potter website, do not use picture of actors nor write down the title. Usually it is not the best way. Instead, find thematicly dark colours, wood and stone textures, picture of lightning bolt, another person with round glasses (not a fan dressed up), loads of books stacked on top of each other, boiling cauldron, etc. It might seem hard in the beginning, but it gives more inspiration on the later stages of production - and you might need that inspiration then.
Making moodboards is one of the most fun part of production, so try to enjoy it and get creative!
Mood boards can convey color scheme, type face, and specific imagery. They can also explore tone and mood more abstractly. A board can include video or sound in addition to static images, photography, and text.
![An example of a surf-themed mood board](https://cdn-images-1.medium.com/max/1600/1*9qVOw8uDg8oOOevWmYUozQ.jpeg)
There are many factors that go into making the perfect mood board. Depending on your audience, you may want to decide on choosing a larger image and building the mood board around it. This image would become your inspiration and centerpiece for the entire board. Also, do you think you should create a physical or digital mood board, which one would portray your ideas and inspiration more effectively?
![An example of a physical mood board](https://www.designyourway.net/blog/wp-content/uploads/2018/02/06moodboard3-superjumbo.jpg)
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href='https://uxplanet.org/creating-better-moodboards-for-ux-projects-381d4d6daf70'>Milanote. "Creating Better Moodboards for UX Projects." <i>Medium</i>. September 10, 2017. Accessed: October 25, 2017.</a>

View File

@@ -0,0 +1,30 @@
---
title: Paper Prototyping
---
## Paper Prototyping
Paper prototyping is a method widely used in user interface and user experience design. It involves in using the most traditional way which are pencil and papers. It is the most cost-efficient way to produce a visual graphic for mobile apps, websites or desktop apps.
#### Brief Guide to Paper Prototyping
To begin, we must have a goal in mind for our prototype. Think of one before even beginning to do the prototyping, as with any other kind of prototyping.
After deciding your goal, you can either choose to make personas or some storyboards as a quick draft.
Depending on what you are designing, be it a web application or a mobile app, choose your paper size - it should be of the same size as the screens you are going to implement in the future. This would be beneficial for you when you have to draw out your components and layout on paper.
And of course, after you are done with one round of paper prototyping, take it for testing on users. The beauty of paper prototyping is that it's fast, efficient, and fun as well - you can make changes easily, and it's not too time-consuming to make edits too.
#### Advantages of Paper Prototyping
1. It's cost effective! What you would need is just pencil/pen and paper, without the need to engage in the services of a designer/developer to do up your prototypes.
2. No design or programming involved at this stage. You don't need to utilize Photoshop, Sketch, etc in paper prototyping. Since all your designs will be hand drawn, you do not need fancy software or graphics to make a paper prototype.
3. It allows for quick evaluation and testing. This is especially important when you are in an early stage of conceptualizing your idea, and any improvements or suggestions to the prototype can be easily made and discussed.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<p>Guide to paper prototyping <a href="https://blog.marvelapp.com/stop-talking-start-sketching-guide-paper-prototyping/" target="blank">here</a></p>
<p>Guide to rapid mobile app prototyping <a href="https://blog.prototypr.io/rapid-prototyping-for-mobile-app-ab394c9086e2" target="blank">here</a></p>

View File

@@ -0,0 +1,67 @@
---
title: Pattern Libraries
---
## Pattern Libraries
A pattern library is a collection of reusable user interface design elements. Since these ui elements are reused multiple times in a website, web application, or software application, they impose structure through consistency. This makes the site or app easier to use.
A few common ui elements found in a pattern library are:
* Menus
* Buttons
* Page Layouts
* UI Animations
* Forms
### Benefits of Pattern Libraries
Paul Boag, from his blog [Boagworld.com](https://boagworld.com/design/pattern-library/), explains the main reasons for creating a pattern library:
1. "A pattern library ensures a consistent user interface."
2. "A pattern library facilitates reusability."
3. "A pattern library makes maintenance easier."
### Pattern Libraries vs. Design Systems vs. Style Guides
It's easy to confuse pattern libraries with design systems and style guides. This [article by Zack Rutherford for UXPin](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) clarifies the difference between the three:
> • **Design System** the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.
>
> • **Pattern Library** A subclass in the design system, this is the set of design patterns for use across a company.
>
> • **Style guide** Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
##### Pattern Library Examples
[Mailchimp](https://ux.mailchimp.com/patterns)
[IBM Design Language](https://www.ibm.com/design/language/resources)
[Microsoft](https://developer.microsoft.com/en-us/windows/desktop/design)
[Google's Material Design](https://material.io/guidelines/)
[UI Patterns](http://ui-patterns.com/patterns)
[Mobile Patterns](http://www.mobile-patterns.com/)
[BBC GEL](http://www.bbc.co.uk/gel/guidelines/category/design-patterns)
##### Articles
["Pattern Libraries" by Natasha Hockey for Prototypr.io](https://blog.prototypr.io/pattern-libraries-5d627c5c65b4)
["Pattern Libraries: What They Are and Why You Need One" by Meghan Lazier for Designlab](http://trydesignlab.com/blog/pattern-libraries-what-they-are-and-why-you-need-o/)
["Creating a Pattern Library" by Rebecca Sorensen for Sumo Logic](https://medium.com/sumo-logic-ux/creating-a-pattern-library-18cce0f901b4)
["Getting Started with Pattern Libraries" by Anna Debenham for A List Apart](http://alistapart.com/blog/post/getting-started-with-pattern-libraries)
["Taking the Pattern Library to the Next Level" by Vitaly Friedman for Smashing Magazine](https://www.smashingmagazine.com/taking-pattern-libraries-next-level/)

View File

@@ -0,0 +1,49 @@
---
title: Personas
---
## Personas
Personas are used in the design process as a guide to create user experiences based on the types of users an application will have. A persona represents a demographic of people who will use the application. Typically, multiple personas are created before the design of an application takes place. The personas will help the designers to create different designs for the different types of users.
For example, if a team was building an application that handled membership and operations for a fitness club, then some of the users of the application might include front desk workers, salesmen, and personal trainers. The ages, mindset, and technical ability of these users might be very different. So the team would create a persona for each of these user types and include details about that user's job, skill level, goals, background, and a short description about that individual's day-to-day activities.
## User Persona
A user persona is a fictional profile or representation of an ideal user you are trying to reach. Designers use personas to better understand their users and customize a design to fit the target audience.
User personas show how a person might use a website or app. A user's needs, goals, and behaviors help designers figure out how they use a product and what the design can do to get a user to do a specific action. A strong user persona clearly identifies what these needs and essential information which can influence the design.
UX designers find as much research as possible to accurately represent their users. The information is organized into groups which represent the ideal users you want to reach. Designers often focus on most important user groups because it is easier to design for a select few than trying to meet the needs of everyone.
Individual user personas are one page and avoid having extra details which dont affect the final designer or help with any of the design decisions. You must make sure personas are realistic and specific as possible since it will help you find real life users when you are ready to test your product.
## How Define Your User Persona
Designers have different ways of creating a user persona, but well defined personas have 4 elements. These elements are:
1.Header
2.Demographic Profile
3.End Goal(s)
4.Scenario
### Headers
Headers include the name of your user, mage, and often a quote. The quote is a way designers summarize what the user thinks is important. A strong header keeps designers concentrated on the users they are building for.
### Demographic Profiles
Demographic profiles contain all data from user research. All the data gives designers a complete picture of their users. There are four sections to the profile: personal background, professional background, user environment, and psychographics.
Personal background is information such as age, gender, ethnicity, and education. Designers can include the family status (e.g. single, married, widowed, etc.) or persona group (e.g. working moms).Professional background is the users job occupation, income level, and work experience.
User environment is physical, social, and technological context of a user. This information shows what a users typical day is, where they spend their time, and what they do with others. Psychographics are research on how your users think and feel. This data focuses on the attitudes, interests, motivation, and pain points of your users.
### End Goal(s)
An end goal is the action users take to complete a goal. End goals motivate all users and show what users want or need.
### Scenario
Scenarios is a description of how users would use a product to accomplish an end goal. These situations define when, where, and how this event would take place. You write these scenarios from the perspective of the user.
#### More Information:
- <a href="https://www.usability.gov/how-to-and-tools/methods/personas.html" target='_blank' rel='nofollow'>Personas - usability.gov</a>
- [Smashing Magazine: A Closer Look At Personas](https://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/)

View File

@@ -0,0 +1,36 @@
---
title: Prototyping
---
## Prototyping
In software development, a prototype is a rudimentary working model of a product or information system, usually built for
demonstration purposes or as part of the development process. In the systems development life cycle (SDLC) Prototyping Model,
a basic version of the system is built, tested, and then reworked as necessary until an acceptable prototype is finally
achieved from which the complete system or product can now be developed.
Prototyping refers to an initial stage of a software release in which developmental evolution and product fixes may occur
before a bigger release is initiated. These kinds of activities can also sometimes be called a beta phase or beta testing,
where an initial project gets evaluated by a smaller class of users before full development.
Prototyping, as well as broad-spectrum testing and multiple software releases, is part of a more detailed process for
producing sophisticated software products and services. The essential idea is that even when code features are complete on a
project, the software, which is still in development, may have many bugs and user problems. For many of these to get ironed
out, it helps if the software is actually in use, but developers face the issue of releasing a product that end-users can see
as essentially flawed. Releasing the product to a smaller community or otherwise restricting its development in stages can be
a very effective solution.
In some cases, prototyping might involve volunteers, while in other cases, special clients or others with special status may
be involved in prototyping. Development teams and tech companies will typically elicit feedback on a product during
prototyping in order to fix problems before final distribution.
## Tools
Some popular prototyping tools among UX designers include:
- Sketch - https://sketchapp.com
- InVision - https://invisionapp.com
- Axure - https://www.axure.com
- Adobe XD CC - https://www.adobe.com/in/products/xd.html
- Figma - https://figma.com
- UXPin - https://www.uxpin.com/
- Framer - https://framer.com

View File

@@ -0,0 +1,35 @@
---
title: Qualitative Surveys
---
## Qualitative Surveys
Qualitative surveys—which can take the form of interviews or other directly-observed usability tests (can be in-person or via video-conferencing tools like Skype or Google Hangouts)—tend to be exploratory and with the goal of gaining a more in-depth understanding of the user's experience. Qualitative surveys aim to gather information on a user or group's everyday life experiences and motivations to see how these details might affect their use of the product or tool.
### Results
When using qualitative research methods, it is important for the researcher to recognize that they may have an effect on the research results. Since it is the human experience that is being researched instead of hard data (number of clicks, login location trends, etc.), it is difficult to remain completely objective during testing or when assessing results. The results also won't necessarily be reproducible. This is because the factors that affect a user's experience are varied and can change from day to day. These factors can take the form of a user being more stressed one day than another due to new events in their life or having more responsibilities that day, users having completely different life experiences than one another, bad weather affecting the user's mood, and anything else that affects a person's personal or emotional life.
Results of qualitative surveys are typically shown as themes or categories instead of numbers.<sup>1</sup>
### Example
Here's a great example from [The Interaction Design Foundation](https://www.interaction-design.org/) on the difference between quantitative research and qualitative research:
> To illustrate the difference, lets say you want to study a user groups exercise habits. You can choose to study these using either quantitative or qualitative research methods. **If you use a *quantitative* method**, you could create an online survey and distribute it to a large number of participants. Participants must answer predefined questions about their exercise habits such as “How many hours per week do you exercise?”. If you do your job dutifully, the survey answers can be numerically summarized without bias from your own opinion or personal experience with exercise.
>
> **If you use a *qualitative* method**, you could choose to do interviews with a limited number of participants, where you talk to the participants about when, where, and how they exercise. Because the interview is similar to a conversation, your results will depend on how you ask follow-up questions to the participants answers and how you do that will to some extent depend on your personality and your own experience with exercise. Similarly, the results of the interview also, to some extent, depend on a subjective interpretation of what the participant has told you.
### Sources
1. [Mortensen, Ditte. "[Best Practices for Qualitative User Research](https://www.interaction-design.org/literature/article/best-practices-for-qualitative-user-research)." *[Interaction Design Foundation](https://www.interaction-design.org/)*. January, 2018. Accessed: February 23, 2018](#)
### Resources:
* "[Qualitative Research Methods in UX Design](https://www.slideshare.net/uxtalktokyo/ux-tokyo-talk-6-markus)" by Markus Heberlein (SlideShare presentation, shown at UX Tokyo Talk 2014)
* "[12 UX Research Techniques (Quantitative abnd Qualitative)](https://medium.com/ux-design-web-mobile-virtual-reality/12-ux-research-techniques-quantitative-and-qualitative-1a37bcb1914e)" by Kevin Dalvi
* "[Complete Beginner's Guide to UX Research](http://www.uxbooth.com/articles/complete-beginners-guide-to-design-research/)" by [UX Booth](http://www.uxbooth.com/)
* "[A Crash Course in UX Design Research](https://uxdesign.cc/a-crash-course-in-ux-design-research-ea00c3307c82)" by Matt Lavoie at [UX Collective](https://uxdesign.cc/)

View File

@@ -0,0 +1,31 @@
---
title: Quantitative Surveys
---
## Quantitative Surveys
**Quantitative surveys** look at the statistical approach of analyzing the survey results. The questions are designed in a way so that the answers are recorded in numbers. Then you look at how many users have answered certain questions.
#### Quantitative Surveys tell us about
- How many users use the product?
- What kind of people use the product?
- What is the market for our product?
It is a great approach to test the market, see trends, patterns, user base, see success of the product etc.
#### Example Questions
- Do you use Free code camp?
- Yes
- No
- How many challenges have you finished in free code camp?
- Less than 100
- Less than 500
- More than 500
- How many certificates have you earned on free code camp in total?
- 0
- 1
- 2
- 3
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href='https://www.marketingdonut.co.uk/market-research/questionnaires-surveys-and-focus-groups/what-is-quantitative-research' target='_blank' rel='nofollow'>Article on quantitative survey</a>

View File

@@ -0,0 +1,15 @@
---
title: Stakeholder Interviews
---
## Stakeholder Interviews
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/user-experience-design/stakeholder-interviews/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

View File

@@ -0,0 +1,30 @@
---
title: Storyboards
---
## Storyboards
A storyboard is a sequence of images and accompanying blurbs that together convey a users experience in accomplishing some goal. Storyboards help Product and UX teams brainstorm around a users pain points.
Storyboarding first comes after user research, persona development, and jobs-to-be-done. This instance of Storyboarding outlines the users pain points with the existing solution. The next instance of storyboarding comes after the solution ideation, to communicate the envisioned future of how the users life has been improved.
Generally sketched by hand, Storyboards are a quick and cheap way to communicate a users behaviour before and after the proposed solution.
Effective Storyboards...
* Should:
* clearly outline the User, their Actions, Emotions, and Outcomes
* show only UI elements relevant to the interaction when showing device close-ups
* Should NOT:
* be “pixel-perfect”
* demonstrate UI completeness
![Storyboard Example](https://github.com/yunChigewan/storage/blob/master/storyboard_pic.jpeg?raw=true)
Image credit: Chelsea Hostetter, Austin Center for Design
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
- Stock images to use in Storyboards www.designcomics.org
- Storyboarding article from UX Planet https://uxplanet.org/storyboarding-in-ux-design-b9d2e18e5fab

View File

@@ -0,0 +1,15 @@
---
title: Task Analysis
---
## Task Analysis
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/user-experience-design/task-analysis/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

View File

@@ -0,0 +1,53 @@
---
title: Usability Testing
---
## Usability Testing
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/user-experience-design/usability-testing/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system.
This is in contrast with usability inspection methods where experts use different methods to evaluate a user interface without involving users.
Usability testing focuses on measuring a human-made product's capacity to meet its intended purpose. Examples of products that commonly benefit from usability testing are foods, consumer products, web sites or web applications, computer interfaces, documents, and devices. Usability testing measures the usability, or ease of use, of a specific object or set of objects, whereas general humancomputer interaction studies attempt to formulate universal principles.
This testing is recommended during the initial design phase of SDLC, which gives more visibility on the expectations of the users.
Methods
1. Hallway testing
Hallway testing is a quick, cheap method of usability testing in which randomly-selected people—e.g., those passing by in the hallway—are asked to try using the product or service. This can help designers identify "brick walls", problems so serious that users simply cannot advance, in the early stages of a new design. Anyone but project designers and engineers can be used (they tend to act as "expert reviewers" because they are too close to the project).
2. Remote usability testing
In a scenario where usability evaluators, developers and prospective users are located in different countries and time zones, conducting a traditional lab usability evaluation creates challenges both from the cost and logistical perspectives. These concerns led to research on remote usability evaluation, with the user and the evaluators separated over space and time. Remote testing, which facilitates evaluations being done in the context of the user's other tasks and technology, can be either synchronous or asynchronous. The former involves real time one-on-one communication between the evaluator and the user, while the latter involves the evaluator and user working separately. Numerous tools are available to address the needs of both these approaches.
Synchronous usability testing methodologies involve video conferencing or employ remote application sharing tools such as WebEx. WebEx and GoToMeeting are the most commonly used technologies to conduct a synchronous remote usability test. However, synchronous remote testing may lack the immediacy and sense of "presence" desired to support a collaborative testing process. Moreover, managing inter-personal dynamics across cultural and linguistic barriers may require approaches sensitive to the cultures involved. Other disadvantages include having reduced control over the testing environment and the distractions and interruptions experienced by the participants' in their native environment. One of the newer methods developed for conducting a synchronous remote usability test is by using virtual worlds.
Asynchronous methodologies include automatic collection of user's click streams, user logs of critical incidents that occur while interacting with the application and subjective feedback on the interface by users. Similar to an in-lab study, an asynchronous remote usability test is task-based and the platform allows researchers to capture clicks and task times. Hence, for many large companies, this allows researchers to better understand visitors' intents when visiting a website or mobile site. Additionally, this style of user testing also provides an opportunity to segment feedback by demographic, attitudinal and behavioral type. The tests are carried out in the user's own environment (rather than labs) helping further simulate real-life scenario testing. This approach also provides a vehicle to easily solicit feedback from users in remote areas quickly and with lower organizational overheads. In recent years, conducting usability testing asynchronously has also become prevalent and allows testers to provide feedback in their free time and from the comfort of their own home.
3. Expert review
Expert review is another general method of usability testing. As the name suggests, this method relies on bringing in experts with experience in the field (possibly from companies that specialize in usability testing) to evaluate the usability of a product.
A heuristic evaluation or usability audit is an evaluation of an interface by one or more human factors experts. Evaluators measure the usability, efficiency, and effectiveness of the interface based on usability principles, such as the 10 usability heuristics originally defined by Jakob Nielsen in 1994.
Nielsen's usability heuristics, which have continued to evolve in response to user research and new devices, include:
* Visibility of system status
* Match between system and the real world
* User control and freedom
* Consistency and standards
* Error prevention
* Recognition rather than recall
* Flexibility and efficiency of use
* Aesthetic and minimalist design
4. Automated expert review
Similar to expert reviews, automated expert reviews provide usability testing but through the use of programs given rules for good design and heuristics. Though an automated review might not provide as much detail and insight as reviews from people, they can be finished more quickly and consistently. The idea of creating surrogate users for usability testing is an ambitious direction for the artificial intelligence community.
* Help users recognize, diagnose, and recover from errors
* Help and documentation

View File

@@ -0,0 +1,27 @@
---
title: User-Centered Design
---
## User-Centered Design
User centered design (UCD) is a collection of processes which focus on putting users at the center of product design and development. UCD is an
iterative design approach that aims to develop an understanding of user needs, doing so through a mixture of investigative (e.g., surveys and
interviews) and generative (e.g., brainstorming) methods and tools. Crucially, UCD heavily involves users in all design and evaluation phases.
Designers examine the usability, characteristics, environment, and tasks of a product and are extensively attentive to all steps of the design process.
The main goal of UCD is to optimize the product, service, or process around how users will use the product, rather than forcing users to confirm or
change their behavior to adapt the product.
### Phases of the UCD Process
1. Specify the context of use: Identify the people who will use the product, what they will use it for, and under what conditions they will use it.
2. Specify requirements: Identify any business requirements or user goals that must be met for the product to be successful.
3. Create design solutions: This part of the process may be done in stages, building from a rough concept to a complete design.
4. Evaluate designs: Evaluation, ideally through usability testing with actual users, is as integral as quality testing is to good software development
### User-centered design vs. Human-centered design
User-centered design is often used interchangeably with human-centered design, but the former is actually a subset of the latter. User-centered design concerns itself not just with catering to any particular human user, but a specific type of user. Thus, user-centered design requires deeper analysis of users your target audience. It is not only about general characteristics of a person; it is about particular habits and preferences of target users to come up with right solutions for specific problems.
User-centered design takes into account age, gender, social status, education and professional background, influential factors, product usage expectations and demands and many other important things that may vary for different segments.User-centered design is about deep research on users habits, from their interactions with the product to their vision of how the product should look like and behave.
#### More Information:
* [User-Centered Design: An Introduction](https://usabilitygeek.com/user-centered-design-introduction/) - Usability Geek
* [Benefits of User-Centered Design](https://www.usability.gov/what-and-why/benefits-of-ucd.html)

View File

@@ -0,0 +1,29 @@
---
title: User Flow
---
## User Flow
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
User Flow is a fundemantal tool for every User Expereince Designer in predicting a Users actions and travel path through a product. By designing a User Flow a UX designer puts himself in the shoes of a fictional user and completes a task product they are designing. The resulting 'diagrams' are called a "User Flow Map"(not to be mistaken with "User Journey Map") and through it a designer could predict and plan the directions a future user might take when using a certain aspect of the product.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
###### Youtube:
<a href='https://www.youtube.com/watch?v=wClXAzTFUIY' target='_blank' rel='nofollow'>Personas and User Flows | UX/UI Design | Product Design | Udacity</a>
[Udacity Youtube] (https://www.youtube.com/user/Udacity)
<a href='https://www.youtube.com/watch?v=JjjxDXbgfYY' target='_blank' rel='nofollow'>Recreating Instagram's User Flow: An exercise in UX design - UXT#5</a>
[https://www.youtube.com/channel/UCNN-covyHLvm1Q7vUV6StAg] (UX Tracks)
<a href='https://www.youtube.com/watch?v=-MqBBvw6wBY' target='_blank' rel='nofollow'>The Difference Between User Journeys and User Flows | UX Tutorial</a>
[https://www.youtube.com/channel/UCpzWITCC0EjA9tiKeyO1i3A] (Robert Smith)
<a href='https://www.youtube.com/watch?v=XmhUkDfXv3U' target='_blank' rel='nofollow'>How to Analyze User Flows by Scoot Product Manager</a>
[https://www.youtube.com/channel/UC6hlQ0x6kPbAGjYkoz53cvA] (Product School San Francisco)
###### Resources:
<a href='https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66' target='_blank' rel='nofollow'>The biggest WTF in design right now</a>
[https://uxdesign.cc/] (UX Collective)
<a href='https://medium.com/sketch-app-sources/user-journey-maps-or-user-flows-what-to-do-first-48e825e73aa8' target='_blank' rel='nofollow'>User Journey Maps or User Flows, what to do first?</a>
[https://medium.com/sketch-app-sources] (Design + Sketch)
<a href='https://www.uxpin.com/studio/blog/creating-perfect-user-flows-for-smooth-ux/' target='_blank' rel='nofollow'>Creating Perfect User Flows for Smooth UX</a>
[https://www.uxpin.com/] (UX Pin)
<a href='https://optinmonster.com/how-to-design-a-user-flow-diagram-for-your-website/' target='_blank' rel='nofollow'>How to Design a User Flow Diagram for Your Website</a>
[https://optinmonster.com/blog/] (Optinmonster)

View File

@@ -0,0 +1,54 @@
---
title: User Research
---
## User Research
User-experience research methods are great at producing data and insights, while ongoing activities help get the right things done. Alongside R&D, ongoing UX activities can make everyones efforts more effective and valuable. At every stage in the design process, different UX methods can keep product-development efforts on the right track, in agreement with true user needs and not imaginary ones.
#### 20 UX Methods in Brief
Heres a short description of the user research methods shown in the above chart:
*Usability-Lab Studies:* participants are brought into a lab, one-on-one with a researcher, and given a set of scenarios that lead to tasks and usage of specific interest within a product or service.
*Ethnographic Field Studies:* researchers meet with and study participants in their natural environment, where they would most likely encounter the product or service in question.
*Participatory Design:* participants are given design elements or creative materials in order to construct their ideal experience in a concrete way that expresses what matters to them most and why.
Focus Groups: groups of 312 participants are lead through a discussion about a set of topics, giving verbal and written feedback through discussion and exercises.
*Interviews:* a researcher meets with participants one-on-one to discuss in depth what the participant thinks about the topic in question.
*Eyetracking:* an eyetracking device is configured to precisely measure where participants look as they perform tasks or interact naturally with websites, applications, physical products, or environments.
*Usability Benchmarking:* tightly scripted usability studies are performed with several participants, using precise and predetermined measures of performance.
*Moderated Remote Usability Studies:* usability studies conducted remotely with the use of tools such as screen-sharing software and remote control capabilities.
*Unmoderated Remote Panel Studies:* a panel of trained participants who have video recording and data collection software installed on their own personal devices uses a website or product while thinking aloud, having their experience recorded for immediate playback and analysis by the researcher or company.
*Concept Testing:* a researcher shares an approximation of a product or service that captures the key essence (the value proposition) of a new concept or product in order to determine if it meets the needs of the target audience; it can be done one-on-one or with larger numbers of participants, and either in person or online.
*Diary/Camera Studies:* participants are given a mechanism (diary or camera) to record and describe aspects of their lives that are relevant to a product or service, or simply core to the target audience; diary studies are typically longitudinal and can only be done for data that is easily recorded by participants.
*Customer Feedback:* open-ended and/or close-ended information provided by a self-selected sample of users, often through a feedback link, button, form, or email.
*Desirability Studies:* participants are offered different visual-design alternatives and are expected to associate each alternative with a set of attributes selected from a closed list; these studies can be both qualitative and quantitative.
*Card Sorting:* a quantitative or qualitative method that asks users to organize items into groups and assign categories to each group. This method helps create or refine the information architecture of a site by exposing users mental models.
*Clickstream Analysis:* analyzing the record of screens or pages that users clicks on and sees, as they use a site or software product; it requires the site to be instrumented properly or the application to have telemetry data collection enabled.
*A/B Testing (also known as “multivariate testing,” “live testing,” or “bucket testing”):* a method of scientifically testing different designs on a site by randomly assigning groups of users to interact with each of the different designs and measuring the effect of these assignments on user behavior.
*Unmoderated UX Studies:* a quantitative or qualitative and automated method that uses a specialized research tool to captures participant behaviors (through software installed on participant computers/browsers) and attitudes (through embedded survey questions), usually by giving participants goals or scenarios to accomplish with a site or prototype.
*True-Intent Studies:* a method that asks random site visitors what their goal or intention is upon entering the site, measures their subsequent behavior, and asks whether they were successful in achieving their goal upon exiting the site.
*Intercept Surveys:* a survey that is triggered during the use of a site or application.
*Email Surveys:* a survey in which participants are recruited from an email message.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<a href='https://www.nngroup.com/articles/ux-research-cheat-sheet/' target='_blank' rel='nofollow'>UX Research Cheat Sheet</a>