윈도우 앱개발을 향하여

Copyright

이 모든 내용은 Pluralsight에 Amber Israelsen가 올린 'User Experience: The Big Picture'라는 강의의 5~10챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/ux-big-picture/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Content

1. UX Core Concepts and Terminology

2. Roles in User Experience

3. The UX Process

The UX Process

1. Company and industry research

2. User research

3. Information architecture

4. Wireframing

5. Visual design

6. Usability testing

The UX Process : Company and Industry Research

Brand

Represents the intellectual and emotional associations that people make with a company, product, or person. Brand is something that actually lies within each of us. Brand is not just a logo or a color scheme, it's what people think and feel when they hear a company name or see their products.

"A positive user experience has a direct correlation to positive brand perception." - Steve Baty

Questions to Help with Brand Identity

What is your business about?

Who are your customers?

What problem do you solve?

Is there a unique story behind your business?

What are five adjectives or phrases that describe your desired brand?

Culture

The beliefs and behaviors that determine how a company's employees and management interact and handle business transactions, Often implied, not expressly defined.

Questions to Help with Culture

How do employees act at work?

What are common behaviors(both good and bad)?

What does this job/company mean to employees?

Would employees go somewhere else if they could?

Reputation

Collective judgments of a company based on assessments of financial, social and environmental impacts.

"It takes 20 years to build a reputation and 5 minutes to ruin it. If you think about that, you'll do things differently." - Warren Buffet

10 Components of Company Reputation

Ethical, Employees/workplace, Financial performance, Leadership, Management

Social responsibility, Customer focus, Quality, Reliability, Emotional appeal

Industry News

Resource : MarketWatch, Bloomberg, IndustryWeek

Competitors

How is our competitors and what are thy doing right now?

Questions to Ask about Competitors

Who are our three main competitors(direct or indirect)?

How do we set ourselves apart form our competitors?

What do we like and dislike about their brand and experience?

How Business Is Run

The UX Process : User Research (critical!)

User Research

Focuses on understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies.

User Research Methods

Interviews(asking), Contextual interview(observing), Persona, Focus groups, Surveys, Card sorting, Wireframes, Prototyping, Usability Testing, A/B Testing

User Research is critical

Reason 1. Keeps you from building the wrong product

Reason 2. Removes assumptions from the design process

Reason 3. Users will appreciate for Research, and be able to use it

The UX Process : Information Architecture

Information Architecture

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.

Five Activities of Defining Information Architecture

1. Inventory all the content  

2. Conduct a content audit

Analyse the existing content and ask:

Can we remove or consolidate?

What content is good and working well?

What is missing?

3. Design the new architecture

4. Test the new architecture with users

5. Iterate

The UX Process : Wireframing

Wireframe

A visualization tool for presenting proposed functions, structure and content of a web pare or website.

Benefits of Low-Fidelity Wireframing

Get your ideas down

Solidify a rough concept

Quick, easy, cheap

Benefits of High-Fidelity Wireframing

Add more detail and substance

More realistic

Can be used to build an actual visual design

Easier for clients to grasp what the end product will look like    

Action Callouts

User Flow

Popular Tools for Digital Wireframing

Balsamiq, InVision, Omnigraffle, Patternry, Sketch, Axure, UXPin

General Rules for Creating Wireframes

Keep them practical and usable

- Don't be too worried about tidiness and perfection

Iterate, iterate, iterate

- Don't be afraid to throw things away and start over

The UX Process : Visual Design

Visual Design

Focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements

Elements of Visual Design

Line

used to connect two points, to divide sections of page, to create texture, and provide direction on a page

Shape

used to group information or call attention to certain elements on a page, or to compose other objects

Color

differentiate items, create depth, add emphasis or organize related content. It can also be used to affect mood

Texture

Texture is how a surface feels or is perceived to feel based on a digital representation. You can use this in visual design to add interest or attract attention to a particular element

Typography

Fonts

Principles of Design (see link also)

Alignment, Contrast, Visual Hierarchy, Proximity, Layouts, Whitespace, Consistency

The UX Process : Usability Testing

Usability Testing

A technique used in user-centered interaction design to evaluate a product by testing it on users

Benefits of Usability Testing

Determine if users can successfully complete tasks, and how long it takes to complete them

Measure satisfaction with the site

Identify changes necessary to improve satisfaction

Analyze performance of the system

Questions

How wold you rate the overall user experience of the system? - 6.2

How intuitive/helpful is the navigation? - 4.4

How easy is the text to read (style and size)? - 8.1

eye-tracking results

Conducting Usability Testing

1. Create test plan (step-by-step instructions of what users to do, e.g., Find nutritional information for the bacon breakfast sandwich)

2. Set up environment (lab, eye tracking, mirror, desktop sharing, or get results from users later)

3. Identify users (3~10 users)

4. Conduct tests (get step-by-step thinking of user)

5. Summarize results

Heuristic

A rule of thumb, simplification, or educated guess that reduces or limits the search for solutions in domains that are difficult and poorly under stood.

10 Usability Heuristics for User Interface Design

1. Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. e.g., Logged in Name, Progress view

2. Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. e.g., Decline X, Nope O

3. User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through and extended dialogue. Support undo and redo. e.g., Back button, Ctrl + z, Home>South Pacific>New Zealand> Wanaka (buttons to go back to each stage)

4. Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

5. Error prevention

Even better than good error message is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.  e.g., warning sign, 자동 문자열 검색 리스트

6. Recognition rather than recall

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information form one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. e.g., preview of a font list font, VS IntelliSense

7. Flexibility and efficiency of use

Accelerators(unseen by the novice user) may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. e.g., keyboard shortcuts, save billing information, 

8. Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

9. Help users recognize, diagnose, and recover form errors

Error messages should be expressed in plain language(no codes), precisely indicate the problem, and constructively suggest a solution.

10, Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. e.g., Card Security Code with Question mark, Explanation of why Free trial need credit card

The UX Process : Iterate, Iterate, Iterate!!

Summary (생략)

Course Summary (생략)

Additional Tips and Resources

Phrases to live by - "Will this benefit the user?", "Let's ask our users"

Make friends with people on UX team OR become the UX team-of-one

Modify the process to work for your situation

Resource

Creating User Experiences: Fundamental Design Principles - Billy Hollis, Pluralsight

Hacking the User Experience / UX for Developers - Keith Harvey, Pluralsight

User Experience Tips and Tricks for Developers - Amber Israelsen, Pluralsight

uxmag.com

blog.usabilla.com

usabilitygeek.com

nngroup.com

uxpa.org

usability.gov

goodui.org

출처

이 모든 내용은 Pluralsight에 Amber Israelsen가 올린 'User Experience: The Big Picture'라는 강의의  5~10챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/ux-big-picture/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.

Copyright

이 모든 내용은 Pluralsight에 Amber Israelsen가 올린 'User Experience: The Big Picture'라는 강의의 네번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/ux-big-picture/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Content

1. UX Core Concepts and Terminology

2. Roles in User Experience

3. The UX Process

Common Roles in UX

User Researcher : Champion for the user

Responsibilities

     Conduct user interviews, Research market data, Gather findings, Design studies, Conduct usability and A/B testing

Deliverables

User personas, Usability test result, Investigative user studies, Interview results

Tools

Microphones, Cameras, Documents, Paper

"Based on our research, a typical user will...."

Information Architect : The navigator and organizer

Responsibilities

Conduct a content inventory, Card sorting, Create navigation and hierarchy(including labels), Data modeling, Create a sitemap

Deliverables

Content inventory, Card sorting results, Wireframes, Labeling system, Sitemap

Tools

Paper/whiteboard, Omnigraffle, Axure, MindManager, XMind, Treejack, OptimalSort

"Our content should be organized in a way that helps the user to..."

Interaction Designer : The animator

Responsibilities

Create storyboards, Create wireframes and prototypes of key interactions

Deliverables

Wireframes, Prototypes

Tools

Paper/whiteboard, Balsamiq, InVision, Omnigraffle, Patternry, Sketch, Axure, UXPin

"The Button should change to dart gray for 500 milliseconds when the user clicks it..."

Visual/Graphic Designer : Pixel pusher

Responsibilities

Create icons, controls and visual elements for UI, Utilize different kinds of typography, Create and apply styles, Create and enforce brand principles

Deliverables

Mockups, Style guide, Graphic files(PNGs, JPGs, etc)

Tools

Front/Back-End Developer : Coder

Responsibilities

Write code to turn the graphic designer's static design into a working, interactive experience

Deliverables

Working, functional code (e.g., web pages)

Tools

HTML, CSS, JavaScript

Project Manager : Holds it all together

Responsibilities

Oversee team and project from start to finish, Communicate with business stakeholders, Translate between business and UX team, Manage resources, budget and risks

Deliverables

Final product, Project plan, Status updates, Various

Tools

"That new feature will extend the delivery deadline by two weeks..."

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Amber Israelsen가 올린 'User Experience: The Big Picture'라는 강의의 네번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/ux-big-picture/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.

Copyright

이 모든 내용은 Pluralsight에 Amber Israelsen가 올린 'User Experience: The Big Picture'라는 강의의 세번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/ux-big-picture/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Content

1. UX Core Concepts and Terminology

2. Roles in User Experience

3. The UX Process

Outline

User Experience

The UX Umbrella

Useful

Usable

User interface

Graphic/visual design

User research

Human-computer interaction(HCI)

Interaction design

Content strategy

Information architecture

Usability testing

User Experience

Encompasses all aspects of the end user's interaction with the company, its services, and its products

UX는 기술, 디자인, 사업모델 모두에 포함되는 영역이다.

The UX Umbrella

Visual Design

Information Architecture

Interaction Design

Usability

User Research

Content Strategy

So What Makes a Great User Experience?

Value (Is it useful?)

Usability (Is it easy to use?)

Adoptability (Is is easy to start using?)

Desirability (Is it fun and engaging?)

Useful : A useful feature or tool allows users to "do things"; it fulfills a need.

Usable : A measure of how easy or hard it is to do something.

User Interface(UI)

The means by which a user and computer system interact, in particular the use of input devices and software.

Pages, menus, images, icons, buttons, mouse, touch screen etc

Visual/Graphic Design

Focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.

User Research

Focuses on understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies.

Human-Computer Interaction (HCI)

The study of how people interact with computers and to what extent computers are or are not developed for successful interaction with human beings.

Interaction Design

The practice of designing interactive digital products, environments, systems, and services; behavior is the primary focus.

Interaction with the Interface

What can a user do to interact with the interface (e.g., mouse, finger, stylus)?

What commands con the user issue (e.g., keyboard shortcuts)?

Behavior Clues

How does the appearance change to give the user a clue about its behavior (e.g., color, shape, size)?

How do you let users know something is about to happen (e.g., labels, instructions)?

Error Messages

How do you prevent errors? (e.g., gray out a button)

Is an error happens, how does the user know what happened and how to recover?

System Feedback

What sort of feedback should the user get when they take some action (e.g., confirmation message)?

How fast should the feedback be?

Content Strategy

The planning, development, and management of content - written or in other media.

Information Architecture

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.

Card Sorting

1. Gather all information as a card

2. Categorize

3. Confirm Labels

Usability Testing

A technique used in user-centered interaction design to evaluate a product by testing it on users.

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Amber Israelsen가 올린 'User Experience: The Big Picture'라는 강의의 세번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/ux-big-picture/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.