Integral:S는 Integrated Accelerating Programs for Start Up으로서, 스타트업 비즈니스 성장을 위해 로아컨설팅과 라임페이퍼가 공동으로 개발한 통합 브랜드입니다.
[Integral]은 전체를 구성하는 일부로서 필수적인 요소를 의미합니다. 본 프로그램은 비즈니스 모델의 검증 --> UX/UI 디자인 --> 개발과 마케팅에 이르는 스타트업 비즈니스 성장을 위한 가장 필수적인 모든 과정을 갖추고 있습니다.
본 프로그램에 대한 상세 소개는 하기 Integral:S 통합 프로그램 브로셔를 참조하시기 바라며, 궁금한 문의사항은 business@roaconsulting.co.kr 로 주시기 바랍니다.
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안(주)SNC Lab.
데이터 기반 UX평가를 통한 반응형웹 디자인 개선 방안 사례 발표자료입니다. (An improvement guidelines of responsive web design through data-based UX evaluation)
많은 연구를 통해 웹사이트에서 사용성의 중요성이 강조되고 있지만 실제 웹사이트 개발 프로세스에서 사용성에 대한 고려가 충분히 이뤄지기는 쉽지 않다. 사용성에 대한 고려는 기획단계부터 개발 및 완성 단계까지 전 과정에 걸쳐 진행되어야 하는데 사용성에 대한 고려 없이 제작된 웹사이트는 사용상의 문제점이 발견되고 유지보수를 어렵게 만든다. 이를 위한 사용성 평가는 웹사이트가 본연의 목적에 적합하게 제작되었는지 실제 사용자를 대상으로 평가, 분석하는 방법으로 웹사이트에서 사용자 경험을 측정하는데 주안점을 두고 있다.
웹사이트의 사용성을 높이기 위해 전문가 평가 및 사용성 평가를 수행하여 제작팀에 개선가이드라인을 제시할 수 있지만 사용성 평가는 사용자의 반응과 만족도를 평가하기 위해 수행하는 방법들이 피실험자의 주관적인 의견에 의해 측정 오류 및 편견(biases)이 발생하는 문제점을 가지고 있다. 또한 정성적인 평가를 보완하기 위해 분석 솔루션을 활용한 평가방법도 사용되지만 솔루션에 의한 분석 방법은 상세한 원인을 파악하기 힘든 경우가 있어 실제 웹사이트 제작 시 사용성 평가를 통해 객관적인 결과를 획득하려면 시간과 비용이 많이 소요되어 웹사이트에서 사용성에 대한 고려는 매우 제한적으로 활용되고 있다.
이번 Case Study에서는 국내 공공기관 및 민간기업의 실제 프로젝트 사례를 기준으로, 데이터 기반 평가를 통해 기존의 정성적인 평가 결과를 객관적인 데이터로 보완하고 웹사이트에서 빠른 시간 내에 적용할 수 있는 웹사이트 사용성 평가 방법을 제시하고자 한다.
Integral:S는 Integrated Accelerating Programs for Start Up으로서, 스타트업 비즈니스 성장을 위해 로아컨설팅과 라임페이퍼가 공동으로 개발한 통합 브랜드입니다.
[Integral]은 전체를 구성하는 일부로서 필수적인 요소를 의미합니다. 본 프로그램은 비즈니스 모델의 검증 --> UX/UI 디자인 --> 개발과 마케팅에 이르는 스타트업 비즈니스 성장을 위한 가장 필수적인 모든 과정을 갖추고 있습니다.
본 프로그램에 대한 상세 소개는 하기 Integral:S 통합 프로그램 브로셔를 참조하시기 바라며, 궁금한 문의사항은 business@roaconsulting.co.kr 로 주시기 바랍니다.
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안(주)SNC Lab.
데이터 기반 UX평가를 통한 반응형웹 디자인 개선 방안 사례 발표자료입니다. (An improvement guidelines of responsive web design through data-based UX evaluation)
많은 연구를 통해 웹사이트에서 사용성의 중요성이 강조되고 있지만 실제 웹사이트 개발 프로세스에서 사용성에 대한 고려가 충분히 이뤄지기는 쉽지 않다. 사용성에 대한 고려는 기획단계부터 개발 및 완성 단계까지 전 과정에 걸쳐 진행되어야 하는데 사용성에 대한 고려 없이 제작된 웹사이트는 사용상의 문제점이 발견되고 유지보수를 어렵게 만든다. 이를 위한 사용성 평가는 웹사이트가 본연의 목적에 적합하게 제작되었는지 실제 사용자를 대상으로 평가, 분석하는 방법으로 웹사이트에서 사용자 경험을 측정하는데 주안점을 두고 있다.
웹사이트의 사용성을 높이기 위해 전문가 평가 및 사용성 평가를 수행하여 제작팀에 개선가이드라인을 제시할 수 있지만 사용성 평가는 사용자의 반응과 만족도를 평가하기 위해 수행하는 방법들이 피실험자의 주관적인 의견에 의해 측정 오류 및 편견(biases)이 발생하는 문제점을 가지고 있다. 또한 정성적인 평가를 보완하기 위해 분석 솔루션을 활용한 평가방법도 사용되지만 솔루션에 의한 분석 방법은 상세한 원인을 파악하기 힘든 경우가 있어 실제 웹사이트 제작 시 사용성 평가를 통해 객관적인 결과를 획득하려면 시간과 비용이 많이 소요되어 웹사이트에서 사용성에 대한 고려는 매우 제한적으로 활용되고 있다.
이번 Case Study에서는 국내 공공기관 및 민간기업의 실제 프로젝트 사례를 기준으로, 데이터 기반 평가를 통해 기존의 정성적인 평가 결과를 객관적인 데이터로 보완하고 웹사이트에서 빠른 시간 내에 적용할 수 있는 웹사이트 사용성 평가 방법을 제시하고자 한다.
UX가 무엇인지, UX를 디자인 한다는 건 어떤 일인지, 좋은 UX란 무엇인지에 대해 경험을 바탕으로 풀어본 이야기입니다.
Slideshare에 업로드 되어 있는 비슷한 주제의 자료들 대부분이, 화면을 꽉 채우는 이미지만 덕지덕지 붙어 있거나, 도대체 어떻게 전개되는 이야기인지도 알 수 없게 키워드만 툭툭 던지는 방식이라서 조금 답답하더라구요.
그래서 제맘대로 만들어 봤어요. ㅋ
(얼마를 상상하시든 그것보다 더) 짧은 기간동안 파바박 만든 자료라서.. 조금은 아쉬운 부분도 있지만, 이 자료가 어느 누군가에게는 도움이 되길 바라는 마음에서 올려봅니다.
* 구글의 Noto Sans Korean 폰트를 주로 썼는데, 슬라이드쉐어의 작은 뷰로 보기에는 가독성이 좋지 않아서 맑은 고딕으로 바꿨습니다.
UX 프로젝트를 시작하는 분들을 위해 UX 디자인과 프로젝트방법론에 대한 A부터 Z까지를 간결한 질문들을 중심으로 모두 정리했습니다. (PDF 다운로드 가능)
1. UX 디자인이란?
• UX 디자인은 한 마디로 무엇인가?
• UX 디자인에서 하는 일은?
• UX 디자인이 왜 필요한가?
• UX 디자인의 핵심은?
• UXer들이 알고자 하는 사용자 경험이란 무엇인가?
• UX 디자이너들은 누구인가?
2. UX프로젝트란?
• UX 프로젝트는 무엇이 다른가?
• 왜 UX 프로젝트를 해야 하는가?
• 우리 분야에 대한 경험이 부족한 UXer에게 프로젝트를 맡겨도 되는가?
• UX 프로젝트를 했다가 실패한 경험이 있다. 무엇이 잘못된 건가?
• UX 프로젝트의 일반적인 일정
• UX 프로젝트 계획 시 염두에 두어야 할 5가지
• 컨설팅 업체가 UX 프로젝트를 진행할 때 우리의 역할은 무엇인가?
• 컨설팅 업체가 요구하는 자료가 많은데, 모두 공개해도 되는가?
• 진행중인 UX 프로젝트를 공개하면 어떤 장점이 있는가?
3. 필드리서치
• UXer들은 왜 필드리서치를 하는가?
• 필드리서치와 마케팅 리서치의 차이점은?
• 필드리서치는 누구를, 몇 명이나 대상으로 해야 하나?
• 필드리서치를 할 때, 주의해야 할 사항은?
• 필드리서치 결과를 가지고 바로 디자인하면 안 되는가?
4. UX 모델링
• UX 프로젝트에서 모델링이란 작업을 굳이 해야 하는가?
• 필드리서치 결과를 가지고 가장 빠르게 인사이트를 도출할 수 있는 방법은?
• Persona가 기존의 마케팅 시장세분화와 다른 점은?
• Persona를 통해서 얻을 수 있는 기대효과는?
• 선행연구 프로젝트에 가장 적합한 UX 모델링 방법은?
• Journey Map은 언제나 유효한가?
5. UX 전략
• UX 모델링을 통해서 얻어야 할 최종 결과는?
• UX 프로젝트에서 이야기하는 전략이란?
• UX에서 가치가 중요한 이유는?
• UX 프로젝트에서 얘기하는 가치의 구체적인 구분은?
• UXer들은 새로운 사용자경험을 어떻게 디자인하는가?
• UX 프로젝트에서 사용자 시나리오가 중요한 이유는?
• 사용자 시나리오는 어떻게 활용되는가?
6. 프로토타이핑
• UX 프로젝트에서의 프로토타이핑은 무엇인가?
• 구현충실도(fidelity)를 꼭 낮은 것에서부터 시작해야 하는가?
• 프로토타입 작업 시 사용성 테스트를 거치는 이유는?
• 테스트는 누구를 대상으로 하는 것이 좋은가?
• 테스트는 몇 명이나 하는 것이 좋은가?
• UX 프로젝트에서 이야기하는 테스트 방법에는 어떤 것들이 있나?
비주얼로 풀어보는 사용자경험 디자인 요약본 입니다.
2014년 8월 16일 공간더하기에서 진행한 사용자 경험 강의 내용 일부 입니다.
전체 자료는 170페이지 정도 되나 여기에선 간단하게 어떤 내용인지 알 수 있도록 요약본으로 정리했습니다.
본 요약본은 비주얼 기반으로 이해하기 쉽게 구성되어 있어 사용자 경험을 누구보다도 쉽게 받아 들이고 이해하실 수 있습니다.
디자이너 마케터 기획자 스타트업 종사자들 분께 많은 도움이 되시리라 봅니다.
궁금하신 분은 ultra0034@gmail.com / 010-9190-7792 로 연락주시면 좋겠습니다.
UI/UX 디자인 방법을 활용, 소프트웨어 개발 과정에서 사용성을 검토하고 사용자 중심으로 개선할 수 있는 가이드가 발간되었습니다.
이 책은 2013년 산업통상자원부 시스템반도체 융합경쟁력 강화사업 중 UI/UX기술자산 제공 기반구축의 일환으로, 정보통신산업진흥원 소프트웨어공학센터와 한국디자인진흥원의 협업으로 제작되었습니다.
역량 있는 소프트웨어 기업의 UI/UX 디자인 활용과 디자인방법을 통한 사용자중심의 소프트웨어 개발 지원, 소프트웨어산업의 활성화를 위한 기반조성을 목적으로 가이드북 제작, 웹 가이드 게시, UI/UX디자인 컨설팅 등이 진행되었습니다.
이 책은 소프트웨어 기획·개발 전문가들이 개발이나 개선 과정에서 UX, UI 개발 방법을 적용해 보고, 사용자 관점에서 편리하게 설계되었는지 각 단계에서 확인할 수 있는 방법을 소개하고 있습니다. 소프트웨어 개발에 관한 UI/UX에 한정된 것으로서 부족하나마 국내 소프트웨어기업들이 보다 다양한 디자인 방법의 활용을 통해 사용자 중심으로 개발하는데 쓰임이 될 수 있기를 바랍니다.
감사합니다.
*소프트웨어 자산뱅크(http://swbank.kr) 및 디자인포털 디자인디비(www.designdb.com) 에서 무료로 파일을 다운받을 수 있습니다.
소프트웨어 공학센터의 품질기준에 근거한 최소한의 UI/UX/GUI/UT 지식을 이해할 수 있습니다.
소프트웨어 개발 또는 개선 시에 단계별로 간단히 사용성을 테스트해 볼 수 있는 방법을 알 수 있습니다.
◇ 목차
Part I 소프트웨어 개발 UI/UX 참조모델 소개
1. UI & UX ?
2. 소프트웨어 개발 UI/UX 참조모델 제작배경
3. 소프트웨어 개발 UI/UX 참조모델 & 가이드 소개
Part II 소프트웨어 개발 UI/UX 참조모델 가이드
1. 목표정의
2. 프로젝트 계획
3. 요구사항 정의
4. 설계 및 구현
5. 테스트
6. 배포 및 관리
Appendix
용어 소개
Reference
방법론
참고서식
◇ 기획
미래창조과학부
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행처
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행연월
2013.12
◇ 참고링크 : SW자산뱅크 UI/UX 체험하기 바로가기 http://swbank.kr
◇ 문의처 : 한국디자인진흥원 서비스디지털융합팀 031)780-2263
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1Limepaper, Inc.
[UX trigger for IOT/Wearable]는
Mobile Computing 분야와 Ubiquitous Computing 분야에서 선도적인 기술을 보유하고, 혁신적이고 풍부한 사용자경험(UX을 창출하고자 설립된 UX 디자인 전문 벤처기업인 ㈜라임페이퍼에서 개발하였습니다.
[UX trigger for IOT/Wearable]은
사물인터넷(IoT)/웨어러블 기반의 스타트업 비즈니스모델의 UX진단 및 UX/UI 디자인 워크샵입니다. 스타트업의 Lean-UX에 최적화하여 개발한 IOT/Wearable-UX디자인 툴킷을 활용하여, 서비스개발 초기단계에서부터 스타트업의 빠른 Time-to-Market 적용을 목표로 서비스의 UX/UI완성도를 높일 수 있는 UX/UI디자인 방법론을 체득할 수 있으며, 궁극적으로 스타트업의 사업아이템의 UX경쟁력 강화를 목적으로 진행합니다.
UX가 무엇인지, UX를 디자인 한다는 건 어떤 일인지, 좋은 UX란 무엇인지에 대해 경험을 바탕으로 풀어본 이야기입니다.
Slideshare에 업로드 되어 있는 비슷한 주제의 자료들 대부분이, 화면을 꽉 채우는 이미지만 덕지덕지 붙어 있거나, 도대체 어떻게 전개되는 이야기인지도 알 수 없게 키워드만 툭툭 던지는 방식이라서 조금 답답하더라구요.
그래서 제맘대로 만들어 봤어요. ㅋ
(얼마를 상상하시든 그것보다 더) 짧은 기간동안 파바박 만든 자료라서.. 조금은 아쉬운 부분도 있지만, 이 자료가 어느 누군가에게는 도움이 되길 바라는 마음에서 올려봅니다.
* 구글의 Noto Sans Korean 폰트를 주로 썼는데, 슬라이드쉐어의 작은 뷰로 보기에는 가독성이 좋지 않아서 맑은 고딕으로 바꿨습니다.
UX 프로젝트를 시작하는 분들을 위해 UX 디자인과 프로젝트방법론에 대한 A부터 Z까지를 간결한 질문들을 중심으로 모두 정리했습니다. (PDF 다운로드 가능)
1. UX 디자인이란?
• UX 디자인은 한 마디로 무엇인가?
• UX 디자인에서 하는 일은?
• UX 디자인이 왜 필요한가?
• UX 디자인의 핵심은?
• UXer들이 알고자 하는 사용자 경험이란 무엇인가?
• UX 디자이너들은 누구인가?
2. UX프로젝트란?
• UX 프로젝트는 무엇이 다른가?
• 왜 UX 프로젝트를 해야 하는가?
• 우리 분야에 대한 경험이 부족한 UXer에게 프로젝트를 맡겨도 되는가?
• UX 프로젝트를 했다가 실패한 경험이 있다. 무엇이 잘못된 건가?
• UX 프로젝트의 일반적인 일정
• UX 프로젝트 계획 시 염두에 두어야 할 5가지
• 컨설팅 업체가 UX 프로젝트를 진행할 때 우리의 역할은 무엇인가?
• 컨설팅 업체가 요구하는 자료가 많은데, 모두 공개해도 되는가?
• 진행중인 UX 프로젝트를 공개하면 어떤 장점이 있는가?
3. 필드리서치
• UXer들은 왜 필드리서치를 하는가?
• 필드리서치와 마케팅 리서치의 차이점은?
• 필드리서치는 누구를, 몇 명이나 대상으로 해야 하나?
• 필드리서치를 할 때, 주의해야 할 사항은?
• 필드리서치 결과를 가지고 바로 디자인하면 안 되는가?
4. UX 모델링
• UX 프로젝트에서 모델링이란 작업을 굳이 해야 하는가?
• 필드리서치 결과를 가지고 가장 빠르게 인사이트를 도출할 수 있는 방법은?
• Persona가 기존의 마케팅 시장세분화와 다른 점은?
• Persona를 통해서 얻을 수 있는 기대효과는?
• 선행연구 프로젝트에 가장 적합한 UX 모델링 방법은?
• Journey Map은 언제나 유효한가?
5. UX 전략
• UX 모델링을 통해서 얻어야 할 최종 결과는?
• UX 프로젝트에서 이야기하는 전략이란?
• UX에서 가치가 중요한 이유는?
• UX 프로젝트에서 얘기하는 가치의 구체적인 구분은?
• UXer들은 새로운 사용자경험을 어떻게 디자인하는가?
• UX 프로젝트에서 사용자 시나리오가 중요한 이유는?
• 사용자 시나리오는 어떻게 활용되는가?
6. 프로토타이핑
• UX 프로젝트에서의 프로토타이핑은 무엇인가?
• 구현충실도(fidelity)를 꼭 낮은 것에서부터 시작해야 하는가?
• 프로토타입 작업 시 사용성 테스트를 거치는 이유는?
• 테스트는 누구를 대상으로 하는 것이 좋은가?
• 테스트는 몇 명이나 하는 것이 좋은가?
• UX 프로젝트에서 이야기하는 테스트 방법에는 어떤 것들이 있나?
비주얼로 풀어보는 사용자경험 디자인 요약본 입니다.
2014년 8월 16일 공간더하기에서 진행한 사용자 경험 강의 내용 일부 입니다.
전체 자료는 170페이지 정도 되나 여기에선 간단하게 어떤 내용인지 알 수 있도록 요약본으로 정리했습니다.
본 요약본은 비주얼 기반으로 이해하기 쉽게 구성되어 있어 사용자 경험을 누구보다도 쉽게 받아 들이고 이해하실 수 있습니다.
디자이너 마케터 기획자 스타트업 종사자들 분께 많은 도움이 되시리라 봅니다.
궁금하신 분은 ultra0034@gmail.com / 010-9190-7792 로 연락주시면 좋겠습니다.
UI/UX 디자인 방법을 활용, 소프트웨어 개발 과정에서 사용성을 검토하고 사용자 중심으로 개선할 수 있는 가이드가 발간되었습니다.
이 책은 2013년 산업통상자원부 시스템반도체 융합경쟁력 강화사업 중 UI/UX기술자산 제공 기반구축의 일환으로, 정보통신산업진흥원 소프트웨어공학센터와 한국디자인진흥원의 협업으로 제작되었습니다.
역량 있는 소프트웨어 기업의 UI/UX 디자인 활용과 디자인방법을 통한 사용자중심의 소프트웨어 개발 지원, 소프트웨어산업의 활성화를 위한 기반조성을 목적으로 가이드북 제작, 웹 가이드 게시, UI/UX디자인 컨설팅 등이 진행되었습니다.
이 책은 소프트웨어 기획·개발 전문가들이 개발이나 개선 과정에서 UX, UI 개발 방법을 적용해 보고, 사용자 관점에서 편리하게 설계되었는지 각 단계에서 확인할 수 있는 방법을 소개하고 있습니다. 소프트웨어 개발에 관한 UI/UX에 한정된 것으로서 부족하나마 국내 소프트웨어기업들이 보다 다양한 디자인 방법의 활용을 통해 사용자 중심으로 개발하는데 쓰임이 될 수 있기를 바랍니다.
감사합니다.
*소프트웨어 자산뱅크(http://swbank.kr) 및 디자인포털 디자인디비(www.designdb.com) 에서 무료로 파일을 다운받을 수 있습니다.
소프트웨어 공학센터의 품질기준에 근거한 최소한의 UI/UX/GUI/UT 지식을 이해할 수 있습니다.
소프트웨어 개발 또는 개선 시에 단계별로 간단히 사용성을 테스트해 볼 수 있는 방법을 알 수 있습니다.
◇ 목차
Part I 소프트웨어 개발 UI/UX 참조모델 소개
1. UI & UX ?
2. 소프트웨어 개발 UI/UX 참조모델 제작배경
3. 소프트웨어 개발 UI/UX 참조모델 & 가이드 소개
Part II 소프트웨어 개발 UI/UX 참조모델 가이드
1. 목표정의
2. 프로젝트 계획
3. 요구사항 정의
4. 설계 및 구현
5. 테스트
6. 배포 및 관리
Appendix
용어 소개
Reference
방법론
참고서식
◇ 기획
미래창조과학부
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행처
정보통신산업진흥원 부설 SW공학센터
한국디자인진흥원
◇ 발행연월
2013.12
◇ 참고링크 : SW자산뱅크 UI/UX 체험하기 바로가기 http://swbank.kr
◇ 문의처 : 한국디자인진흥원 서비스디지털융합팀 031)780-2263
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1Limepaper, Inc.
[UX trigger for IOT/Wearable]는
Mobile Computing 분야와 Ubiquitous Computing 분야에서 선도적인 기술을 보유하고, 혁신적이고 풍부한 사용자경험(UX을 창출하고자 설립된 UX 디자인 전문 벤처기업인 ㈜라임페이퍼에서 개발하였습니다.
[UX trigger for IOT/Wearable]은
사물인터넷(IoT)/웨어러블 기반의 스타트업 비즈니스모델의 UX진단 및 UX/UI 디자인 워크샵입니다. 스타트업의 Lean-UX에 최적화하여 개발한 IOT/Wearable-UX디자인 툴킷을 활용하여, 서비스개발 초기단계에서부터 스타트업의 빠른 Time-to-Market 적용을 목표로 서비스의 UX/UI완성도를 높일 수 있는 UX/UI디자인 방법론을 체득할 수 있으며, 궁극적으로 스타트업의 사업아이템의 UX경쟁력 강화를 목적으로 진행합니다.
2014년, UX 연구 주제와 방향은 무엇입니까?(UXCAMP SEOUL 5TH)Billy Choi
UXCAMP SEOUL 5TH 발표 자료
[발표 목차]
I. 세션의 화두
II. BILLY의 2014년 UX 연구 주제와 방향 공유
1. 스마트 미러, 스마트 정보가전(냉장고, 세탁기, 오븐, 전자레인이지, 로봇청소기 등) 등의 새로운 콘셉트가 필요한 제품의 UX 전략 수립 시 활용할 수 있는 새로운 프로세스와 툴킷 연구(PUI, AUI, GESTURE, UI 등 포함)
2. LEAN FORWARD로의 행동 변화를 위한 SMART TV와 SECOND SCREEN의 새로운 프레임을 규정하기 위한 UX 시스템 전략에 대한 연구
3. 서점의 온라인 채널과 오프라인 채널 간 ‘정보 흐름’ 설계를 위한 웹, 모바일 웹, 모바일 앱, 키오스크, IoT, 서비스 등 통합 UX 전략 수립에 대한 연구
4. 해외 150여 개 온라인(웹/모바일 웹/모바일 앱) 커머스 사례 분석으로 정보 탐색(브라우징/검색), 쇼핑 카트, 제품 비교, 맞춤 추천(개인화), 신뢰성 등의 UX 방향성 연구
5. 유통 매장의 PI 혁신과 서비스 개선을 위한 디지털 사이니지와 iBEACON/NFC 관련 UX 연구
6.. 자동차에 최적화된 디지털 클러스터, AR HUD, 디지털 유리창의 UX/UI/서비스 모델 연구
7. EP에서 빅데이터를 활용한 문제 해결 및 협업 강화를 위한 UX/UI 모델 연구
8. UX/UI/서비스 디자인 및 UX MBA 교육 과정 연구(1일 8H, 3일 24H, 1개월 40H, 3개월 120H)
9. 주체의 죽음과 체화된 인지의 흐름을 반영한 디자인학 모델 연구
III. 토의
2015 Internet of Logistic Things / 2015 물류 사물인터넷Junsang Dong
Speak in the Smart Logis (Logistics 4.0) Seminar, APR 17, 2015.
Overview of IoT, Case study about Internet of Postal Things. Internet of Logistic Things. Hosted by KATS, Korean Agency for Technology and Standards.
2015년 4월 17일 르네상스 서울호텔에서 열린 스마트 로지스 (물류 4.0) 세미나 슬라이드입니다. 우정과 물류 분야는 사물인터넷 연구와 실무 적용이 가장 먼저 시작된 곳이기도 한데요, 최근 3년간 구체적인 성과를 만들어낸 DHL, 미연방 우정국, 프랑스 우정국, 독일 우정국 등의 사례가 담겨있습니다.
주관 : 산업통상자원부 국가기술표준원
발표 : 넥스트플랫폼 동준상 대표
1. 모바일 UX/UI
기획 및 설계실무
Mobile UX/UI Design Essential
ECONOVATION | 동 준 상 (Jonathan Dong)
1
2. 모바일 UX/UI
기획 및 설계실무
위너스랩 UX디자인 팀장
동 준 상 (naebon1@gmail.com)
Lecture Project
에코노베이션 두산그룹 모바일 프로젝트
삼성멀티캠퍼스 삼성중공업 모바일 프로젝트
T 아카데미 중소기업청, 교직원공제회 +
저술 : 모바일 UX디자인, 모바일 프로토타입 개발
번역 : HTML5 Multimedia Development(에이콘), jQuery UI 1.8(에이콘)
2
6. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
6
7. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
7
8. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
8
9. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
9
10. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
10
11. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
11
12. 제1부 차별화된 기업경쟁력으로서
모바일 UX디자인 젂략
01 좋은 모바일 서비스를 만들기 위한 UX 디자인 전략의 개요
02 경쟁에서 이기기 위한 UX 디자인 기획, 리서치, 주요 산출물
03 플랫폼별 UX가이드라인1 - 애플 iOS의 mobile HIG
04 플랫폼별 UX가이드라인2 - 구글 Android의 UX Guide
플랫폼별 UX가이드라인3 - MS WP7의 UI Guideline
05
12
18. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX의 정의
사용, 인지, 반응
18
19. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX의 정의
사용, 인지, 반응
ISO 9241-210의 정의
사용자경험, UX란 ‘제품이나 시스템, 서비스를 사용하려고
예상하거나, 사용한 결과로 나타난 사람의 인지와 반응이다.’
ISO 9241-210 defines User Experience as
"a person's perceptions and responses that result from
the use or anticipated use of a product, system or service".
19
20. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX의 정의
사용, 인지, 반응
ISO 9241-210의 정의
사용자경험, UX란 ‘제품이나 시스템, 서비스를 사용하려고
예상하거나, 사용한 결과로 나타난 사람의 인지와 반응이다.’
ISO 9241-210 defines User Experience as
"a person's perceptions and responses that result from
the use or anticipated use of a product, system or service".
20
22. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자인의 영역
Information Architecture
HCI, Interaction Design
22
23. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자인의 영역
Information Architecture
HCI, Interaction Design
Industrial Design
Visual Design
23
24. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자인의 영역
Information Architecture
HCI, Interaction Design
Industrial Design
Visual Design
Sound Design
Content
24
25. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자인의 영역
Information Architecture
HCI, Interaction Design
Industrial Design
Visual Design
Sound Design
Content
Architecture
Human Factors
25
26. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX를 통해 추구하는 것
26
27. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX를 통해 추구하는 것
느낌, 실용성, 용이성, 효율성
27
28. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX를 통해 추구하는 것
느낌, 실용성, 용이성, 효율성
UX란 시스템을 사용한 사람의, 사용에 대한 느낌이다. 사람-컴퓨터
반응롞(HCI)이나 제품의 소유를 통해 얻는 가치있는 사용자의 경험
에 초점을 맞추는 동시에, 물건의 사용에 따르는 실용적 측면이나
사용의 용이성, 시스템의 효율성과 같은 넓은 범위를 다룬다.
UX가 시스템을 사용하는 인갂의 감정과 생각 그리고 효용에 대한
것을 다루므로 UX는 인갂의 본성에 종속된 개념이며, 주변 여건이
변화함에 따라 사용의 경험 또한 역동적으로 변화하는 개념이다.
28
29. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX를 통해 추구하는 것
느낌, 실용성, 용이성, 효율성
UX란 시스템을 사용한 사람의, 사용에 대한 느낌이다. 사람-컴퓨터
반응롞(HCI)이나 제품의 소유를 통해 얻는 가치있는 사용자의 경험
에 초점을 맞추는 동시에, 물건의 사용에 따르는 실용적 측면이나
사용의 용이성, 시스템의 효율성과 같은 넓은 범위를 다룬다.
UX가 시스템을 사용하는 인갂의 감정과 생각 그리고 효용에 대한
것을 다루므로 UX는 인갂의 본성에 종속된 개념이며, 주변 여건이
변화함에 따라 사용의 경험 또한 역동적으로 변화하는 개념이다.
29
31. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자이너의 역할
사용자경험의 기획자로서
경험의 기회를 제공
31
32. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자이너의 역할
사용자경험의 기획자로서
경험의 기회를 제공
사용자 경험이라는 것은 인갂의 감정을 이루는 요소이므로 실제로
‘디자인되어’ 질 수는 없다. 대신 UX디자이너는 사용자로 하여금 특
정한 경험을 할 수 있도록 경험의 기회는 제공할 수 있는 것이다.
As user experience is a subjective feeling, it cannot actually
be "designed". Instead, you can design for a user experience,
trying to enable certain kind of experiences.
32
33. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX디자이너의 역할
사용자경험의 기획자로서
경험의 기회를 제공
사용자 경험이라는 것은 인갂의 감정을 이루는 요소이므로 실제로
‘디자인되어’ 질 수는 없다. 대신 UX디자이너는 사용자로 하여금 특
정한 경험을 할 수 있도록 경험의 기회는 제공할 수 있는 것이다.
As user experience is a subjective feeling, it cannot actually
be "designed". Instead, you can design for a user experience,
trying to enable certain kind of experiences.
33
34. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UI, User Interface는…
34
35. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UI, User Interface는…
A Place
35
36. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UI, User Interface는…
A Place
Interaction
36
37. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UI, User Interface는…
A Place
Interaction
Development
37
38. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX, User Experience는…
38
39. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX, User Experience는…
Feelings
39
40. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX, User Experience는…
Feelings
Easiness
Practicality
Efficiency
40
41. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX, User Experience는…
Feelings
Easiness
Practicality
Efficiency
Design
(plan, strategy)
41
43. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UI의 정의
사람, 기기, 소통, 장소
43
44. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UI의 정의
사람, 기기, 소통, 장소
사람과 기기갂의 소통을 위한 산업디자인의 영역에서, UI란 사람과 기기 사
이에서 소통이 일어나는 장소이다.
In the industrial design field of human-machine interaction, the user
interface is (a place) where interaction between humans and
machines occurs.
44
45. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
Usability의 정의
45
46. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
Usability의 정의
UI, 효과, 효율, 맊족
46
47. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
Usability의 정의
UI, 효과, 효율, 맊족
사용성이란 특정 UI의 디자인이 사용자의 정신과 육체에 영향을 미치는 정
도이며, 그것을 통해 시스템 사용의 절차를 효과적, 효율적, 그리고 만족스럽
게 만드는 정도를 의미한다.
Usability is the degree to which the design of a particular user
interface takes into account the human psychology and physiology
of the users, and makes the process of using the system effective,
efficient and satisfying.
47
49. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Donald Norman
MIT / User-centered Design
49
50. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Donald Norman
MIT / User-centered Design
‘일상적인 물건의 디자인’이라는 책을 통
해, Norman 교수는 폭 넓은 실증적 조
사를 통해, 좋은 디자인과 나쁜 디자인의
이면에 있는 인갂의 심리를 설명하고, 그
것을 통해 디자인 원칙을 제안한다.
그는 우리의 일상적인 삶에 있어 디자인
의 중요성과 함께, 나쁜 디자인에 의해
야기되는 오류의 결과를 역설하고 있다.
50
51. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Donald Norman
MIT / User-centered Design
‘일상적인 물건의 디자인’이라는 책을 통
해, Norman 교수는 폭 넓은 실증적 조
사를 통해, 좋은 디자인과 나쁜 디자인의
이면에 있는 인갂의 심리를 설명하고, 그
것을 통해 디자인 원칙을 제안한다.
그는 우리의 일상적인 삶에 있어 디자인
의 중요성과 함께, 나쁜 디자인에 의해
야기되는 오류의 결과를 역설하고 있다.
51
53. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Jessy James Garret
AdaptivePath / Consultant
53
54. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Jessy James Garret Ajax
AdaptivePath / Consultant
54
55. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Jessy James Garret Ajax
AdaptivePath / Consultant
IE5에 사용된 XMLHttpRequest가 사
용성개선에 획기적인 전기가 될 수 있음
을 주장
Visual Vocabulary의 개발 등 사용자의
사용성 표현과 이해에 노력
55
56. 01 좋은 모바일서비스를 만들기위한 UX디자인 전략의 개요
UX분야의 아이콘
Jessy James Garret Ajax
AdaptivePath / Consultant
IE5에 사용된 XMLHttpRequest가 사
용성개선에 획기적인 전기가 될 수 있음
을 주장
Visual Vocabulary의 개발 등 사용자의
사용성 표현과 이해에 노력
56
66. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나, Persona
협업을 위한 사용자 정의의 방법
66
67. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나, Persona
협업을 위한 사용자 정의의 방법
67
68. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나, Persona
협업을 위한 사용자 정의의 방법
페르소나를 통해, 모바일
서비스 개발과 연관된 모
든 부서원들은 타겟 사용
자의 니즈를 효과적이며
쉽게 설명할 수 있으며,
이것을 바탕으로 의사결
정권자들은 기획과 디자
인의 유효성을 판단할 수
있다.
68
70. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나의 효용, 전략
사용자를 명확한 실체로 표현(가정)할 수 있도록 돕는다.
70
71. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나의 효용, 전략
사용자를 명확한 실체로 표현(가정)할 수 있도록 돕는다.
모두에게 초점을 맞추는 대싞, 특정 사용자에게 집중한다.
71
72. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나의 효용, 전략
사용자를 명확한 실체로 표현(가정)할 수 있도록 돕는다.
모두에게 초점을 맞추는 대싞, 특정 사용자에게 집중한다.
선택권을 제한하여, 보다 나은 결정을 할 수 있도록 한다.
72
73. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
페르소나의 효용, 전략
사용자를 명확한 실체로 표현(가정)할 수 있도록 돕는다.
모두에게 초점을 맞추는 대싞, 특정 사용자에게 집중한다.
선택권을 제한하여, 보다 나은 결정을 할 수 있도록 한다.
페르소나를 통해 기획팀, 디자인팀, 그리고 개발팀이 교류
하며 (즐겁게) 작업할 수 있다.
73
81. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨텐츠 개발 전략 문서
1
벤치마킹
81
82. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨텐츠 개발 전략 문서
1
벤치마킹
2
컨셉모델
82
83. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨텐츠 개발 전략 문서
1
벤치마킹
2
컨셉모델 3
컨텐츠
인벤토리
83
84. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델, Concept Model
84
85. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델, Concept Model
아이디어의 시각화, 공유의 방식
85
86. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델, Concept Model
아이디어의 시각화, 공유의 방식
86
87. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델, Concept Model
아이디어의 시각화, 공유의 방식
리서치결과를 반영하여 페르
소나를 작성하고, 경쟁기업과
경쟁앱에 대한 벤치마킹이
끝났다면, 그 결과를 다른 부
서의 팀원들과 공유할 수 있
는 언어로 표현한다.
이때 사용되는 언어로 적합
한 것이 바로 아이디어를 시
각화한 컨셉모델이다.
87
88. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델의 작성
한 장의 종이 위에 모든 아이디어를 기록
문맥 Context 에 맞지 않는 요소를 제거
Contents로 적당하지 않은 요소를 제거
마지막까지 남은 요소를 Diagram으로 표현
88
89. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델의 작성
한 장의 종이 위에 모든 아이디어를 기록
문맥 Context 에 맞지 않는 요소를 제거
Contents로 적당하지 않은 요소를 제거
마지막까지 남은 요소를 Diagram으로 표현
89
90. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델의 작성
한 장의 종이 위에 모든 아이디어를 기록
문맥 Context 에 맞지 않는 요소를 제거
Contents로 적당하지 않은 요소를 제거
마지막까지 남은 요소를 Diagram으로 표현
90
91. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델의 작성
한 장의 종이 위에 모든 아이디어를 기록
문맥 Context 에 맞지 않는 요소를 제거
Contents로 적당하지 않은 요소를 제거
마지막까지 남은 요소를 Diagram으로 표현
91
92. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
컨셉모델의 작성
한 장의 종이 위에 모든 아이디어를 기록
문맥 Context 에 맞지 않는 요소를 제거
Contents로 적당하지 않은 요소를 제거
마지막까지 남은 요소를 Diagram으로 표현
92
102. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
와이어프레임, Wireframe
구체화되고 확정된 컨텐츠를 배치
컨셉모델과 컨텐츠인벤토리를 통
해 시각화되고 구체화된 아이디
어를 실제 목적기기 Target
Device에 배치합니다.
컨텐츠에 적합한 레이
아웃이나 문맥에 맞는
버튺의 사이즈를 결정
하는데 중요한 역할을
담당합니다.
102
104. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
스크린 디자인, Screen Design
컬러, 폰트, 그리고 그래픽 요소를
통해 Content-Context-Brand를 강조
104
105. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
스크린 디자인, Screen Design
컬러, 폰트, 그리고 그래픽 요소를
통해 Content-Context-Brand를 강조
105
106. 02 경쟁에서 이기기위한 UX디자인과 주요산출물
스크린 디자인, Screen Design
컬러, 폰트, 그리고 그래픽 요소를
통해 Content-Context-Brand를 강조
모바일의 특성을 반영한 앱 스
크린을 구현하는데 기본적인 목
적을 두고,
차별화를 위한 색상과 글꼴, 이
미지요소를 화면에 적용하여 보
다 높은 사용성을 제공
106
108. 03 플랫폼별 UX디자인 가이드라인1
애플 iOS의 mobile HIG
iOS 플랫폼의 UX디자인 가이드라인 -
mobile HIG의 주요 내용 정리
108
109. 03 플랫폼별 UX디자인 가이드라인1
애플 iOS의 mobile HIG
iOS 플랫폼의 UX디자인 가이드라인 -
mobile HIG의 주요 내용 정리
iOS의 UX디자인 특성이 반영된
모바일 앱 베스트3
109
110. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
110
111. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 미적 조화 Aesthetic Integrity
a measure of how well the appearance
of the app integrates with its function
111
112. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 미적 조화 Aesthetic Integrity
a measure of how well the appearance
of the app integrates with its function
2. 일관성 Consistency
an application that takes advantage of the standards and
paradigms people are comfortable with iOS standards /
uniform terminology and style / consistent with its earlier
versions
112
113. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 미적 조화 Aesthetic Integrity
a measure of how well the appearance
of the app integrates with its function
2. 일관성 Consistency
an 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 Manipulation
Use gestures / Rotate or otherwise move
Can see that their actions have immediate, visible results
113
114. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
114
115. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
4. 반응성 Feedback
The built-in iOS applications respond to
every user action with some perceptible change
115
116. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
4. 반응성 Feedback
The built-in iOS applications respond to
every user action with some perceptible change
5. 은유성 Metaphors
The classic example of a software metaphor is the folder
116
117. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
4. 반응성 Feedback
The built-in iOS applications respond to
every user action with some perceptible change
5. 은유성 Metaphors
The classic example of a software metaphor is the folder
6. 통제성 User Control
Users feel more in control of an app when
behaviors and controls are familiar and predictable.
117
118. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
118
119. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
앱사용의 목적에 맞게 커스터마이징
Tailor Customization to the Task
119
120. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
앱사용의 목적에 맞게 커스터마이징
Tailor Customization to the Task
최고의 아이폰앱은 명확한 목적과 편리한
사용성이 균형을 이룬 인터페이스를 제공한다.
The best iOS apps balance UI customization
with clarity of purpose and ease of use.
120
121. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
앱사용의 목적에 맞게 커스터마이징
Tailor Customization to the Task
최고의 아이폰앱은 명확한 목적과 편리한
사용성이 균형을 이룬 인터페이스를 제공한다.
The best iOS apps balance UI customization
with clarity of purpose and ease of use.
121
122. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
122
123. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
현실에 존재하는 기기를 앱으로 창조
123
124. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
현실에 존재하는 기기를 앱으로 창조
실제 도구의 사용방법을 안다면,
같은 기능의 앱 역시 즉시 사용할 수 있도록 한다.
Instantly know how to use the app
124
125. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
현실에 존재하는 기기를 앱으로 창조
실제 도구의 사용방법을 안다면,
같은 기능의 앱 역시 즉시 사용할 수 있도록 한다.
Instantly know how to use the app
125
126. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
126
127. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
127
128. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 최우선순위의 임무에 집중
Focus on the Primary Task
128
129. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 최우선순위의 임무에 집중
Focus on the Primary Task
2. 사용자 중시 컨텐츠를 상단에.
Elevate the Content People Care
129
130. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 최우선순위의 임무에 집중
Focus on the Primary Task
2. 사용자 중시 컨텐츠를 상단에.
Elevate the Content People Care
3. 중요도 순으로 상단에서 하단으로
Think Top Down
130
131. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
1. 최우선순위의 임무에 집중
Focus on the Primary Task
2. 사용자 중시 컨텐츠를 상단에.
Elevate the Content People Care
3. 중요도 순으로 상단에서 하단으로
Think Top Down
4. 앱 사용 위한 명확한 방법을 제공
Give People a Logical Path
131
132. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
132
133. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
133
134. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
5. 사용법은 쉽고, 분명하게
Make Usage Easy and Obvious
134
135. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
5. 사용법은 쉽고, 분명하게
Make Usage Easy and Obvious
6. 이해하기 쉬운 단어로 라벨링
Use User-Centric Terminology
135
136. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
5. 사용법은 쉽고, 분명하게
Make Usage Easy and Obvious
6. 이해하기 쉬운 단어로 라벨링
Use User-Centric Terminology
7. 사용자 입력에 따른 노력을 최소화
Minimize the Effort for User Input
136
137. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
5. 사용법은 쉽고, 분명하게
Make Usage Easy and Obvious
6. 이해하기 쉬운 단어로 라벨링
Use User-Centric Terminology
7. 사용자 입력에 따른 노력을 최소화
Minimize the Effort for User Input
8. 협업과 연결성을 보장
Collaboration & Connectedness
137
138. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
138
139. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
139
140. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
9. 사용자에 의한 세팅은 간소화
De-emphasize Settings
140
141. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
9. 사용자에 의한 세팅은 간소화
De-emphasize Settings
10. 세팅 옵션은 메인화면에 노출
Configuration options
in the main user interface
141
142. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
9. 사용자에 의한 세팅은 간소화
De-emphasize Settings
10. 세팅 옵션은 메인화면에 노출
Configuration options
in the main user interface
11. 브랜딩을 위한 통일된
로고, 컬러, 폰트를 사용
142
143. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
9. 사용자에 의한 세팅은 간소화
De-emphasize Settings
10. 세팅 옵션은 메인화면에 노출
Configuration options
in the main user interface
11. 브랜딩을 위한 통일된
로고, 컬러, 폰트를 사용
12. 쉽게 찾을 수 있는 인덱스 목록
Make Search Quick and Indexes
143
144. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
meernotes
144
145. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
meernotes
145
146. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
meernotes
146
147. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
meernotes
147
148. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
colorsnap
148
149. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
colorsnap
149
150. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
colorsnap
150
151. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
colorsnap
151
152. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
VirtualWater
152
153. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
VirtualWater
153
154. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
VirtualWater
154
155. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
VirtualWater
155
156. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
iOrgel
156
157. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
iOrgel
157
158. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
iOrgel
158
159. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
iOrgel
159
160. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
LogMeln
160
161. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
LogMeln
161
162. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
LogMeln
162
163. 03 UX디자인 가이드라인1 - 애플 iOS의 mobile HIG
Human Interface Principles
LogMeln
163
164. 04 플랫폼별 UX디자인 가이드라인2
구글 Android의 I/O Guide
164
165. 04 플랫폼별 UX디자인 가이드라인2
구글 Android의 I/O Guide
Android 플랫폼의 UX디자인 가이드라인 –
2011 I/O Conferrence의 주요 내용 정리
165
166. 04 플랫폼별 UX디자인 가이드라인2
구글 Android의 I/O Guide
Android 플랫폼의 UX디자인 가이드라인 –
2011 I/O Conferrence의 주요 내용 정리
Android의 UX디자인 특성이 반영된
모바일 앱 베스트3
166
167. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
167
168. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
Aldiko
168
169. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
Aldiko
169
170. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
Aldiko
170
171. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
크고, 명확하게 알 수 있는 버튺과 아이템
Aldiko
171
172. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
크고, 명확하게 알 수 있는 버튺과 아이템
다양한 스크린을 대비한 그래픽요소
Aldiko
172
173. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
크고, 명확하게 알 수 있는 버튺과 아이템
다양한 스크린을 대비한 그래픽요소
적절한 마짂, 패딩 사용 (미적, 기능적 이유)
Aldiko
173
174. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
크고, 명확하게 알 수 있는 버튺과 아이템
다양한 스크린을 대비한 그래픽요소
적절한 마짂, 패딩 사용 (미적, 기능적 이유)
뷰, 액티비티 스택의 적절한 관리
Aldiko
174
175. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
크고, 명확하게 알 수 있는 버튺과 아이템
다양한 스크린을 대비한 그래픽요소
적절한 마짂, 패딩 사용 (미적, 기능적 이유)
뷰, 액티비티 스택의 적절한 관리
가로-세로 화면전홖에 대한 대응책
Aldiko
175
176. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Good UX를 위한 권장사항
각 플랫폼의 디자인 가이드라인 알기
크고, 명확하게 알 수 있는 버튺과 아이템
다양한 스크린을 대비한 그래픽요소
적절한 마짂, 패딩 사용 (미적, 기능적 이유)
뷰, 액티비티 스택의 적절한 관리
가로-세로 화면전홖에 대한 대응책
Aldiko 통일감을 위한 테마, 스타일, 컬러의 준비
176
177. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
177
178. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
Google
Voice
178
179. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
사용자에게 집중
Google
Voice
179
180. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
사용자에게 집중
필요한 것들이 잘 보이도록
Google
Voice
180
181. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
사용자에게 집중
필요한 것들이 잘 보이도록
개발도중에도 사용자의견을 반영
Google
Voice
181
182. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
사용자에게 집중
필요한 것들이 잘 보이도록
개발도중에도 사용자의견을 반영
사용자의 행동, 상황, 반응을 예측
Google
Voice
182
183. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
Principles for Good UI
사용자에게 집중
필요한 것들이 잘 보이도록
개발도중에도 사용자의견을 반영
사용자의 행동, 상황, 반응을 예측
사용자가 오류를 만들더라도 정상 작
동하도록
Google
Voice
183
184. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙1.사용자에게 집중
184
185. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙1.사용자에게 집중
My Tracks
185
186. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙1.사용자에게 집중
사용자를 파악하라
(나이, 기술수준, 문화, 장애 등)
My Tracks
186
187. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙1.사용자에게 집중
사용자를 파악하라
(나이, 기술수준, 문화, 장애 등)
'사용자 최우선'의 마음가짐으로 디자
인하라 (꼭 해야 할 일만 하려고 한다)
My Tracks
187
188. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙1.사용자에게 집중
사용자를 파악하라
(나이, 기술수준, 문화, 장애 등)
'사용자 최우선'의 마음가짐으로 디자
인하라 (꼭 해야 할 일만 하려고 한다)
실제 사용자를 대상으로 개발
초기부터, 가급적 자주 테스트하라
My Tracks
188
189. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙2. 필요한 것이 잘 보이도록
189
190. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙2. 필요한 것이 잘 보이도록
Kayak
190
191. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙2. 필요한 것이 잘 보이도록
사용자가 가장 자주 사용하는 기능은
앱을 실행즉시 보이고, 사용할 수 있도
록 한다.
Kayak
191
192. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙2. 필요한 것이 잘 보이도록
사용자가 가장 자주 사용하는 기능은
앱을 실행즉시 보이고, 사용할 수 있도
록 한다.
부가적인 기능은 메뉴버튼속에 숨겨서
보이지 않도록 한다.
Kayak
192
193. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙3. 사용자가 터치결과를 알도록
193
194. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙3. 사용자가 터치결과를 알도록
Seesmic
194
195. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙3. 사용자가 터치결과를 알도록
모든 UI요소에 최소
4단계의 반응과정을 부여
(default, disabled, focused, pressed)
Seesmic
195
196. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙3. 사용자가 터치결과를 알도록
모든 UI요소에 최소
4단계의 반응과정을 부여
(default, disabled, focused, pressed)
사용자 행동의 결과는 명확하게
보여지도록
Seesmic
196
197. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙3. 사용자가 터치결과를 알도록
모든 UI요소에 최소
4단계의 반응과정을 부여
(default, disabled, focused, pressed)
사용자 행동의 결과는 명확하게
보여지도록
다운로드 등의 임무에는 진행상황
표시하기
Seesmic
197
198. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙4. 사용자 행동, 상황, 반응 예측
198
199. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙4. 사용자 행동, 상황, 반응 예측
Evernote
199
200. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙4. 사용자 행동, 상황, 반응 예측
사용자가 기대하는 바
(인터랙션, 관련정보, 반응 등)를
제공
Evernote
200
201. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙4. 사용자 행동, 상황, 반응 예측
사용자가 기대하는 바
(인터랙션, 관련정보, 반응 등)를
제공
터치 아이템은 한 눈에 보기에도
터치가능한 것으로 보이도록
Evernote
201
202. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙5. 사용자가 오류를 만들지 않도록
202
203. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙5. 사용자가 오류를 만들지 않도록
K9 Email
203
204. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙5. 사용자가 오류를 만들지 않도록
사용자가 사용할 필요가 없는
부분은 disabled
K9 Email
204
205. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙5. 사용자가 오류를 만들지 않도록
사용자가 사용할 필요가 없는
부분은 disabled
돌이킬 수없는 액션은
그 수를 제한적으로
K9 Email
205
206. 04 UX디자인 가이드라인2 - 구글 Android의 UI Guideline
UI 원칙5. 사용자가 오류를 만들지 않도록
사용자가 사용할 필요가 없는
부분은 disabled
돌이킬 수없는 액션은
그 수를 제한적으로
확인 창을 통해 'undo'할 수 있도록
K9 Email
206
227. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Modern
227
228. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Modern
228
229. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Modern
minimal &
undecorated
Modern design in a touch application is
undecorated, free of chrome elements,
and minimally designed
229
231. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | “On the Go” Capable
231
232. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | “On the Go” Capable
232
233. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | “On the Go” Capable
simple &
quick-use
Focuse on simple, quick-use scenarios.
Just a few spare moments to do what
users need to do.
233
235. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Clean
235
236. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Clean
236
237. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Clean
succinct
& intuitive
Use space around content and make labels succinct, intuitive.
237
239. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be in Motion
239
240. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be in Motion
240
241. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be in Motion
flexible &
interactive
Create the impression of tangibility by objects flexible & interactive.
241
243. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Simple, Readable
243
244. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Simple, Readable
244
245. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Simple, Readable
and
minimalistic
Keep each screen as focused as possible
and eliminate any extra clutter.
245
247. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Innovative
247
248. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Innovative
248
249. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Innovative
drastical
differences
Design principles between the desktop
and mobile platforms are drastically
different, and you should use the
appropriate principles for each.
249
251. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Consistent
251
252. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Consistent
252
253. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Consistent
interact within
consistency
Consistent in how users interact with it
for things like navigating, changing
settings, performing list deletions, and
other interactions
253
255. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Authentic
255
256. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Authentic
256
257. 05 UX디자인 가이드라인3 - MS WP7의 UI Guideline
Metro design | Be Authentic
high-quality
visual elements
While remaining clean and modern, your
application should also employ its own
color scheme and high-quality visual
elements that showcase its functionality
and distinguish it from other applications.
257