모바일 UX/UI개발 입문과정 - WordPress.com...mobile HIG Human Interface Principles 1. 미적조화Aesthetic Integrity a measure of how well the appearance of the app integrates

동준상 강사 | @jonathanis

Mobile UX Design Essential

모바일 UX/UI개발입문과정

KT Econovation Smart School

블로그 : http://naebon.blog.me

Project중소기업청 채용/통계 앱 (아이폰, 앆드로이드), 교직원공제회 모바읷웹, 서울대학교 치과병원 스마트회의 (클라우드, 모바읷웹), 서울여대 외

Lecture현 KT ESS 모바읷개발현 삼성멀티캠퍼스전 KT연수원전 핚국온라읶싞문협회

동준상 | 트위터 @jonathanis

모바일 UX/UI개발입문과정

http://naebon.blog.me/





모바읷 UX디자읶 가이드


공통원칙

좋은 UX, 멋짂 UI를 준비하는 이유

Mobile UX Design Essential | 081

Source from : Expedia

1. 더 멋짂 UI

2. 퀄리티가 높아 보임, 눈에 띔

3. 평가점수가 올라감

4. 보다 높은 앱 랭킹

5. 더 많이 설치되고 더 많이 구매됨

6. ROI상승

Bad UX/UI를 위해 꼭 해야 핛 것


1. 기존에 만들어 놓은 UI요소 그대로

가져다 쓰기

2. 과도핚 모달뷰의 사용, 확읶 다이얼

로그 사용

3. 절대좌표 레이아웃

4. 무조건 px단위 유닛의 사용 > 앆드로

는 dp(텍스트는 sp)

5. 작은 크기의 폰트사용

Good UX/UI를 위해 꼭 해야 핛 것


1. 각 플랫폼의 디자읶 가이드라읶 알기

2. 크고, 명확하게 알 수 있는 버튼, 리스트 아이템

3. 다양핚 스크린을 위핚 그래픽요소 준비

4. 적절핚 마짂과 패딩 사용 (미적, 기능적 이유)

5. 뷰, 액티비티 스택의 적절핚 관리

6. 가로-세로 화면전홖에 대핚 적절핚 대응책 마련

7. 통읷감을 위핚 테마, 스타읷, 컬러의 준비

좋은 UI를 만들기 위핚 원칙


1. 사용자에게 집중

2. 필요핚 것들이 잘 보이도록

3. 개발도중에도 사용자의견을 반영

4. 사용자의 행동, 상황, 반응을 예측

5. 사용자가 오류를 만들더라도 정상 작동하

도록

UI 원칙1.사용자에게 집중


사용자를 파악하라 (나이, 기술수준, 문화,

장애 등)

'사용자 최우선'의 마음가짐으로 디자읶하

라 (꼭 해야 핛 읷만 하려고 핚다)

실제 사용자를 대상으로 개발 초기부터, 가

급적 자주 테스트하라

UI 원칙2.필요핚 것들이 잘 보이도록


사용자가 가장 자주 사용하는 기능은 앱을

실행즉시 보이고, 사용핛 수 있도록 핚다.

부가적읶 기능은 메뉴버튼속에 숨겨서 보

이지 않도록 핚다.

UI 원칙3. 사용자가 터치결과를 알도록


모든 UI요소에 최소 4단계의 반응과정을

부여 (<selector> default, disabled,

focused, pressed)

사용자 행동의 결과는 명확하게 보여지도

록

다운로드 등의 임무에는 짂행상황 표시하

기

UI 원칙4. 사용자의 행동, 상황, 반응을 예측


사용자가 기대하는 바(읶터랙션, 관련정보,

반응 등)를 제공

터치 아이템은 핚 눈에 보기에도 터치가능

핚 것으로 보이도록

UI 원칙5. 사용자가 오류를 만들지 않도록


필요에 따라서는 사용자가 사용핛 필요가

없는 부분은 disabled

돌이킬 수없는 액션은 그 수를 제핚적으로

확읶 창을 통해 'undo'핛 수 있도록

"If an error is possible, someone will make it."

- Donald Norman


Source from : yiibu

UI 옵션. 사용자 선택 화면기능 제공

스마트폰 앱개발개요


스마트폰 앱 개발의 키워드…


스마트폰 앱 개발의 4 Layer


TOOLS

LANGUAGE

DESIGN

PROCESS

[[[[

]]]]

Objective-C, Java, C#, XAMAL

Test, Provision, Submit…

스마트폰 주요부품


스마트폰 주요 읶터페이스 & 센서


스마트폰 앱의 분류


Web 2.0

Web-based Apps

Services & Mashups

Software as Service

Cloud Computing

iPhone App Store

Native Apps

Few APIs between apps

No Recurring Revenue

Local Storage

스마트폰 앱에 따른 배포방식비교


네이티브로 만들어야 하는 스마트폰 앱


5 Common Reasons for Native Apps

1. Performance (게임)

2. Offline Mode (업무용 로컬스토리지)

3. Findability (앱스토어에서 구매가능)

4. Device Attributes (기기속성 홗용)

5. Monetization (상업화, 수익실현)

모바읷 UX디자읶 가이드


iOS

overviewmobile HIG


mobile HIG

아이폰에서 작동하는 앱은 두 가지가 존재

1. iOS apps (보통 ‘앱’으로 지칭)an application you develop using the iOS SDK to run natively on iOS-based devices

2. Web content (앱과 구분하기 위해 ‘웹 앱’으로 지칭)Web apps / Optimized web-pages / Compatible web-pages


mobile HIG

Human Interface Principles

1. 미적조화 Aesthetic Integritya measure of how well the appearance of the app integrates with its function

2. 일관성 Consistencyan application that takes advantage of the standards and paradigms people are

comfortable with iOS standards / uniform terminology and style / consistent with its earlier versions

3. 조작성 Direct ManipulationUse gestures / Rotate or otherwise move / Can see that their actions have immediate,

visible results


mobile HIG

Human Interface Principles

4. 반응성 FeedbackThe built-in iOS applications respond to every user action with some perceptible

change

5. 은유성MetaphorsThe classic example of a software metaphor is the folder

6. 통제성 User ControlUsers feel more in control of an app when behaviors and controls are familiar and

predictable.


mobile HIG

앱사용의목적에 맞게커스터마이징Tailor Customization to the Task

최고의 아이폰앱은 명확핚 목적과 편리핚 사용성이 균형을 이룬 읶터페이스를 제공핚다.

The best iOS apps balance UI customization with clarity of purpose and ease of use.


mobile HIG

실제도구의사용방법을 안다면, 같은기능의앱역시즉시사용할수 있다. Instantly know how to use the app


mobile HIG | User Experience Guidelines

1. 최우선순위의임무에집중Focus on the Primary Task

2. 사용자가중요시하는컨텐츠를상단에. Elevate the Content People Care About

3. 중요도순으로화면상단에서하단으로이동 / Think Top Down

4. 사용자에게앱의기능을사용하기위한명확한방법을제공 / Give People a Logical Path to Follow



5. 사용법은쉽고, 분명하게Make Usage Easy and Obvious

6. 사용자가이해하기쉬운단어로라벨링 Use User-Centric Terminology

7. 사용자입력에따른노력을최소화Minimize the Effort Required for User Input

8. 협업과연결성을보장 Enable Collaboration and Connectedness



9. 사용자에의한세팅은간소화 De-emphasize Settings

10. 세팅옵션은메인화면에노출 Offer configuration options in the main user interface

11. 브랜딩을위한통일된로고, 컬러, 폰트를사용 Brand Appropriately

12. 앱의내용을손쉽게찾을수있는인덱스목록을제공Make Search Quick and RewardingBuild indexes of your data



13. 사용자에게알릴정보는적당한크기의폰트와서체로제공Well-Written Description

14. 축약된언어로정보를제공 Be Succinct as headline style.

15. 통일적이며일관된UI요소를사용 Use UI Elements Consistently

16. 디자인요소는물리적특성을반영한사실성을염두에둠 Consider Adding Physicality and Realism



17. 세션진행과정마다항상저장하라 Ask People to Save Only When Necessary

18. 모달뷰사용은최소화Modal Tasks Occasional and Simple

19. 앱시작은즉시Start Instantly

20. 세션진행도중언제라도종료를대비 Always Be Prepared to Stop

21. 사용자의선택이아닌한앱의자동종료금지Don’t Quit Programmatically


only for iPadmobile HIG


mobile HIG | UX Guidelines for iPad

1. 화면젂체의리프레시는지양 Reduce Full-Screen Transitions

앱의화면요소중사용자와인터랙션하는요소만선택적으로변홖Closely associate visual transitions with the content that’s changing.



2. 정보계층은가급적단순화 Restrain Your Information Hierarchy

정보구조를단순화하고,화면젂홖을최소화하기위해스플릿뷰와팝오버를적극적으로사용 Split View, Popover



3. 아이폰과달리, 아이패드의툴바컨텐츠는화면상단에배치Migrate Toolbar Content to the Top

현재 사용중읶 기능을 위핚 메뉴이자 옵션읶 툴바 아이템은 하단에 배치했을 때 보다 눈에 잘 띄며, 사용하기 편리


동준상강사

모바일 UX/UI개발입문과정 Lesson2

수고하셨습니다.

트 위 터 @jonathanis웹사이트 http://www.nextapp.co.kr블 로 그 http://naebon.blog.me 슬라이드쉐어 http://www.slideshare.net/JonathanDong/

http://twitter.com/

http://twitter.com/

http://www.nextapp.co.kr/


http://www.slideshare.net/JonathanDong/

http://www.slideshare.net/JonathanDong/

Documents

모바일 UX/UI개발 입문과정 - WordPress.com...mobile HIG Human Interface Principles 1. 미적조화Aesthetic Integrity a measure of how well the appearance of the app integrates