UX&UI 기획 11강

UI 스토리보드 작성과 UI 상세설계 가이드

*스토리보드(Storyboard)

UX 구현에 수반되는 사용자와 태스크, 인터페이스 간 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자

완성해야 할 앱비스와 예상되는 사용자경험을 미리 보기 위한 방법론

기본적으로 그림을 통해서 전반적인 이야기를 전달

*스토리보드의 목적

앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립해나가는 과정

실제 개발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정

*스토리보드의 활용

UX 스토리보드의 작성 프로세스

사용자 시나리오를 시각화하면서 평가(사용자경험이 어떻게 전달되는지)하는 과정을 거친다.

사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다.

UX Concept - (1)기능-(2)순서-(3)관계-(4)구조-(5)설계-(6)연결-(7)검증 - 디자인,개발

*UX 스토리보드 작성 프로세스

Feature list > User Task-flow > Information Architecture(IA) > Wireframe > Workflow

Feature list : UX concept/UX Needs의 구현에 필요한 기능 리스트

User Task-flow : 해당 기능수행과 사용자의 행위 매핑 및 흐름도

Information Architecture(IA) : 정보의 구조화와 위계관계망(우선순위)

Wireframe : 해당기능 구현을 위한 인터페이스 요소의 배치와 화면구조

Workflow : 여러 개의 와이어프레임 또는 개별 기능 간 화면 전환 흐름도

*UI 상세 화면 설계 프로세스

Feature list > Task-flow > Process Diagram > IA > Wireframe > Workflow

UI 구현에 수반되는 앱시스템, 서비스, 장치 등 인터페이스 Feature 목록을 나열하고 앱 개발에 필요한 기능들을 추출하고 우선순위를 저의하는 단계

-사용자의 니즈를 충족시키기 위한 앱의 기능들을 나열

-우선 순위 설정 방법에 따라 기술된 기능의 우선순위를 정한다.

-기능간의 포함관계를 고려하여 삭제 및 추가한다

-정의된 기능들에 대해 우선순위를 설정한다.

User Task-flow 작성 단계

기능수행을 위한 사용자의 행위 순서(흐름)로 나열하고 검증하는 단계

새롭게 제공할 사용자 경험의 연속된 흐름(Task Flow)을 정의

시나리오를 토대로 Task와 그 Task시에 필요한 Tool(콘텐츠 or 기능)들을 정의

Task Flow를 분석하여 새롭게 만들 정보구조의 특징과 체계를 세움

Process Diagram 작성 단계

각 기능들 사이 관계(조건과 실행)를 정립하여 UI와 사용자 테스크 흐름의 구조화 매칭

IA 구조화 단계

각 기능들을 정보의 위계와 관계망으로 구조화하기

Wireframe 설계 단계

해당기능 구현을 위한 인터페이스와 실제 화면에 그려보기

앞서 정의되었던 중요도, 관계, 위계 질서에 따라 ui 단위의 상대적인 크기나 위치를 결정

전체 큰 레이아웃에서 하위 단계로 내려오며 디자인(Pattern->Component)

이후 검색창과 버튼, 검색결과 목록, 관계 정보와 같은 세부 ui element를 정의

현재 화면에서 빠진 기능이나 ui요소는 없는지 확인해본다.

Workflow 설계 단계

화면전환 및 화면 간 상호작용 및 시뮬레이션

연속된 화면을 살펴보면서 앱 사용절차 검증

정의된 화면 별로 각 버튼이나 컴포넌트의 동작에 의해 필요한 추가화면 연결

순서에 맞게 배열ㄹ된 화면 단위로 시뮬레이션을 해보면서 앱 사용절차를 검증