인터렉 아이폰 ux

1414538 박서희

Designing the iPhone User Experience

1. 아이폰 앱과

디바이스 개요

- 아이폰 앱 개요

- 아이폰 디바이스 개요

2. 아이폰 앱 정의

- 사용자 리서치 소개

- 사용자 리서치 분석

- 경쟁사 분석

3. 앱 컨셉 개발

- 앱 컨셉 탐구

- 앱 컨셉 프로토타이핑

- 앱 컨셉 사용성 테스트

4. 아이폰 앱 개선

- UI 디자인

- 시각 디자인

- 브랜딩과 광고

- 접근성과 현지화

아이폰 앱 스타일

유용성 생산성 몰입형

디자인 목표에 따라 프로젝트에 맞는 스타일을 선택하라




- 경쟁사 분석

유용성 앱의 특징

- 최소한의 설정

-> 처음 앱을 실행할 때부터 설정이 최소화되어야 함

- 간단한 플로우와 레이아웃

-> 쉽게 핵심정보를 찾을 수 있어야 함

- 표준 사용자 인터페이스 요소

-> 표준에서 벗어난 인터페이스 앱 사용속도를 저해시킴

1. 아이폰 앱과

디바이스 개요




- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인






- 경쟁사 분석

생산성 앱의 특징

- 계층적 구조

-> 목록과 상세보기를 통해 다른 섹션으로 이동가능함

- 가속장치와 단축키

-> 문자입력과 입력오류를 최소화해야함 ex) 맞춤법 검사, 검색어 자동완성

1. 아이폰 앱과

디바이스 개요




- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인






- 경쟁사 분석

몰입형 앱의 특징

- 컨텐츠 중심

-> 주요 콘텐츠에 집중하도록 컨트롤 버튼을 숨길수 있음 ex) 동영상을 볼때 재생버튼을 숨기거나 노출가능함

- 맞춤화된 UX

-> 어떤 종류의 앱스타일보다 게임, 미디어 감상이 편함

1. 아이폰 앱과

디바이스 개요




- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인






- 경쟁사 분석

1. 아이폰 앱과

디바이스 개요


- 아이폰 디바이스 개요아이폰과 아이팟 터치기능

- 멀티 터치 디스플레이

-> 손가락 움직임으로 인터랙션 ex) 탭, 더블 탭, 드래그, 확대, 축소 등

- 조도, 근접성, 움직임 센서

-> 환경의 조도, 얼굴의 근접성, 가속도계에 따라 디스플레이 조정

- 위치, 방위정보

-> 위치와 방위정보를 결합해 내비게이션 시스템 제공


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인






- 경쟁사 분석

아이폰과 아이팟 터치기능

- 블루투스

- 사진, 비디오 카메라

-> 이미지 캡쳐, 향상, 인식

- 마이크, 스피커

1. 아이폰 앱과

디바이스 개요




- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

사용자 리서치

- 사용자 니즈 이해

- 사용 컨텍스트

-> 어디서, 왜, 언제 앱을 사용하는지 알 수 있음

- 인식

-> 앱 구입, 사용에서 발생하는 인식과 관련된 문제를 알 수 있음

ex) 모바일뱅킹이 안전하지 않다는 인식 -> 앱 수정


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요


- 아이폰 디바이스 개요사용자 리서치

- 문제점

-> 현재 작업흐름에서의 문제점 발견할 수 있음

- 언어와 명명법

-> 특정 전문용어로 인터페이스 구성

- 규범

-> 일반적인 사회적 행동 파악가능함




- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

사용자 리서치 방법

그림자 기법

- 조사자가 참가자를 따라다니면서 관찰내용 기록

-> 시간이 오래 걸릴수 있음, 사생활 문제

일기연구

- 참가자가 며칠에 걸쳐 자신의 활동 기록


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요



사용자 인터뷰 - 전문가 인터뷰

- 전화 인터뷰

- 길거리 인터뷰

사용자 인터뷰 기록

- 노트 - 카메라 - 비디오

- 수기노트 - 오디오

사용자 리서치 방법




- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석리서치

계획인터뷰 자료 캡쳐 결과 공유

사용자 리서치


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

사용자 리서치 분석방법

- 풍부한 자료 공유

-> 인터넷상 공유/ 물리적 공간활용

- 노트 분석

ex) 수기노트, 대본, 말한 그대로 옮긴 노트 정리

- 시사점과 아이디어 기록

-> 디자인 원칙 제안, 디자인 컨셉 기록

ex) 포스트잇 부착 -> 쉽게 확인가능


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

사용자 리서치 분석방법

- 발견점 보고

-> 판독의 어려움, 기억의 어려움 -> 흥미로운 내용에 대한 보고서 작성 + 사진 캡쳐, 비디오 첨부

- 디자인 도구 제작 - 퍼소나

- 시나리오

- 사용자 여정맵

- 제품 정의서 수정


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

퍼소나

- 많은 사용자들의 니즈를 대변하는

전형적인 사용자 프로필

-> 판독의 어려움, 기억의 어려움 -> 흥미로운 내용에 대한 보고서 작성 + 사진 캡쳐, 비디오 첨부

- 이름, 나이, 직업, 주소

- 태도, 활동

- 작업흐름

- 문제점과 불만, 목표


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

시나리오

- 퍼소나가 목표를 달성하기 위해

어떻게 앱을 사용하는가

-> 사용자 인터페이스 작성에 유용 -> 해결책과 사용성 이슈간의 격차를 발견할 수 있음

- 동기

- 컨텍스트

- 방해요소

- 목표


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

사용자 여정

- 리서치 발견점을 공유하는 효과적인 방법

-> 시간대별 앱 사용행태에 이르는 UX전체 -> 퍼소나 니즈에 기반한 디자인 요구사항


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

경쟁자 분석

- 피해야 할 접근 방식을 찾을 수 있음

-> 사용자니즈를 경쟁사에서 어떻게 만족시키는지 -> 투자자에게 앱을 홍보할 떄

니즈

지원표

2×2

다이어그램

휴리스틱

평가

경쟁사

벤치마킹


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

니즈 지원표

- 경쟁사가 현재 사용자 니즈를 충족시켜주는지

보여주는 방법

-> 니즈 충족여부를 예/아니오로 체크

2×2 다이어그램

- 전반적인 앱 구도를 보여줌

-> 앱을 정의하는 두개의 축을 기준으로 경쟁사분류 ex) 집중적인 ↔ 일반적인


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

휴리스틱 평가

- 사용자 시나리오에 맞춰 인터페이스 사용

-> 잠재적 휴리스틱 -> 사용 시나리오 -> 평가장소(시뮬레이션) -> 발견점 기록/ 문서화

경쟁사 벤치마킹

- 경쟁앱에서 특정태스트를 사용자가 얼마나

잘 수행했는지를 정량적으로 측정하는 방법

-> 실수 횟수 -> 태스크 완료 소요시간 -> 태스트 성공여부


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1414538 박서희

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

효과적인 브레인스토밍

-> 목표 설정(전체 앱인지 입의 특정 부분인지) (신규 아이디어인지 기존 아이디어인지)

-> 포괄적인 분야의 사람들과 작업

-> 아이디어 기록 -> 유망 아이디어 선택

컨셉 스케치

-> 최소한의 세부사항만 스케치 -> 비율에 맞게 그린다 -> 주요 태스크, 기능, 작업흐름을 포함하는 스케치


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



스케치 유형

- 다이어그램 -> 한정적, 추상적인 스케치

- 포스터 -> 앱 이름, 홍보, 영감, 경험 스케치로 구성됨

- 앱 화면 -> 그림과 간단한 글, 온라인상에서 확인가능

- 스토리보드 -> 장면별 이미지, 사용자 행동이 들어감

-> 문제점, 누락된 부분을 찾기 쉬움

- 만화 -> 사용자, 환경, 화면, 기기 모두가 들어감

-> 시나리오 장면구성, 설득력 있는 퍼소나

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



프로토타이핑

- 디자인문제 해결

-> 본격적인 코딩에 앞서 디자인 문제를 해결하는 방법

- 디자인 아이디어 평가

-> 디자이너, 사용자등이 하는 내부평가

- 디자인 아이디어 전달

-> 정적인 스케치가 아닌 실물처럼 느껴짐 -> 앱 아이디어를 효과적으로 전달

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



프로토타이핑 접근법

장점 단점

종이

기기상의

정지이미지

기기상의

인터렉티브

비용↓ 시간↓

아이폰 외형과 일치

텍스트 크기확인 가능

아이폰 외형과 일치

인터렉티비티 제공

상세 인터랙션을

보여주기 어려움

클릭을 통한

스크린이동만 가능

시간이 많이 소요

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



프로토타이핑 접근법

장점 단점

비디오

아이폰

SDK

스토리텔링 형식

최종 앱 디자인에

활용가능

시간이 많이 소요

비용↑

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



사용성 테스트

- 사용자가 태스크를 수행하면서

제품을 조작하는 모습을 관찰하는 것

- 앱 코딩에 앞서 사용자 의견을 통해 밝혀진

디자인 문제점을 발견

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



- 디자인문제 해결

- 디자인이슈 발견

-> 디자인이슈를 객관적으로 발견할 수 있음

- 후속편 출시를 위한 정보수집

-> 대표적인 이용층의 의견 -> 디자인 개선방향을 알수 있음

사용성 테스트 역할

1414538 박서희

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



사용성 테스트 방법

전통적인

사용자테스트RITE 방법

종이

프로토타입

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인



전통적인 사용자 테스트

- 사용자가 태스크를 수행하면서

제품을 사용하는 모습을 관찰

-> 사용자 - 생각을 소리내어 읽어야함 참가자 행동의 숨은 이유를 찾기 위함

RITE 방법

- 신속한 변경과 변화의 효과검증을 강조

-> 개별 참가자 세션을 마칠때마다다 디자인을 개선


- 앱 컨셉 탐구



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



종이 프로토타입 평가

- 진행자, 컴퓨터, 촬영자(필기자)자가 필요

- 참여적 디자인 -> 사용자가 적극적으로 디자인에 기여 가능 -> 사용자가 레이아웃이나 탭 바 항목 이름수정 가능

-> 포스트잇, 펜 등을 준비

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



- 사용성 테스트 계획

-> 목적과 목표 -> 연구 일정

-> 사용자 프로필

-> 방법

-> 조사를 위한 질문

-> 역할

-> 프로토 타입 준비물

-> 보고서 컨텐츠

사용성 테스트 일정

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인



- 참가자 모집

- 토의 가이드 작성 -> 소개

-> 개인 배경 인터뷰

-> 태스크 수행

-> 후속질문

-> 마무리



- 앱 컨셉 탐구



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인



- 파일럿 세션 -> 모의 테스트

- 사용성 테스트 진행 -> 가이드에 맞춰 사용자를 끌어들일 시점 결정

- 분석하기 -> 사용자 조사자가 분석

-> 객관성을 위해 디자이너는 참여하지 않음

- 발표하기



- 앱 컨셉 탐구



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- UI 디자인

- 시각 디자인




- 앱 컨셉 탐구



- 인터페이스는 곧 첫인상

- 사용자의 부정적인 경험을 막기위해

인터페이스 개선에 시간을 투자해야 함

사용자 인터페이스 디자인

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 반갑게 맞이하라

- ‘시작하기’ 정보를 보여줘라 -> 짧은 문장으로 앱을 설명하는 시작화면 제공

- 사용자 인터페이스에 주석을 달아라 -> 간결한 주석을 제공

- 선택적인 비디오 데모를 제공하라 -> 앱 영역 정의, 인터페이스 설명

-> 무조건 데모를 보게 만드는 것은 사용자를 화나게 할수 있음

사용자 인터페이스 우수사례

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



2. 사용자를 이해하라

- 이름 -> 사용자의 이름이나 아이디를 표시해줌

- 설정 -> 자주 쓰는 설정은 앱 내부에 있을 것

-> UX개인화

- 즐겨찾기 -> 자주 쓰는 항목 저장


1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

3. 컨텐츠를 부각시켜라

- 스크린 누르기 -> 사용자 인터페이스 컨트롤을 모두 숨길 때 사용

- 버튼이나 영역누르기 -> 사용자 인터페이스 컨트롤 중 일부가 숨겨졌을 때 사용

-> 공간의 제약이 있을 때 효과적

- 스크롤 업하기 -> 스크롤을 멈추고 헤더 바로 밑에 컨트롤 표시



- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



4. 빠른 선택을 돕고 오류를 줄여라

- 똑똑한 기본값을 제공하라 -> 입력작업을 많이 줄여줌

- 미리 정의된 목록을 포함하라 -> 문자입력을 최소화

- 어울리는 내용을 제안하라 -> 사용자가 정보를 입력할 때마다 그에 맞는 내용제안을 고려


1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



4. 빠른 선택을 돕고 오류를 줄여라

- 최근 활동/선택을 저장하라 -> 이후 활용을 고려해 정보를 저장

- 음성과 이미지 인식 -> 검색어로 말하기


1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



5. 적절한 피드백을 제공하라

- 애니메이션 -> 컨텐츠 다운로드, 이동 중, 마지막을 알리는 피드백

- 전환효과 -> 화면 간의 이동 시에 제공되는 피드백

- 글자알림 -> 시각적 피드백이 확실치 않을 떄

- 소리


1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

6. 번거로움을 최소화하라

- 문제점을 설명하라 -> 문제점과 해결방법을 알려줌

- 진행중인 작업을 저장하라 -> 마지막 화면과 관련 컨텐츠 유지

-> 복구, 초안 저장 기능



- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

- 사용자의 마음끌기 -> 크기가 크고 색채가 풍부한 디자인이 끌림

- 사용성 향상시키기 -> UI와 결합된 효과적인 디자인은 사용성을 향상시킴

- 사용자를 즐겁게하기 -> 디자인적 요소가 즐거움을 더함

시각디자인의 중요성


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

- 그룹핑 -> 관련된 시각요소를 묶어 이해도 높임

ex) 대조되는 배경색상

- 체계 -> 디자인 내에서 해석순서 확립

-> 두드러지는 시각요소/그룹 먼저 보임(위치, 크기 비교)

- 정렬 -> 좌측/ 우측 정렬

-> 일관된 정렬 - 전체적인 앱 디자인 통일

시각 구조


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



- 색상 -> 연관된 문화, 환경 고려해서 색상 선택

- 글자 -> 서체, 크기, 색상, 두께

- 아이콘과 그 외 이미지 -> 보편성, 일체성, 전달성을 가져야 함

시각 구조 강화

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

- 차별성 -> 브랜드를 타 경쟁 브랜드보다 두드러지게 만드는 것

- 관련성 -> 브랜드 표현이 해당제품에 적절한지

- 기억 용이성 -> 사람들이 브랜드를 기억하는 정도

- 확장성 -> 미디어, 문화, 메시지 유형으로 브랜드표현을 확장할 수 있는지

브랜딩


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석


- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



- 이름짓기 -> 차별성, 간결성, 적정성, 쉬운 철자와 발음,

호감성, 확장성, 보호성

- 상표 -> 로고(페이스북), 심볼(애플), 모노그램(각 단어 첫글자)

- UX를 통한 브랜딩 -> 특징적인 인터래션으로 브랜드 강화

브랜드 표현

1. 아이폰 앱과

디바이스 개요






- 경쟁사 분석

- 장애가 있는 사람/ 제약을 받는 일반인 -> 확대, 모노 오디오, 보이스 컨트롤 등의 접근성 기능

-> 안전성, 사용성↑

접근성

- 지역에 상관없이 어디든지/ 특정 지역 대상 -> 언어 -> 동적 컨텐츠

-> 문화 -> 지역 법규

세계화/ 현지화3. 앱 컨셉 개발

- 앱 컨셉 탐구




- UI 디자인

- 시각 디자인



1414538 박서희

THE END