2011. 10. 30. 15:44ㆍUI 가벼운 이야기
2011년 10월 7일 금요일
장소: 포스코 P&S 타워
공식 블로그 : http://blog.naver.com/ux_intensive
UX intensive를 다녀왔습니다. 내용 정리 및 감상 중심으로 공유합니다.
(정리가 미흡한 점이 있을 수 있으나 이점 양해 부탁드립니다.)
터치 인터페이스 기술동향
- 사용자의 터치 및 근접 감지에 대한 기술 및 연구사례
이기혁교수 카이스트 HCI 연구실
Smart TV, Smartphone, PC/Notebook의 터치 인터페이스의 기술 동향에 대해서 알 수 있는 강의였습니다. 기술적인 부분에 대한 강의라서 기술 전문 용어들은 생소한 감이 없잖아 있었습니다.
인상깊은 기술중에는 Remote touch를 꼽을 수 있습니다. 일반적인 터치기술은 터치를 해야 된다는 제약점이 있는 반면 Remote touch는 터치를 하지 않더라도 손의 영역을 인식해서 구현이 가능하다는 점이 특이했습니다. 이 기술이 범용화된다면 등장할 수 있는 서비스는 어떤 것들이 있을지 기대됩니다. 각각의 기술 중에서 최고의 기술도 중요하지만, 어떤 도메인에 사용되느냐에 따라 적절한 기술이 쓰일 수 있다는 말씀이 인상적이었습니다.
1. Smart TV
TV 리모트 옵션
- RC car 콘트롤러
- 포인팅 & Shooting
- 제스쳐
- Remote touch : 손가락의 그림자를 통해 인터랙션 수행
- panasonic EZ Touch
- hover tracking touchpad
- iGesturePad
- Finger shadow sensing
Capacitive VS Optical
- Optical이 더 좋음
RemoteTouch UI
2. Smartphone
- Force gesture
- 압력, 수평 수직 감지 센서
- 최고의 기술이 무엇인지가 중요한 것이 아니라, 애플리케이션에 따라 적절한 기술이 쓰일 것
3. PC / Notebook
- 반 이상의 영역을 키패드가 차지하고 있음
- Dual screen notebook
- Asus at Cebit 2009
- Toshiba libretto w100
- Problem to solve
- Gesture design
- Control-Display mapping
- Feedback (texture가 없음, 반응이 없음)
- Multi touch gesture
- Mapping
- TactaPad (Tactiva, 2005)
UX, 그 개념, 구조, 범위 디자인의 위상과 역할
이은종교수 한동대학교
UX의 개념과 그간의 UX 디자이너의 롤 변화를 통해, 디자이너가 가져야 할 역할에 대한 강의였습니다. 그간 알고있었지만 명쾌하게 정리되지 않았던 UX의 개념에 대해서 차근차근 설명해주셨습니다.
우리는 UX 프로젝트를 하면서 중요한 UX 요소를 발견하여 프로젝트에 반영을 하곤 합니다. 하지만 항상 프로젝트가 성공하지는 않습니다. 어떻게 하면 프로젝트를 성공으로 이끌어 낼 수 있을까요? 이은종 교수님은 전략적 접근을 강조하고 있습니다. 모든 UX 요소가 함께 존재할 경우 충돌과 방해요소가 될 수 있으므로, 해당 상황에서 가장 중요하며 다른 요소가 부족하더라도 압도할 수 있는 요소를 찾는 것이 중요합니다.
1. UX, 그 개념, 구조, 범위
a. 감성 vs 실용
i. 스마트 냉장고
1. 손이 아파 못쓰겠다.
ii. 네비게이션
1. 카메라를 찍으면 해당 장소를 알려줌
b. 기능성 vs 사용성
i. 나는가수다
1. 내레이션, 표정, 포즈, 스토리, 진정성
c. UX에서 중요시 여기는 요소들
i. 다양한 사용자
ii. 휘발성이 강한 감정의 편린들
iii. 다양하고 복잡한 정보의 흐름
iv. 작아 보이지만 중요한 행위들로 구성
v. 내재된 정신 내면적 사고양식 파악의 어려움
d. UX의 구성
i. UX 상황에서의 목표 : 기대 목표(유용적목표:기능성+사용성, 정신적 목표:관계형성, 보안, 휴식, 프라이버시), 유희적 니즈(아름다운 소리, 그립감, 감촉, 예쁜 모양)
e. UX 디자인이란 무엇인가?
i. 해당 브랜드가 가지는 특성 하에 유용적, 유희적인 목표를 효과적으로 이루기 위해 구성해보는 4차원의 공간
f. UX의 구성원들
g. 칼라코드 사례
i. 밤에는 볼 수 없음. context를 고려해야 함
h. Profession vs Role
i. 총체적인 UX관점에서 역할의 재 분류가 필요.
2. 디자인의 위상과 역할
a. 전통적 의미의 디자인(심미성) -> 디자인 결과물에 영향을 주는 요소 및 가치들
b. 디자이너의 역할이 늘어나고 있다.
i. ideation vs creation
ii. 이론적 근거가 있어야 함
iii. 조직화
iv. Seamless rational 등
c. 디자인의 경쟁력
i. Design thinking
1. 디자이너의 해결안이 아름답고 창의적이며 제한적이지 않는 것은 아는것이 별로 없어서이다. - don norman
ii. creativity
1. 정보가 없는 ideation은 가치가 없다.
iii. savvy
1. KTX - 산천
iv. emotion
1. 디자인과 인간심리, visual interface design
v. 디자이너의 역할
1. 미스테리 샤퍼
2. UX관점에서 요구되는 디자이너의 상
a. 장점을 강화하려는 시도 : 더욱 차별화된 상황을 만들 수 있음
vi. UX의 미래
1. UX의 새로운 이슈들
a. 중요한 UX요소들을 넣었는데 왜 실패하나?
b. 전열 모드?
i. 열 교환
c. 정의 vs 정
i. 상당히 심도있는 조사와 다방면의 사용자 경험을 개선한 결과물이 왜 실패할까?
ii. 이상과 현실은 항상 부딪히며 기업의 사정이라는 것이 있다.
d. UX의 전략적 접근의 필요성
i. 시장의 판세속에서 접근을 해야 함
ii. overriding UX factor
iii. normative approach
iv. holistic approach
v. trend approach
vi. strategic approach
e. pitfall
i. 판세 변화의 파악보다는 지난 성공요소에 집중하기
ii. UX 전략가의 취향과 한계
iii. UX 경험 요소의 부분합을 해결안으로 제시
iv. 머리속의 경험, 개인적인 경험의 보편화
v. 사용자 조사에 기반하면 잠재하고 있으나, 완전히 새로운 경험요소를 파악하기 어려움
2. UX전략을 잘 하려면?
a. 기존의 창의성/ 사고/ 역량의 유지
b. 복잡한 문제를 해결하는 사고방법에 대한 훈련
c. 인문학적 기반 하에 인간에 대한 깊은 이해
d. 도메인의 특성에 대한 풍부한 지식 등
UX/UI Design for smartphone
- Galaxy series
삼성전자 무선사업부 UX디자인파트 박주연 책임연구원
삼성전자에서 갤럭시 시리즈를 만들면서, 제조사에서 고민되는 바에 대한 이야기가 중심인 강연이었습니다. 실무에서 느낄 수 있는 디테일한 고민들이 좀 더 공유되었으면 하는 아쉬움이 있는 강연이었습니다.
제조사 입장에서는 스마트폰의 경우 (삼성전자의 경우 자체 OS를 개발하기도 합니다만) 구글의 안드로이드 OS에 의존하기 때문에 차별화할수 있는 부분이 그리 많지 않습니다. 그런 부분에 대한 고민들을 엿볼 수 있었습니다. 제조사 입장에서 차별화 할 수 있는 부분은 락스크린, 홈스크린, 메뉴구성 및 아이콘이며, 이에 대한 고민이 주를 이룹니다. 추가적으로 motion UI에 대한 고민과 위젯에 대한 고민을 하고 있습니다.
또한 이러한 고민들은 기술이 뒷받침될때 비로소 빛을 발한다는 것도 배울 수 있었습니다. 부가적 질문으로... 락스크린은 간결해야 할까요? 아니면 더 많은 정보를 주어야 할까요? 정답이 없는 질문이겠습니다만 이런 고민들에 대해 솔루션을 낼 수 있다면 타사대비 강점으로 작용할 수 있는 부분이 될 수도 있겠습니다.
1. UXD
a. 기업 경영의 핵심의 되는 경영전략임
b. the 3 elements of UX design
i. 거시적 3요소
1. 사용성, 유용성, 감성
ii. 미시적 3요소
1. 일관성(지역향에 따른 일관성), 혁신성, 구현 가능성
c. Internal actors of smartphone UX
i. UX
ii. 검증
iii. SW 개발
iv. 상품기획/마케팅
v. 영업
d. Internal actors of smartphone UX 2
i. 플랫폼 회사
ii. 제조사
iii. 통신사업자
iv. 웹 서비스
v. 개발자
e. 홈스크린, 락스크린, 메뉴
i. 홈스크린을 어떻게 가져가느냐가 중요
ii. 날씨, 시계, 구글 검색
iii. 하단 : 통화, 주소, 메시지, 어플리케이션
iv. 뉴스, 이메일 위젯
v. 위젯 리사이즈 기능 추가
vi. page transition, widget transition
f. 어플리케이션
i. 폴더, 페이지, 좌우 페이지 구조로 변경
g. 아이콘
i. 갤럭시 S2에서 변경
h. 위젯 편집
i. 기존에는 롱탭을 사용하고 있었으나 위젯 편집화면으로 변경함
i. 락스크린
i. 락은 기본적으로 간결해야 한다. vs 더 많은 정보를 주어야 한다.
ii. 락스크린은 이것도 해보고, 저것도 해보고 이러고 있음
iii. 어떤 사용자의 의견을 들어주어야 할까?
j. 라이브 월페이퍼
i. 날씨를 반영
k. 허브 시리즈
i. 뮤직허브, 소셜 허브, 게임허브, 리더스 허브
l. Motion UX
i. 수신전화 벨소리 끄기
ii. 탭 & 틸팅 (밀당)
iii. 탭 & 패닝 (위젯/메뉴 아이콘 이동)
iv. 동작으로 전화걸고... 바보스러운 동작이 되어서는 안된다. 손쉽게 할 수 있고, 거부감이 들지 않는 동작상황을 주어야 함
m. Voice to go
i. 유럽향 버전
n. 갤럭시 탭
i. Top 4 숏컷을 다른걸로 바꾸어야 하나?
ii. 인터넷 / 메인메뉴 / 이메일
o. 갤럭시 탭 10.1인치
i. 폰, 탭, TV?
p. 갤럭시 탭
i. 큰 화면을 어떻게 쓸 것인가?
ii. 캘린더, 음악, E-book
iii. Split view
1. 2단 뷰를 통해 메뉴 재정렬 수행
q. 컨버전스 기능
i. all share
ii. share via
삼성전자 UX센터 이노베이션 그룹 박현철 책임연구원
삼성전자의 Smart 냉장고 UX 프로세스 전반에 대한 발표였습니다. 퍼소나를 만들기 전에 마케팅자료를 기반으로 만들고, 유저 인터뷰용 리크루팅도 마케팅 세그먼트를 중심으로 진행했다는 점이 마음에 걸리기는 합니다. 퍼소나를 만드는데에는 마케팅 세그먼트들이 도움이 될 수 있겠으나, 유저 인터뷰용 리크루팅도 마케팅 세그먼트를 중심으로 할 필요가 있었을까요?
전자제품 양산형 프로젝트를 할때에는 특히나 하드웨어 부분도 고려해야 합니다. 본 프로젝트에서는 패널 제작 시 패널이 유리 재질이며, 하단부가 탈 우려가 있으므로 하단부를 GUI적으로 검게 처리했다는 점이 인상적이었습니다. 또한 냉장고 제품의 고유 특성들 - 제품도 여성이 고르고, 사용도 여성이 주로 한다는 점- 도 고려해야 할 것입니다. 냉장고의 경우 10년 주기로 교체가 일어나는데 10년동안 사용해도 질리지 않을 UI/GUI가 수반되어야 할 것입니다.
1. 제품 특성 이해
a. 선택도 여성이 하고, 결정도 여성이 함
b. 하드웨어적인 제품임
c. 10년 주기로 제품을 변경
d. 유사 제품 이력
i. 삼성 지펠, 지펠 패밀리 윈도우, 지펠 e-다이어리, RF4289HARS, 이커머스(이마트)
e. 사용자 평가
i. 개선을 위한 평가
1. 사용자 니즈 파악, 선행 제품의 UI 문제점 파악
2. 외부버튼 인지하기, 요리법 사용항법 보기, 경조사 사용하기, 전체기능 찾기...
ii. 등급을 위한 평가
2. 사용자 환경 이해
a. 냉장고 : 가족의 정보 집합소
i. 학습정보, 광고지. 쿠폰, 사진 등
ii. 깔끔하게 보관하고 싶은 니즈?
3. 컨셉 & 시나리오 개발
a. 요리법(추천식단), 식품관리, 경조사 알림, 메모기능, 포토앨범, Ticker, 제품간 연결, 부가기능(엔터테인먼트- 가족 알림)
4. UI 설계
a. 단순한 구조의 네비게이션
b. 이전 버튼을 왼쪽에 넣을것인가? 왼쪽에 넣을 것인가? 에 대한 고민들...
5. GUI 디자인
a. 홈 화면 디자인
b. 시간에 맞게 홈 화면이 바뀜
c. 모던, 팬시
d. 미국 : 이성적인 부분을 강조
e. 화면 디자인 - 채도 보정
f. 아이콘 세트 메타포 가이드 정의
g. 냉장고 온도 / 설정
6. 음원 개발
a. 15종 소리 개발
7. 사용자 평가
a. 가설에 대한 검증
i. 네비게이션의 효율/효과
ii. 인터페이스의 효과
iii. 개발 결과물에 대한 만족
b. 타겟 유저를 까다롭게 골랐음
i. 28세~38세 7명
ii. 소득, 가계소득
iii. 양문형 구입
iv. IT 기기 사용에 가능한 자
8. 제품 품질 평가
9. 양산
a. 소프트웨어에 대한 이해가 필요
i. 주장에 대해 타당한지, 타당하지 않은지 판단
ii. 구현 불가능한 것에 대한 경우 설득해야 함
iii. CP의 성격을 이해해야 함
1. 24시간 ON
2. 글자가 바뀌어도 다시 긁어들이는 현상
3. 오버플로우 나는 현상
b. 초기 기획부터 고민을 해야함
c. 유리형 패널 및 소프트웨어 문제로 인해 하단부를 어둡게 디자인함
네이버 검색 UX
남찬우 실장 (NHN 검색혁신 UX실)
네이버 검색 UX에 대한 강연이었습니다. 삼성전자와 마찬가지로 현재 진행중인 프로젝트에 대한 공유라기보다는 기존에 하고있던 서비스에 대한 소개 중심의 강연이었습니다. 1024x768 해상도 대응에 대한 고민들. 이미지 크기를 어떻게 할 것인가? 에 대한 고민들. (사용자는 사용성이 다소 떨어지더라도 이미지가 크면 클 수록 만족도가 높아진다고 하였습니다.) 검색 결과를 어떻게 보여줄 것인지에 대한 고민들... 각종 스마트파인더 DB구축을 통해 특정단어 검색 시 검색 결과에 대해 정보디자인을 하는 방법(시각적으로 한눈에 복잡한 정보를 이해할 수 있도록)을 사용하고 있습니다.
또한 제안서 포멧을 통일하였다는 점도 인상깊더군요. 마지막 메시지가 기억에 남는 강연이었습니다. 1. 이노베이션은 항상. 하지만 조용하게, 2. 프로토타입을 제안서와 기획서로. 3. 어려운 메시지일수록 단순하고 명확하게 시각화
1. 1024 * 768에서 잘려보이는 현상 개선
a. 결론적으로는 자르는게 1024에서는 확실히 좋더라
b. 해상도가 커졌을땐 비슷하더라
c. 리서치 포멧 통일화
2. 통합검색 우측영역 : A-B 테스트
3. 이미지 검색 사용 현황 : 아이트래킹
a. 사용자는 이미지가 클수록 좋아한다.
4. 스마트 파인더
a. 휴대폰, 사람, 영화 필터링을 어떻게 풀 것인가?
b. 음악검색
c. 영화 스마트파인더
d. 이미지 검색
e. 동영상 검색 (드래그 앤 드롭을 통한 레이아웃 변경 및 감상 UI 제안)
5. Message
a. 이노베이션은 항상. 하지만 조용하게.
b. 프로토타입을 제안서와 기획서로.
c. 어려운 메시지일수록 단순하고 명확하게 시각화.
검색 결과를 어떻게 보여줄 것인가에 대한 고민들
1. 방대한 정보vs 요약정보
사용자가 어떤 것을 더 효과적으로 받아들이는지에 대한 파악이 중요함.
2. 정보를 어떻게 표현하는가?
-사용자는 검색 결과를 DB로 보지 않고 컨텐츠로 인식함.
-검색 결과를 패턴화하는 것이 중요하다. 현재는 정보의 종류가 더욱 다양해 지고 있으므로 다양한 패턴이 나오고 있음.
-검색 결과를 시각화하여 정답화 정보로 보여주는 것이 좋음. (예 : 소고기 부위 검색 결과를 다음과 같이 보여주는것)
2. 검색형 정보 vs 탐색형 정보
실시간 검색어>인기 검색어가 대표적 탐색형 정보
3. SE 검색
-빠른 검색이 가능하나 얻고 싶은 정보를 잘 못 얻는다.
-통검으로 가지고 가기에는 너무 과감한 시도일 것.
-통검과 SE 검색의 중간점을 고민하는 중.
모바일 UX
PC 웹, 모바일 웹, 모바일 앱 UX/UI 설계과정에서의 방향과 고민
NHN UX Lab 이윤희 랩장
모바일 웹과 모바일 앱을 어떻게 가져갈지에 대한 NHN의 고민이 드러나는 발표였습니다. 현재도 모바일 웹과 앱에 대한 고민을 하고 있는것으로 보이며, 앞으로 어떻게 변하고 어떻게 될지에 대해서 지켜볼 필요가 있을 것 같습니다.
1차 전략은 PC웹, 모바일 웹, 모바일 앱을 각각의 플랫폼 특성에 맞추어서 전개하였으나, 2차 전략으로 Family UI에 최적화한 UI를 전개했음을 알 수 있습니다. 그 이유는 사용자는 모바일 앱에서도 웹에서 사용하는 동일한(혹은 준하는) 경험을 하고 싶다고 하기 때문이라고 하네요.
또한 속도에 대한 고민도 하고 있습니다. 속도를 줄이기 위해 이미지 용량을 줄이고, 꼭 필요한 이미지의 경우만 이미지로 보여주는 방법들을 사용하고 있더군요.
모바일의 경우 런처 아이콘을 통해 앱 혹은 웹으로 진입하기 때문에 런처 아이콘에 공을 들였다고 합니다. 모바일 앱과 모바일 웹 아이콘을 동일한 Look & Feel로 전개하였으며 동일한 모바일 웹과 앱을 설치(혹은 바로가기 추가) 했을 경우 모바일 웹 런처 아이콘은 웹이라고 부가 표시를 했다고 합니다. 단 Naver 웹과 Naver 앱의 런처아이콘만 동일한 모양의 다른 색상으로 풀어내었습니다.
네이버 안드로이드 앱의 경우 안드로이드 마켓에서 다운로드 받아야 되는데, 다운로드 받기 위해서는 구글 계정이 있어야 한다는 진입 장벽이 있습니다. 이에 따라 마켓을 거치지 않고 자체 다운로드 받을 수 있는 게이트 페이지를 만들었다고 합니다. 당연히 설치율이 높아졌다고 하네요.
제가 궁금한 점은 네이버에서 안드로이드 앱과 아이폰 앱의 UI를 거의 흡사하게 가져가고 있는데 왜 그렇게 할까? 라는 생각이 들었습니다. 일관성 측면일까요? 아니면 개발 비용 측면일까요? 의견주시면 감사하겠습니다.
1. 웹(2011년 현재)
a. 홈이 3개가 되는 형태
b. 네이버 메인 페이지가 바뀌는데 있어서의 어려움
i. 유저는 바뀌고 싶어하지 않는다.
ii. 하지만 더 좋은게 뭐지? 라는 고민을 하고 있음
2. 모바일 서비스
a. 기존에 있는 메인페이지의 느낌(웹의 느낌을 많이 가져감)에서 아이콘 중심으로 서비스를 찾아갈 수 있는 구조로 변경 되었다가 콘텐츠와 서비스를 찾아갈 수 있는 구조로 변경
b. 주요 고려사항
i. 전략 : PC + 모바일 웹 + 모바일 앱
ii. Small screen
iii. 속도
iv. 브랜딩
v. 위젯
vi. 스프레드
c. 전략
i. 1번째 라인업 : PC, Mobile 각자의 특성이 있을 것
1. 유저 피드백 : 네이버 서비스를 통합적으로 쓰고 싶다. 앱의 경우 네이버를 원활하게 쓰고싶은데 쓸 수가 없다. 음성검색 잘 안되요(기능 향상의 니즈)
ii. 2번째 라인업 : PC 와 Mobile에서 동일한 경험을 주자, 밝고 면을 넓게 쓰는 느낌을 주자.
1. 통합적인 구조로 가져감
2. Naver ME 통합
3. 유저 피드백 : 인식 검색 접근이 어려워졌다.
d. 웹에 있는 기능 중 어떤부분을 모바일로 넣을 것인가에 대한 고민.
-사용 데이터 통계를 통해서, 모바일에서 쓸만한 것들이 무엇인가라는 고민으로부터 필수적으로 넣을 것들을 선별-> 검색, 뉴스 등등. 서비스로 바로바로 가는 루트
: 모바일은 아래로만 내리는 형태임, 통일성있는 루트 구현이 중요
e. Speed
i. 용량을 최대한 줄이려는 노력
1. 이미지를 어떻게 할건가?
2. 퀄리티에 이상이 없을만한 압축률을 정함
3. 가급적 이미지를 사용하지 않음
‘객관적으로 우리 사이트는 몇 초에 뜨는가?’ 가 아니라 ‘유저가 주관적으로 느끼는 로딩속도는?’ ->-객관적인 속도 측정이 있지만 객관적인 측정결과를 어떻게 반영하냐는 다른 문제 임. (예 : 웹페이지 하나를 여는데 2초-> 빠른 속도일까 느린 속도일까? 사람마다 다른 답을 가지고 있음. 따라서 주관적으로 느끼는 속도가 목표점이 되어야 한다.)
4. 목적형 서비스, 서핑형 서비스에 따라 로딩속도가 다를것이다.
5. 안드로이드 아이폰에따라 로딩속도가 다를것이다.
f. Branding
i. 아이콘 디자인
1. 모바일로 진입하는 첫관문임
2. 앱 아이콘과 웹 아이콘을 통일
3. 아이콘에서 네이버 로고 위치 통일 및 가이드라인 제작
4. 단 네이버 아이콘만 다름
5. 두개를 설치했을 경우 앱인지 웹인지 구별할 수 있게 웹의 경우 부가 표시
6. 네이버 안드로이드 위젯
g. 배포
i. 안드로이드 마켓을 거치지않고도 배포가 가능하게 설계
ii. 설치율이 높아짐
PS. 정리하는데 도움주신 진현정님 감사합니다.
감사합니다.