3. ㈜유미테크3㈜유미테크 UI/UX 디자인
사용자 인터페이스
사용자에게 편리하게
사용할 수 있는 환경을
제공하는 설계 내용
(버튼, 메뉴…)
사용자 경험
사용자가 서비스를
이용하면서 느끼는
사용자의 총체적 경험
(정보구조, 유용성과 편리함, 그래픽, UI)
1. UI/UX란??
UX 디자인 결과물 = UI + α
UXUI
=
8. ㈜유미테크8㈜유미테크 UI/UX 디자인
1. UI/UX란??
Design의 변화
얼마나다양한기능이있나?
기능성 디자인 시대
품질,기능성,사용성,
겉모양모두만족스러운가?
만족성 디자인 시대
제품을사용하며행복감을
느끼는가?
감성 디자인 시대
초기 기능성 중심에서 차츰 사용성과 감성 디자인으로 변화
9. ㈜유미테크9㈜유미테크 UI/UX 디자인
1. UI/UX란??
2017년 웹디자인의
키워드는 공리주의!!
가상현실(VR) 또는 애니메이션 효과등 화려해 보이는 웹디자인은 모두 버려라!!
※ 공리주의 : 1863년 영국의 철학자 밀(Mill, J.S.)쓴 책에서 최대의 사회적 효용을 가져오는 행복!! 즉 공리주의 제창
최대다수의 최대 행복을 추구함으로써, 사회전체의 행복의 조화시키려는 사상
사용자 욕구 충족!!
11. ㈜유미테크11㈜유미테크 UI/UX 디자인
문제점)
- UX가환자Jenny를죽인사례…
- 암환자인Jenny의처방을간호사들이위와같은복잡한UI때문에제대로된처방을내리지못하여죽게된사례
1) 최악의 디자인 사례 – 병원 관리시스템
2. UX 디자인 사례
12. ㈜유미테크12㈜유미테크 UI/UX 디자인
문제점)
- 해커들에의해아이클라우드에있는사적사진들이 해킹당함.
- 안드로이드와애플이원격클라우드에서버에자동으로사진/비디오를업로드하는과정
- 사용자가다른곳에데이터가저장되고있는사실을모름
- 자동백업기능을홍보하지않음.사용자가알수없는설정을기본값으로설정해놓음.
1) 최악의 디자인 사례 – 자동 업로드
2. UX 디자인 사례
13. ㈜유미테크13㈜유미테크 UI/UX 디자인
2. UX 디자인 사례
Tmap4.4 이전 전략은 사용자수 증가와 사업 범위 확대 다양한 케이스를 보여주기 위해 복잡한 디자인
Tmap4.4 에서부터는 ‘빠르고 정확한 길 안내” 전략 수정 사용빈도가 높은 케이스 중심으로 디자인을 변경함.
분산된 목적지를 하나의 리스트로 정리하고, 소요시간을 첫화면에 기능을 추가
2) 우수 디자인 사례 – T map
14. ㈜유미테크14㈜유미테크 UI/UX 디자인
1) 주요 정보인 탑승인원과 출발지, 도착지에 집중할 수 있도록 구성!!
2) 선택이 완료되면 “Search Flights”버튼으로 다음으로 진행
2. UX 디자인 사례
4) 우수 디자인 사례 – 버진아메리카
16. ㈜유미테크16㈜유미테크 UI/UX 디자인
1. 아이트래킹(eye-tracking research) : 웹디자인에 대한 과학적 접근 검사 방법
사용자의 눈동자 움직임을 장비를 이용하여 추적 및 검사하는 방법
3. UI/UX 디자인을 위한 연구
17. ㈜유미테크17㈜유미테크 UI/UX 디자인
아이트래킹의 지침 1)
1) 매력적인 헤드라인 사용!! 방문자의 시선을 끄는 것은 사진이 아니다.!!
- 컴퓨터 스크린에서는 일반적인 생각과 다르게 그래픽(사진)보다 텍스트에 더 주목
3. UX 디자인을 위한 연구
18. ㈜유미테크18㈜유미테크 UI/UX 디자인
‘F’ 형태 패턴으로 사이트를 디자인하라!!
Nielsen Norman Group에의해사이트방문자들이웹페이지를읽을때F형태패턴으로읽는다는것이밝혀짐.
야후,네이버,다음,파란등기업들은이러한연구시설을바탕으로유저에게편의성을제공한다.
아이트래킹의 지침 2)
3. UX 디자인을 위한 연구
19. ㈜유미테크19㈜유미테크 UI/UX 디자인
광고에 시간을 허비하지 말라 – 사이트 방문자들도 분명히 그럴 것이다!!
대부분사람은화면에펼쳐진광고를귀찮아대부분무시하고웹페이지의유용한내용에집중한다–“Bannerblindness”
-웹페이지를탐색하는사람들이banner형태로 표시된정보를무의적으로무시하는현상
-돈을벌기위해광고에의지하는사이트는시간낭비일뿐이다.
디즈니 계열사 MMO업체 Club Penguin
; 귀찮은 광고를 없애고 게임플레어들에게
회원권을 구매하도록 만듦
아이트래킹의 지침 3)
3. UX 디자인을 위한 연구
20. ㈜유미테크20㈜유미테크 UI/UX 디자인
화려한 단어나 장식은 피하라!!
웹탐색대회에서오른쪽에커다랗게붉은글씨로화려하게문제를주었는데…13%만 탐색에성공하고,나머지는실패!!
F페턴으로사용자들의습관을정면으로위반해서생긴문제로써,즉,그글자가광고,홍보로오인하게만든사례.
현재의 인구 사이트중
아이트래킹의 지침 4)
3. UX 디자인을 위한 연구
28. ㈜유미테크28㈜유미테크 UI/UX 디자인
1) 기획 의도를 이해하기
UX, UI 디자인은 사용자 중심에서 기획하고 제작하는 것!!
디자인 또는 개발전에 기획의도에 맞는 확실한 정보와 배경등을 정확히 파악하고,
충분한 자료 조사를 한다.
5. UX 디자인 자세
29. ㈜유미테크29㈜유미테크 UI/UX 디자인
2) 디자이너 혼자만의 역할은 아니다!!
UX, UI 디자인은 디자이너 혼자만의 역할은 아니다!!
UX, UI 디자인은 단지 UI를 예쁘게만 만드는 것이 아니라,
실제 기획부터 개발자와 소통, 실제 평가와 의견 수렴등 모든 부분에 참여하여 접근해야 함.
5. UX 디자인 자세
