(발제)Designing the Ipone User Experience +에이콘출판-Suzanne Ginsburg /이제석 x 2012...

Preview:

Citation preview

에이콘출판

이제석

Designing the iPhone User Experience

Suzanne Ginsburg

이제석

1장. 아이폰 앱 개요 유용성 앱 생산성 앱 몰입형 앱

1장. 아이폰 앱 개요 유용성 앱 생산성 앱 몰입형 앱

특정 유형의 정보를 신속하게 확인 / 간단한 태스크 수행 최소한의 설정 간단한 플로우와 레이아웃 표준사용자 인터페이스 요소

경기결과, 주식 시세, 날씨

1장. 아이폰 앱 개요 유용성 앱 생산성 앱 몰입형 앱

많은 기능 제공 계층적 구조 가속장치와 단축키 접속유지

정보검색, SNS, 지도 안내, 거래 및 조회

1장. 아이폰 앱 개요 유용성 앱 생산성 앱 몰입형 앱

게임, 미디어 감상, 전문적(단일) 태스크 컨텐츠 중심 맞춤화된 UX

영상, 게임

3장 사용자 리서치 소개 4장 사용자 리서치 분석 5장 경쟁사 분석 6장 앱 컨셉 탐구

7장. 앱 컨셉 프로토타이핑 프로토타입 = protos(첫 번째, 그리스어) + typos(인상, 그리스어) 최종 해결책이 나오기 전에 제작되는 디자인의 표현 일반적으로, 프로그래밍 코드를 작성하기 전에 수정을 할 경우 개발이 종료될 때까지 기다리는 경우보다 100배가량 비용이 적게 든다고 추정된다.

- 제이콥 닐슨, <종이 프로토타이핑:코딩 전에 사용자데이터 모으기>

7장. 앱 컨셉 프로토타이핑 디자인 문제 해결

상위 개념적 이슈에서 세부적인 인터랙션에 이르는 모든 사항을 다루는 데에 유용 인터랙티브한 프로토타입이 해결책을 세밀하게 수정하기에 더 효과적

디자인 아이디어 평가 컨셉, 플로우, 인터랙션 등 디자인 아이디어를 평가할 때.

디자인 아이디어 커뮤니케이션 앱 아이디어를 효과적으로 전달하는 방법으로써. 정적인 형태가 아닌 다양한 감각과 인터랙션을 통한 아이디어 전달/공유

7장. 앱 컨셉 프로토타이핑 디자인 문제 해결

상위 개념적 이슈에서 세부적인 인터랙션에 이르는 모든 사항을 다루는 데에 유용 인터랙티브한 프로토타입이 해결책을 세밀하게 수정하기에 더 효과적

디자인 아이디어 평가 컨셉, 플로우, 인터랙션 등 디자인 아이디어를 평가할 때.

디자인 아이디어 커뮤니케이션 앱 아이디어를 효과적으로 전달하는 방법으로써. 정적인 형태가 아닌 다양한 감각과 인터랙션을 통한 아이디어 전달/공유

“디자인”≠시각디자인

7장. 앱 컨셉 프로토타이핑 디자인 문제 해결

상위 개념적 이슈에서 세부적인 인터랙션에 이르는 모든 사항을 다루는 데에 유용 인터랙티브한 프로토타입이 해결책을 세밀하게 수정하기에 더 효과적

디자인 아이디어 평가 컨셉, 플로우, 인터랙션 등 디자인 아이디어를 평가할 때.

디자인 아이디어 커뮤니케이션 앱 아이디어를 효과적으로 전달하는 방법으로써. 정적인 형태가 아닌 다양한 감각과 인터랙션을 통한 아이디어 전달/공유

“디자인”≠시각디자인 =정보디자인

7장. 앱 컨셉 프로토타이핑 프로토타이핑 접근법

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

시작하기 정보를 보여줘라 유사 앱이 없거나 시작 전 초기화 설정/로그인이 필요한 앱의 경우

사용자 인터페이스에 주석을 달아라

선택적인 비디오 데모를 제공하라 무조건 데모를 보게 만들면 사용자를 화나게 할 수 있다.

가치 기능

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

이름

즐겨 찾기

행동

설정 게임, SNS 등 사용자 고유 ID가 필요한 경우

사용자 개개인이 Customize할 수 있도록

앱 이력과 같은사용자 행동에 기초해 UX를 개인화

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

스크린 Single Touch UI메뉴를 숨겼다가, 터치하면 메뉴가 나오게.

버튼이나 영역 누르기 특정 기능을 숨겼다 보여주면서, 시간이 지나면 UI메뉴가 단순화 되도록

스크롤 이용하기 스크롤 맨 위에 검색창 숨겨놓기, 당겨서 새로고침.

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

스크린 Single Touch UI메뉴를 숨겼다가, 터치하면 메뉴가 나오게.

버튼이나 영역 누르기 특정 기능을 숨겼다 보여주면서, 시간이 지나면 UI메뉴가 단순화 되도록

스크롤 이용하기 스크롤 맨 위에 검색창 숨겨놓기, 당겨서 새로고침.

UI 컨트롤을 숨겨 컨텐츠에 몰입시켜라.

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

똑똑한 기본 값을 제공하라 미리 정의된 목록을 포함하라 어울리는 내용을 제안하라 최근 활동/선택을 저장하라 음성과 이미지 인식을 사용하라

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

애니 메이션

글자 알림

소리

전환 효과

9장. UI디자인

반갑게 맞이하라 사용자를 이해하라 컨텐츠를 부각시켜라 빠른 선택을 돕고 오류를 줄여라 적절한 피드백을 제공하라 번거로움을 최소화하라

문제점을 설명하라 계속해서 로딩 아이콘만 보여주지 말고, 어떤 문제인지 설명하라

현 상태를 유지하라 네크워크가 갑자기 끊어진다고 해서 모든 기능이 멈추면 안된다. 일부 기능은 유지되어야 한다.

진행 중인 작업을 저장하라 모바일의 특성상 자동으로 저장하고, 복구하는 기능이 필요하다.

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상

초기 컨셉 단계에서부터 시각 디자인을 고려 사용자의 마음끌기 사용성 향상시키기

UI와 결합된 효과적인 시각디자인은 사용성을 향상시킨다. 사용자를 즐겁게 하기

UX에 즐거움을 더할 수 있다.

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상 그룹핑 체계 정렬

차별화 강조 분류

시각 구조

색상

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상 시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

10장. 시각 디자인

시각디자인의 중요성 시각구조 색상

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

Recommended