20170414 techday 2nd_uiux디자인-최민희

㈜유미테크

UI/UX 디자인

2017.04.14

최민희 [email protected]

㈜유미테크2㈜유미테크 UI/UX 디자인

UI/UX란??

1. UI/UX란??


사용자 인터페이스사용자에게 편리하게사용할 수 있는 환경을제공하는 설계 내용

(버튼, 메뉴…)

사용자 경험사용자가 서비스를이용하면서 느끼는

사용자의 총체적 경험(정보구조, 유용성과 편리함, 그래픽, UI)

1. UI/UX란??

UX 디자인 결과물 = UI + α

UXUI =


1. UI/UX란??


1. UI/UX란??

제품 디자이너

패트리샤 무어

3년동안 노인 분장을하고 노인의 입장에서혁신적인 제품을 만듦!!


사용자가 느끼는 좋은 UX 디자인

사용자 경험에 의한 “익숙함”

+

α“surprise” 예상치 못한 즐거움

1. UI/UX란??


UX 잘 만들어졌는지 평가 기준은

1. UI/UX란??


1. UI/UX란??

Design의 변화

얼마나다양한기능이있나?

기능성디자인시대

품질, 기능성, 사용성,겉모양모두만족스러운가?

만족성디자인시대

제품을사용하며행복감을느끼는가?

감성디자인시대

초기 기능성 중심에서 차츰 사용성과 감성 디자인으로 변화


1. UI/UX란??

2017년 웹디자인의

키워드는 공리주의!!

가상현실(VR) 또는 애니메이션 효과등 화려해 보이는 웹디자인은 모두 버려라!!

※ 공리주의 : 1863년 영국의 철학자 밀(Mill, J.S.)쓴 책에서 최대의 사회적 효용을 가져오는 행복!! 즉 공리주의 제창최대다수의 최대 행복을 추구함으로써, 사회전체의 행복의 조화시키려는 사상

사용자 욕구 충족!!


UX 디자인 사례

2. UX 디자인 사례


문제점)- UX가환자Jenny를죽인사례…- 암환자인 Jenny의처방을간호사들이위와같은복잡한UI때문에제대로된처방을내리지못하여죽게된사례

1) 최악의 디자인 사례 – 병원 관리시스템



문제점)- 해커들에의해아이클라우드에있는사적사진들이 해킹당함.- 안드로이드와애플이원격클라우드에서버에자동으로사진/비디오를업로드하는과정- 사용자가다른곳에데이터가저장되고있는사실을모름- 자동백업기능을홍보하지않음. 사용자가알수없는설정을기본값으로설정해놓음.

1) 최악의 디자인 사례 – 자동 업로드




Tmap4.4 이전 전략은 사용자수 증가와 사업 범위 확대 다양한 케이스를 보여주기 위해 복잡한 디자인Tmap4.4 에서부터는 ‘빠르고 정확한 길 안내” 전략 수정 사용빈도가 높은 케이스 중심으로 디자인을 변경함.분산된 목적지를 하나의 리스트로 정리하고, 소요시간을 첫화면에 기능을 추가

2) 우수 디자인 사례 – T map


1) 주요 정보인 탑승인원과 출발지, 도착지에 집중할 수 있도록 구성!!2) 선택이 완료되면 “Search Flights”버튼으로 다음으로 진행


4) 우수 디자인 사례 – 버진아메리카


UX 디자인을

위한 연구

3. UX 디자인을 위한 연구


1. 아이트래킹(eye-tracking research) : 웹디자인에 대한 과학적 접근 검사 방법사용자의 눈동자 움직임을 장비를 이용하여 추적 및 검사하는 방법

3. UI/UX 디자인을 위한 연구


아이트래킹의 지침 1)

1) 매력적인 헤드라인 사용!! 방문자의 시선을 끄는 것은 사진이 아니다.!!

- 컴퓨터 스크린에서는 일반적인 생각과 다르게 그래픽(사진)보다 텍스트에 더 주목



‘F’ 형태 패턴으로 사이트를 디자인하라!!

Nielsen Norman Group에의해사이트방문자들이웹페이지를읽을때F형태패턴으로읽는다는것이밝혀짐.야후, 네이버, 다음, 파란등기업들은이러한연구시설을바탕으로유저에게편의성을제공한다.




광고에 시간을 허비하지 말라 – 사이트 방문자들도 분명히 그럴 것이다!!

대부분사람은화면에펼쳐진광고를귀찮아대부분무시하고웹페이지의유용한내용에집중한다–“Banner blindness”-웹페이지를탐색하는사람들이banner형태로표시된정보를무의적으로무시하는현상-돈을벌기위해광고에의지하는사이트는시간낭비일뿐이다.

디즈니 계열사 MMO업체 Club Penguin; 귀찮은 광고를 없애고 게임플레어들에게회원권을 구매하도록 만듦




화려한 단어나 장식은 피하라!!

웹탐색대회에서오른쪽에커다랗게붉은글씨로화려하게문제를주었는데… 13%만탐색에성공하고, 나머지는실패!!

F페턴으로사용자들의습관을정면으로위반해서생긴문제로써, 즉, 그글자가광고, 홍보로오인하게만든사례.

현재의 인구 사이트중




UX 디자인 전략

4. UX 디자인 전략


1) 제품(사이트)에 미쳐라

자신의 디자인에 관찰하고 사용자가 원하는 것을 요구 분석하라!!

4. UI/UX 디자인 전략


2) 보이지 않는 UX를 도출하라

보이지 않는 사용자의 흐름을 파악하라!!



3) 사용자를 귀찮게 하지 마라!!

사용자가 원하는 최소한의 클릭 할 수 있게 하라!!



4) Simple is Best!

너무 많은 것을 넣어서 혼란을 주지 마라!!



5) 혁신하려 하지 마라!!

사용자를 당황하게 해선 안된다. 일관성을 유지해야 한다.



UI / UX 디자인 자세

5. UI/UX 디자인 자세


1) 기획 의도를 이해하기

UX, UI 디자인은 사용자 중심에서 기획하고 제작하는 것!!디자인 또는 개발전에 기획의도에 맞는 확실한 정보와 배경등을 정확히 파악하고,

충분한 자료 조사를 한다.

5. UX 디자인 자세


2) 디자이너 혼자만의 역할은 아니다!!

UX, UI 디자인은 디자이너 혼자만의 역할은 아니다!!UX, UI 디자인은 단지 UI를 예쁘게만 만드는 것이 아니라,

실제 기획부터 개발자와 소통, 실제 평가와 의견 수렴등 모든 부분에 참여하여 접근해야 함.



3) 다른 사람의 의견을 수렴하라!!

자기 주관보다는 사용자 입장에 맞춰 디자인을 해야 한다.



UX 디자인 정리

6. UX 디자인 정리


UX 목적은!!

사용자 편의

6. UX 디자인 정리

개발자디자이너

기획자

http://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjG_7jAwJ7TAhXMebwKHVlLAW4QjRwIBw&url=http://blog.naver.com/PostView.nhn?blogId=designer_dh&logNo=220783636690&psig=AFQjCNEj0cJYxUb8n9K9NN6HDxKEU0dkzA&ust=1492072261216821

http://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjG_7jAwJ7TAhXMebwKHVlLAW4QjRwIBw&url=http://blog.naver.com/PostView.nhn?blogId=designer_dh&logNo=220783636690&psig=AFQjCNEj0cJYxUb8n9K9NN6HDxKEU0dkzA&ust=1492072261216821

https://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiC0OrawJ7TAhWKybwKHZljBFsQjRwIBw&url=https://ozcareer.com.au/professional-employment/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88-%EA%B5%AC%EC%9D%B8/&bvm=bv.152180690,d.dGc&psig=AFQjCNHKiNZOF8iIEhH3eKjKN37Yn5Y8Nw&ust=1492072319323619

https://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiC0OrawJ7TAhWKybwKHZljBFsQjRwIBw&url=https://ozcareer.com.au/professional-employment/%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88-%EA%B5%AC%EC%9D%B8/&bvm=bv.152180690,d.dGc&psig=AFQjCNHKiNZOF8iIEhH3eKjKN37Yn5Y8Nw&ust=1492072319323619

http://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj46f7owJ7TAhWJi7wKHbD0ATEQjRwIBw&url=http://www.kimdirector.co.kr/bbs/view.php?id=webplan&no=256&bvm=bv.152180690,d.dGc&psig=AFQjCNG1qIEhrYxTgJU7Sc2ReoRPkIsrPg&ust=1492072352429653

http://www.google.co.kr/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj46f7owJ7TAhWJi7wKHbD0ATEQjRwIBw&url=http://www.kimdirector.co.kr/bbs/view.php?id=webplan&no=256&bvm=bv.152180690,d.dGc&psig=AFQjCNG1qIEhrYxTgJU7Sc2ReoRPkIsrPg&ust=1492072352429653