스마트폰 앱 UX/UI 디자인

스마트폰 앱 UX/UI 디자인

UI, UX의 정의

최종 사용자를 대상으로 제품/서비스가 디자인 되어야 한다. 컨텍스트는 제품 혹은 서비스를 이용하게 되는 사용자의 상황에서 육하원칙을 대입해서 생각해보는 방식이다. 인간 속성, 디바이스 특성, 비즈니스 목적이 조화롭게 개발/디자인 되어야 한다.

UX 디자인의 정의

실제 그 제품을 사용하는 사용자를 대상으로 하여, 제품/서비스와 접하고 사용하는 모든 과정에 대해 사용자가 만족할 수 있는 가치를 제공하도록 디자인하는 것

스마트폰 앱의 UX 중요성

사용자의 특성

실내/실외 등 다양한 상황에서 스마트폰 앱을 사용하는 경우가 많다. 단순히 날씨 하나만을 위한 앱, 사진만 찍는 앱 등 사용자의 니즈는 데스크톱 앱에 비해 훨씬 적고 명확한 기능을 원한다.

스마트폰 앱 개발의 특성

개발자의 관점과 사용자 관점의 차이

UI의 의미

제품의 물리적인 형태인 PUI, 소리로 정보를 전해 주는 AUI, 시각의 측면으로 조작 정보, 콘텐츠를 표혀하는 GUI로 구성

인터렉션 디자인과 GUI의 이해

인터랙션 디자인이란 무엇인가

사용자는 제품과 소통하고, 그 소통 방식과 피드백을 인터랙션이라 한다. 인터랙션은 사용자의 행동에 반응하는 동작을 의미하며 통합적으로 진행된다.

어포던스의 이해

형태에 따라서 자연스러운 행동이 유도되고 그 행동은 학습(과거 혹은 현재)을 통해서 원하는 기능을 제공해주고, 사용자는 의도한 방식으로 사용을 마칠 수 있다.

UX/UI 디자인 프로세스의 이해

GUI의 기본 구성 요소로는 컬러, 타이포그래피, 레이아웃이 있다. 단순히 디자이너가 원하는 스타일로 디자인하는 것이 아니라, GUI 디자인 또한 사용자와 비즈니스 목표를 염두해 두고 디자인 되어야 한다.

UX 디자인의 적용

개발자는 사용자에게 필요한 기능, 콘텐츠 등에 중점을 두는 것 보다는 구현 가능한 기술, 내가 볼 수 있는 문제점에만 중점을 두어서 개발하는게 일반적이다.

시장 초기(구현 중심) → 시장 후기(차별화 중점)

UX 디자인 관점을 도입하는 경우는, 사용자부터 시작하여 디자인/기획을 하기 때문에 보다 근본적인 개념에서의 제품/서비스 개발이 이루어질 수 있다.

오포던스(Affordance)

• 사용자가 해당 제품의 동작 연계를 쉽게 인지할 수 있는 형태로 디자인을 하게 되면, 사용자는 자연스럽게 행동을 하게 됨.
• 인터랙션 디자인에 있어 굉장히 중요한 요소로써, 이를 통해 사용자는 의도한 방식대로 쉽게 사용을 마칠 수 있게 됨

스마트폰 앱 UI 디자인 패턴의 이해

UX 디자인 방법론이란

1. 사용자 조사 리서치
2. 분석, 모델링
3. 페르소나
4. 스토리보드
5. 프로토타이핑

UX는 사용자를 구체화하는 과정 화면에 콘텐츠/기능적 요소들을 배치하는 UI는 다른 개념

사용자 조사/리서치

인터뷰, 문헌연구, PEST 분석, 사례 연구를 통해 사용자의 니즈와 불편 사항을 도출하고 외부적 상황을 파악. 아울러 사례 연구를 통해 스마트폰 앱의 범주와 형태를 구체적으로 파악

어피니티 다이어그래밍

어피니티 다이어그래밍을 활용하여 페르소나와 내부 실무진들의 의견을 반영하여 분류하고 구성할 수 있도록 한다.

페르소나

사용자 중심 디자인을 위해, 실제 사용자로부터 얻은 정보를 재구성하여 대표 사용자인 페르소나를 구축한다.

시나리오/스토리보드

사용자가 스마트폰 앱을 사용하는 시나리오를 작성하고, 그에 맞는 스토리보드를 그려서 컨텍스트의 요소를 도출한다.

프로토타입 스케치

스토리보드에 적용되는 스마트폰 앱 페이지를 종이와 펜을 사용하여 스케치를 통해 구조화 UI 단계로 넘어가는 과정이며, UI 스토리보드, 메인 페이지 스케치도 이 범주에 포함

UI 사용자 테스트

최종적으로 기획한 스마트폰 앱 프로토타입을 사용자를 대상으로 테스트할 수 있는 방법을 학습

UX 디자인 프로세스의 의미

출발 지점과 도착 지점을 정하고, 해당 목적지까지 도달하기 위한 경로를 기획하는 것과 유사하다. 구체적인 행동과 역할, 방법 등이 필요한다.

초기 기획과 달라질 수도 있는 점을 미리 감안하고 어느 정도 융통성 있게 프로젝트를 진행하는 자세가 필요

IDEO

'확산과 수렴'이라고 하는 (기회) 목색과 (정리) 수렴 단계를 반복하며 결과물을 만들어 가는 과정

1. 발견 Discovery
2. 해석 Interpretation
3. 아이데이션 Ideation
4. 실험 Experimentation
5. 향상 Evolution

사용자 조사 및 리서치

PEST 방법론 (거시환경분석)

Political(정치적), Economic(경제적), Social(사회적), Technological(기술적) 요소를 포함하여 분석 경우에 따라서 Lega(법적), Environmental(환경적) 요소들을 포함하여 PESTLE 혹은 PESTEL로 부르기도 한다. 환경 파악에 핵심적인 요소를 지정하여 파악하는 방법으로 제약, 기회, 진행 방향 등을 파악하는데 있어 효과적

어피니티 다이어그래밍을 활용한 모델링

리서치 결과는 기준별로 정리

• 이슈 기준 정리
• 컨텍스트 기준 정리
• 사용자 경험 기준 정리

리서치 결과를 정리한 후에, 프로젝트에 필요하고 사용자에게도 가치를 줄 수 있는 주요 내용을 도출하여, 최종적으로 핵심 가치를 도출할 수 있어야 함. 어피니티 다이어그래밍을 통해 데이터를 정리하고 재배열해서 상위 개념을 도출하는 모델링을 진행할 수 있음.

어피니티 다이어그래밍

여러 정보들을 재배치하여 의미있는 결론을 이끌어 내는 방식 그룹핑과 헤더가 기본적인 구조화 방식이라 할 수 있다. 포스트잇 색상별로 사용 (노란색: 낱개 정보)

어피니티 다이어그램의 진행 주의사항

• 간결하고 짧은 어투로 기록한다.
• 범주를 잡지 못하는 어피니티 노트들은 잠시 다른 곳에 둔다.
• 헤더는 적절한 범위를 내재해야 한다. 너무 많은 요소를 포함하고 있는 상위 개념이거나, 너무 좁은 범위는 좋지 않다.
• 진행시 프로젝트 팀원들이 모두 참여하는 것이 좋다.
• 컴퓨터에서 디자인툴이나 문서툴을 사용하는 것보다 직접 적어서 붙이고 토론하고 정리하는 것을 권장한다.
• 목소리 높은 사람이 주도하는 것이 아니라, 노트에 적어서 붙이고 이를 통해 의견을 정리하도록 한다.

페르소나 구성

각기 다른 관점에서 사용자를 인식하므로 공통된 사용자의 모습을 갖기 위해서 페르소나를 활용한다. 페르소나란 제품/서비스를 대표할 수 있는 가상의 사용자를 구성하여 제품/서비스/개발/기획/디자인 전반에 걸쳐 사용자의 관점을 적용하는데 사용한다.

페르소나 구성시 사용자를 이해할 수 있는 다양한 정보를 기록한다.

• 주요특징
• 사진
• 사용자 스토리
• 기타 추가 정보

페르소나의 구성시 주의 사항

• 각 페르소나들은 서로 구체적인 차이점을 가지고 있어야 한다.
• 실제 사용자와 같은 느낌을 전달해야 한다.
• 제품/서비스 프로젝트와 직접적인 연관성이 있어야 한다.
• 적절한 수의 페르소나를 구축
• 1회 사용하고 버리지 않는다.
• 일부 부서에서만 공감하면 안 된다.
• 주요 페르소나와 부가 페르소나로 구분
• 구체적인 시사점을 제공
• 동기, 시나리오, 콘텐츠, 기능 등을 도출

시나리오 작성과 스토리보드 구성

페르소나가 제품/서비스를 사용하는 상황을 텍스트로 구체화한 것이 시나리오

시나리오의 구성

• 제품과 접점이 되는 경우에 대한 내용을 중점적으로 기술
• 텍스트로 구성, 6하원칙(컨텍스트)에 최대한 맞춰서 기술
• 페르소나가 중심으로 기술
• 유저 스토리와도 유사한 개념, 구체적인 니즈와 동기, 감정적인 부분도 기술
• 과장하거나 지나치게 감정적인 내용을 쓰지 않는다.

스토리보드의 구성

실제 사용자가 제품/서비스를 사용하는 상황을 시각적으로 표현

6하원칙 및 사용자의 감정과 제품/서비스에서 전달하고자 하는 기능/가치가 표현된다.

• 사용자는[WHO]는 백화점[WHERE]에서 신발을 찾고자 함 [WHAT]
• 이 때, 백화점 앱을 사용하여 신발 파는 곳을 찾아낸 후 [HOW]
• 제품을 공유 기능을 통해 페이스북에 제품 정보를 공유 [HOW]

스토리보드의 구성 시 주의 사항

• 반드시 그림을 잘 그릴 필요는 없다.
• 경우에 따라 동영상으로 제작하거나 완성도를 더욱 높일 수도 있다.
• 하나의 페르소나라도 다양한 시나리오가 존재, 여러 개의 스토리보드를 그릴 수 있다.
• 기획 초기 단계의 경우에는 구체적인 기능, 항목, 인터페이스를 표현하는 것을 자제하는 게 나을 수 있다. (기능적 한계가 나올 수 있다.)

프로토타입 스케치

실제 제품을 제작하기 이전에 사전 테스트하는 목적으로 만드는 시제품의 형태를 의미 프로토타입의 제작과 프로토타이핑은 테스트를 목적으로 한다.

출처

• SK 동반성장아카데미
• Origami Studio — Design Prototyping
• STUDIO | The next generation design tool