UX4SWA Day 1: About UX Day 2: User Research Day 3...

22
UX4SWA Day 1: About UX Day 2: User Research Day 3: Information Architecture Day 4: Prototyping & Patterns Day 5: Usability Testing

Transcript of UX4SWA Day 1: About UX Day 2: User Research Day 3...

Page 1: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

UX4SWA

Day 1: About UX Day 2: User Research Day 3: Information Architecture Day 4: Prototyping & Patterns Day 5: Usability Testing

Page 2: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

UX4SWA

Day 1: About UX Day 2: User Research Day 3: Information Architecture Day 4: Prototyping & Patterns Day 5: Usability Testing

Prototype + UX pattern

1. Prototype

2. Pattern

3. Tools

Page 3: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Sketch & Prototype

Page 4: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

In  18  minutes,  teams  of  4  must  build  the  tallest  freestanding  structure  out  of  -­‐  20  s;cks  of  spaghe>,  -­‐  one  yard  of  tape,  -­‐  one  yard  of  string,  -­‐  and  one  marshmallow.  The  marshmallow  has  to  be  on  top.Tryout  of  2  will  make  a  winner  with  prize!

Page 5: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Tom Wujec: Build a tower, build a team

Page 6: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Lesson 1: PROTOTYPING MATTERS.

Lesson 2: DIVERSE SKILLS MATTER

Lesson 3: INCENTIVES MAGNIFY OUTCOMES

Page 7: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Why Sketch & Prototype

Mind Sketchrepresentation

Create(seeing that)

Read(seeing as)

MindOthers

Collaboration

- 적당한 매체일것 Appropriate- 익숙할 것 Dexterity- 시작부터 From the beginning- 자주할 것 As often as possible

Page 8: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Why Sketch & Prototype

Design Process

Elaboration(Opportunity-seekingfrom singular to multiples)

Design Process

Reduction(Decision-making: from broad to specific)

Clarity is not always the path to enlightment.

Page 9: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Why Sketch & Prototype

Flexible Approach to Concept Generation and Selection

Initia

l num

ber

redu

ced

new

one

s ad

ded

futu

re r

educ

tion

futu

re a

dditio

n

FR FAGeneral Iteration Iteration Iteration (medium) (fine)

Page 10: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Why Sketch & Prototype

Usa

bilit

y

Idea

tion

Sketch Prototype

Page 11: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

멘탈 시뮬레이션 (개인:5분)

‘다이어트 머신’

SOUP: S구조, O상황, U사용자, P표현

Page 12: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Social Network Sketch

a. 종이를 네 번 접고 각 단에 영화 한 개 씩을 적는다.

b. 옆 사람에게 돌리고 주어진 문장에 댓글, 설명,링크 등을 첨가한다.

c. 2바퀴 돌린다.

Page 13: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Exquisite Corpse절묘한 토막들

Page 14: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고
Page 16: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Development Centric

UX Centric

Detailed Functionality

Sketch

Axure Pro

Lucid spec, Mockup Screens, Protoshare, Justinmind Prototyper

Prototype Composer MiPlatform

iRise Studio Pro

Wireframe Sketcher

SketchFlow

iPlotz, Gliffy, Pencil

Fore UI

Balsamiq Mockup

Visual Studio

Powerpoint

We need a Tool!

Page 17: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

UI Prototyping Tools

•현재����������� ������������������  시중에서����������� ������������������  구입할����������� ������������������  수����������� ������������������  있는����������� ������������������  UI����������� ������������������  Prototyping����������� ������������������  Tool은����������� ������������������  다양하다.����������� ������������������  크게����������� ������������������  차별화����������� ������������������  되는����������� ������������������  부분은����������� ������������������  platform,����������� ������������������  template,����������� ������������������  customization,����������� ������������������  dynamic����������� ������������������  prototype����������� ������������������  등이����������� ������������������  있다.����������� ������������������  ����������� ������������������  ����������� ������������������  

iPlotz

Wireframe Sketcher

Balsamiq Mockup

Axure Pro Protoshare

Mockup Screens

iRise Studio Pro Gliffy

Lucid Spec ForeUI

Prototype Composer Pencil

Justinmind Prototyper

Microsoft Sketch Flow

Page 18: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

UI Prototyping Tools:Elements

•다양한����������� ������������������  프로토타입����������� ������������������  툴에는����������� ������������������  이를����������� ������������������  구성하는����������� ������������������  공통����������� ������������������  요소가����������� ������������������  있고����������� ������������������  추가����������� ������������������  기능이����������� ������������������  있다.����������� ������������������  

UI prototyping tool의 기본 구성• Page browser: 사이트를 구성하는 페이지의 목록 • Annotations: 각 페이지에 대한 상세 설명 및 요구사항• Page window: 페이지의 UI 디자인을 구성하는 창• UI element palette: Drag & drop 할 수 있는 UI 요소의 모음

추가 기능

• Master templates/components: 각 페이지마다 반복되는 UI 요소들을 별도로 관리, 구성하고 편집할 수 있는 기능

• Themes: 윈도우즈 환경, 브라우저 환경, 연필 스케치 등을 시각적으로 페이지 구성과 UI 요소에 표현해주는 스킨과 유사한 기능

• Custom shapes/patterns: 사용자가 추가적으로 구성한 UI 요소나 페턴을 라이브러리로 추가하고 관리할 수 있는 기능

• Functional flow design: 페이지 단위가 아닌 기능적 플로우 중심으로 사이트를 기획할 수 있는 기능

• Interactive mockups: 사이트의 프로토타입으 직접 UT를 진행할 수 있는 기능

• Code creation: 프로토타입에 대한 개발 가능한 코드를 생성시켜 주는 기능

Page browser

Annotations

Page windowUI elements

palette

Page 19: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

[그림2]����������� ������������������  프로토타입핑����������� ������������������  툴����������� ������������������  1차����������� ������������������  비교분석표

Overview

Page 20: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Evaluation Target

• 각 프로토타이핑 툴들은 mini-UX project를 수행을 통해 평가를 실시한다.

• 프로토타이핑 실시를 위해 타겟 사이트를 “삼성카드 개선”으로 선정하고 약식 UX 프로세스를 실행하고, 사이트 프로토타입을 제작면서 각 툴을 비교 평가 한다.

• 기획과 개발에 모두 유용한 세 가지 프로토타입핑 툴을 선별(SketchFlow, Axure Pro, Liferay) 이들 툴을 실제 프로토타이핑에 사용해보고, 활용 가능성을 평가한다.

[그림4]����������� ������������������  프로토타이핑����������� ������������������  대상인����������� ������������������  삼성카드����������� ������������������  웹페이지

Page 21: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Evaluation Process

Research &Planning

SketchFlowPrototyping

Axure ProPrototyping

LiferayPrototyping

Evaluation & Recommendation

Tool Review1 Tool Review2 Tool Review3

• 기획과 개발에 모두 유용한 세 가지 프로토타입핑 툴을 선별(SketchFlow, Axure Pro, Liferay) 이들 툴을 실제 프로토타이핑에 사용해보고, 활용 가능성을 평가한다.

• 유저 인터뷰를 통한 유저 시나리오를 작성하고 주요 페이지의 개선점을 도출하여 디자인을 프로토타이핑 한다.

유저인터뷰

타겟 유저 확인

주요 기능 도출

유저 시나리오 도출

플로우 스케치

프로토타이핑 실시

패턴 도출/제작

[그림5]����������� ������������������  약식����������� ������������������  UX����������� ������������������  프로세스

Page 22: UX4SWA Day 1: About UX Day 2: User Research Day 3 ...kosta.or.kr/mail/retrain/preview/LO14_Pattern_prototype.pdf · • 유저 인터뷰를 통한 유저 시나리오를 작성하고

Evaluation Criteria

• 본 평가에서는 활용 가능성을 평가하기 위해서 상황을 반영한 7가지 기본 평가 기준을 선정한다.

• Component Library: UX pattern 축적, 확산 및 효율적인 재활용이 가능하고 사용자 경험과 산출물의 일관된 퀄리티를 제공하기

위해 UX Component Library가 제작/편집 가능한가.

• Collaboration: 프로토타입을 동시에 여러 팀원들이 공동 작업할 수 있는 환경이 제공되는가.

• Documentation: 프로토타입을 문서화 작업을 손쉽게 할 수 있도록 산출물을 자동생성해주는 기능이 있는가.

• Annotation: 프로토타입의 기능을 협업하는 여러 인원과 클라이언트에게 효과적으로 커뮤니케이션 하기 위해 추가 설명을

덧붙일 수 있는가.

• RIA Prototyping: 급변하고 있는 인터넷 기술과 이에 따른 사용성과 사용자 몰입을 증대시키는 Rich Internet Application (RIA) 기술을 도입한 프로토타이핑이 가능한가.

• Source Code: 프로토타입을 소스코드가 접근 용이하고 개발작업을 하는데 기반이 될 수 있는가.

• Learning Curve: UX 인원의 교육을 통해 툴을 쉽게 학습하고 활용할 수 있는가.

이 평가 기준에 근거하여 각 단계마다 점수를 부여하여 Tool Evaluation Summary에 반영하였다.