(발제)designing the ipone user experience +에이콘출판-suzanne ginsburg /이제석 x 2012...

28
에이콘출판 이제석

Upload: snuuxlab

Post on 14-Jul-2015

43 views

Category:

Documents


0 download

TRANSCRIPT

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

에이콘출판

이제석

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

Designing the iPhone User Experience

Suzanne Ginsburg

이제석

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

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

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

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

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

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

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

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

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

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

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

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

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

영상, 게임

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

“디자인”≠시각디자인

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

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

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

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

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

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

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

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

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

9장. UI디자인

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

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

9장. UI디자인

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

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

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

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

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

가치 기능

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

9장. UI디자인

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

이름

즐겨 찾기

행동

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

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

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

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

9장. UI디자인

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

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

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

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

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

9장. UI디자인

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

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

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

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

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

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

9장. UI디자인

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

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

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

9장. UI디자인

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

애니 메이션

글자 알림

소리

전환 효과

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

9장. UI디자인

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

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

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

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

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

10장. 시각 디자인

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

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

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

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

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

10장. 시각 디자인

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

차별화 강조 분류

시각 구조

색상

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

10장. 시각 디자인

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

색상

그룹핑 체계 정렬

차별화 강조 분류

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

10장. 시각 디자인

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

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

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

10장. 시각 디자인

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

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

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

10장. 시각 디자인

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

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류

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

10장. 시각 디자인

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

시각 구조

색상

그룹핑 체계 정렬

차별화 강조 분류