ux4swa day 1: about ux day 2: user research day 3...
Post on 02-Feb-2020
1 Views
Preview:
TRANSCRIPT
UX4SWA
Day 1: About UX Day 2: User Research Day 3: Information Architecture Day 4: Prototyping & Patterns Day 5: Usability Testing
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
Sketch & Prototype
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!
Tom Wujec: Build a tower, build a team
Lesson 1: PROTOTYPING MATTERS.
Lesson 2: DIVERSE SKILLS MATTER
Lesson 3: INCENTIVES MAGNIFY OUTCOMES
Why Sketch & Prototype
Mind Sketchrepresentation
Create(seeing that)
Read(seeing as)
MindOthers
Collaboration
- 적당한 매체일것 Appropriate- 익숙할 것 Dexterity- 시작부터 From the beginning- 자주할 것 As often as possible
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.
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)
Why Sketch & Prototype
Usa
bilit
y
Idea
tion
Sketch Prototype
멘탈 시뮬레이션 (개인:5분)
‘다이어트 머신’
SOUP: S구조, O상황, U사용자, P표현
Social Network Sketch
a. 종이를 네 번 접고 각 단에 영화 한 개 씩을 적는다.
b. 옆 사람에게 돌리고 주어진 문장에 댓글, 설명,링크 등을 첨가한다.
c. 2바퀴 돌린다.
Exquisite Corpse절묘한 토막들
Paper Prototyping
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!
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
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
[그림2]����������� ������������������ 프로토타입핑����������� ������������������ 툴����������� ������������������ 1차����������� ������������������ 비교분석표
Overview
Evaluation Target
• 각 프로토타이핑 툴들은 mini-UX project를 수행을 통해 평가를 실시한다.
• 프로토타이핑 실시를 위해 타겟 사이트를 “삼성카드 개선”으로 선정하고 약식 UX 프로세스를 실행하고, 사이트 프로토타입을 제작면서 각 툴을 비교 평가 한다.
• 기획과 개발에 모두 유용한 세 가지 프로토타입핑 툴을 선별(SketchFlow, Axure Pro, Liferay) 이들 툴을 실제 프로토타이핑에 사용해보고, 활용 가능성을 평가한다.
[그림4]����������� ������������������ 프로토타이핑����������� ������������������ 대상인����������� ������������������ 삼성카드����������� ������������������ 웹페이지
Evaluation Process
Research &Planning
SketchFlowPrototyping
Axure ProPrototyping
LiferayPrototyping
Evaluation & Recommendation
Tool Review1 Tool Review2 Tool Review3
• 기획과 개발에 모두 유용한 세 가지 프로토타입핑 툴을 선별(SketchFlow, Axure Pro, Liferay) 이들 툴을 실제 프로토타이핑에 사용해보고, 활용 가능성을 평가한다.
• 유저 인터뷰를 통한 유저 시나리오를 작성하고 주요 페이지의 개선점을 도출하여 디자인을 프로토타이핑 한다.
유저인터뷰
타겟 유저 확인
주요 기능 도출
유저 시나리오 도출
플로우 스케치
프로토타이핑 실시
패턴 도출/제작
[그림5]����������� ������������������ 약식����������� ������������������ UX����������� ������������������ 프로세스
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에 반영하였다.
top related