User Interface Design/Interaction

얼사마 2008. 5. 8. 19:00

http://www.songtapper.com/s/tappingmain.bin?dotap=1

 

지나가는 길에 어떤 음악을 들었다.

노래의 클라이막스는 대충 어떤 음인지, 박자인지 기억은 나지만,

가사도, 가수도 모른다.

하지만 찾아보고 싶다.

 

그래서 새로운 시도가 나왔나보다.

 

화면 중앙의 [ Click here to begin ] 을 클릭한후,

생각나는 pop song 을 속으로 부르면서 space bar를 연타해보자.

대충 어느 정도 했으면 다시 마우스로 [ Click here to finish tapping ] 클릭.

 

잠시 기다리면 검색 결과가 나온다.

 

본인이 부른 노래가 나왔는가...? ㅎ

검색 결과는 보장 못한다. ㅎㅎ

 
 
 

User Interface Design/Information Architecture

얼사마 2008. 5. 8. 18:29
원제는 Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies by Christina Laun.

Eye -tracking에 대한 다양한 자료들이 있지만, 실제로 디자인에 적용할 단계가 오면 "그래서 어떻게 하지?"라는 고민을 하기 마련이다. 여러가지 Eye-tracking 연구에서 나온 Insight들만 모아서 정리해 놓은 포스트가 있어 소개한다. 23가지 교훈(?) 정도로 정리하고 있는데, 상당부분 공감하는 부분이고, 일부는 흥미로운 것도 있다. 원문의 내용을 재그룹핑하고 커멘트를 살짝 추가했다.

Web Writing

1. 텍스트가 그래픽 이미지 요소보다 시선을 더 잡아끈다. Text attracts attention before graphics.
재 미있는 결과다. 아무래도 이미지 배너들이 현란한 환경에서 사용자들이 길들여지다 보니, 발생하는 현재의 병폐에 기인한 게 아닌가 싶다. 그래서인지 아래에도 언급되어 있지만 구글 애드센스와 같은 텍스트형 배너가 더 효과적이라고 한다.

2. 순서를 나타내기 위해서 숫자를 쓰는 것이 좋다. Fancy formatting and fonts are ignored.
당연한 거 같은데... ^^; 컨텐츠 작성 시에 '하나, 중얼중얼 / 둘, 중얼중얼' 이렇게 쓰는 것보다 '1, 중얼중얼 / 2, 중얼중얼'이렇게 쓰는 것이 사용자들이 정보를 찾기 위해 스캐닝하는데 도움이 된다는 얘기다.


3. 텍스트의 사이즈는 페이지를 열람하는 패턴에 영향을 끼친다. Type size influences viewing behavior.
텍스트의 사이즈가 작아지면 집중하게 되고, 텍스트의 사이즈가 커지면 스캐닝을 주로 한다고 하는데... 그럴 수도 있을 것 같지만... 정말 그럴까? 일반화되기는 어려운, 변수가 많은 이슈인 듯 하다.

4. 사용자는 관심이 있는 내용에 대해서만 서브타이틀을 본다. Users only look at a sub headline if it interests them.
당연!

5. 일반적으로 사용자들은 페이지 하단은 그냥 스윽 훑어본다. People generally scan lower portions of the page.
상단은 그래도 좀 찬찬히 보지만, 하단은 보는 듯 마는 듯 훑어본단다. 그래서 F 패턴이 나오겠지. 역으로 하단의 컨텐츠에 주요한 키워드에 대해서 시각적으로 강조한다면 이를 방지할 수도 있다는 얘기도 하고 있다.


6. 짧은 단락이 긴 단락보다 효과적이다. Shorter paragraphs perform better than long ones.
짧고 간결한 Web writing이 필요하다는 얘기다. 어떠한 사용자도 길고 지루한 텍스트를 읽지는 않는다. 따라서 단락이 길어진다면 적절하게 끊어주는 것도 센스.

7. 헤드라인에 먼저 시선이 간다. Headings draw the eye.
역시 당연!

8. 목록 형태가 줄글 보다 유리하다. Lists hold reader attention longer.
당연한 얘기이긴한데, 실제로 Web writing을 할 때 잘 고려하지 않는 요소이기도 하다. 긴 설명을 목록으로 간결하게 만들어서 제공할 수 있는 센스와 섬세함이 필요하다.

9.
긴 줄글은 피해라. Large blocks of text are avoided.
큰 텍스트 덩어리라고 판단이 되면 점프하고 다른 짧은 내용들을 본다는 얘기. 따라서 긴 줄글을 작은 여러 개의 단락으로 나누어 쓸 필요가 있다.

10. 볼드, 밑줄, 색상 텍스트 등을 활용한 포맷이 보기에 더 쉽다. Formatting can draw attention.
역시 스캐닝하기에 적절하게 만들어진 웹문서가 훨씬 가독성이 높고 사용자들이 읽도록 동기부여를 하는 것은 사실이다.


Page Layout & Visual Design

11. 페이지 로딩 초기에 시선은 좌측 상단에 머무른다. Initial eye movement focuses on the upper left corner of the page.
일반적인 경우에 동의한다. 하지만, 재방문율이 높은 사이트의 경우, 주로 사용하는 기능이 있는 위치에 시선이 머무를 것 같은데... 네이버 홈페이지에서 검색영역에 시선이 가장 먼저 가는 것처럼.

12. 페이지의 아래쪽을 훑어보기 전에 좌측 상단과 상단영역을 살펴본다. Users initially look at the top left and upper portion of the page before moving down and to the right.
동의! 그래서 F형태의 시선흐름이 나타나게 된다. (Jakob Nielsen의 연구 자로 참고)

13. 사용자들은 배너를 무시하는 경향이 있다.
Readers ignore banners.
당연한 내용인데, 첨언을 하자면... 사용자가 한 번 배너영역이라고 인지하면 의식적으로 이를 피하는 패턴이 나타난다. 실제로 Eye gaze패턴을 보면, 배너 영역만 뻥 뚫리는 경우도 종종 발생한다.

14. 2개이상의 컬럼을 사용하는 것보다 하나의 컬럼을 사용하는 것이 유리하다. One-column formats perform better in eye-fixation than multi-column formats.
복잡한 레이아웃보다는 한 눈에 스윽 훑어볼 수 있는 레이아웃이 좋다는 얘기

15. 깨끗하고 깔끔한 인물 이미지가 효과적이다. Clean, clear faces in images attract more eye fixation.
인물 사진을 사용할 거라면, 깨끗하고 깔끔한 (예쁜?) 인물의 이미지를 사용할 것을 권장하고 있다. 가상의 인물이 아닌 진짜 인물이어야하고 모델 사진은 사용하지 않는 것이 좋단다.

16. 큰 이미지가 효과적이다. Bigger images get more attention.
기왕 이미지를 쓸 거라면 큰 걸 쓰라는 얘기다. 하지만 중국과 같은 상황에서는 글쎄... 가능할까?

17. 사용자들은 버튼이나 메뉴를 찾는데 시간을 많이 소비한다. Users spend a lot of time looking at buttons and menus.
네비게이션 요소들을 중요하게 생각한다는 얘기. 그리고 쉽게 찾을 수 있어야 한다는 얘기. 점점 Interaction이 Rich해져가는 현재 트렌드에서 네비게이션 요소들이 Contextual하게 변하면서 종종 한 눈에 쉽게 찾기 어려운 경우가 있는데... 고민해볼만한 이슈인 것 같다.

18. 흰색 배경을 사용하라. White space is good.
텍스트와 배경이 쉽게 구분되어서 가독성도 좋아지고 컨텐츠가 돋보일 수 있단다.

19. 네비게이션은 상단에 위치하는 것이 좋다. Navigation tools work better when placed at the top of the page.
아무래도 다른 내용들을 종합하면 이 결론이 나오는 것 같은데. ^^;


Advertisement
* 아무래도 Eye-tracking이라는 장비 자체가 시선의 경로를 추적하는 것인만큼 배너의 효과 측정에 많이 사용되어서 이에 관련된 내용이 많다.

20. 사용자들은 화려한 요소들이나 폰트들을 무시한다.
Fancy formatting and fonts are ignored.
사용자들은 화려한 요소들에는 정보가 없거나 광고이지 않을까하고 생각한다고 한다. 일리가 있는 듯...

21. 상단 좌측에 위치한 배너가 효과적이다. Ads in the top and left portions of a page will receive the most eye fixation.
당연! 배너의 위치를 고민할 때 이러한 요소를 고민할 필요가 있다. 하지만, 웹사이트의 Identity는 상단좌측에서 표현되기 때문에 심사숙고할 필요도 있다.

22. 중요한 컨텐츠 다음에 위치하는 배너가 효과적이다. Ads placed next to the best content are seen more often.
그래서 뉴스사이트에 컨텐츠 중간 삽입형 배너가 유행하고 있는지도...

23. 텍스트형 배너가 더욱 효과적이다.
Text ads were viewed mostly intently of all types tested.
구글 애드센스에 힘을 싣어주는 결과다. ^^; 흥미로운 결과.

아래는 Eye-tracking과 관련된 연구자료 (Jakob Nielsen)
- 언제부터인가 그는 자기 리포트 내용을 다 공개안하고 팔기 시작해서 항상 아티클이 맛배기식인거 같아 좀 그렇다. -_-;;
1) Eyetracking Study of Web Readers (쪼꼼 오래된 자료)
2) Eyetracking Research (6개의 리포트 맛배기가 링크되어 있다.)
3) F-shaped Pattern For Reading Web Content

 
 
 

User Interface Design/Interaction

얼사마 2008. 5. 8. 18:05
How to Design a Great User Experience

 

원문: How to Design a Great User Experience

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/UxGuide/UXGuide/Principles/GreatApps/GreatApps.asp


본 내용은 Microsoft에서 운영하는 MSDN 사이트에How to Design a Great User Experience라는 제목으로 올라온 내용으로,

훌륭한 사용자 경험을 디자인 하기 위한 기본적인 원칙과 가이드에 대해 간략하게 소개하고 있는 자료입니다.

 

사내에 공유하고자 번역했던 자료인데, 전문 번역가가 아니라 직역이고 어설프긴 하지만

이왕 번역한거 기본적인 원칙과 의미를 되새겨보기에 좋은 내용이라 도움이 될 것 같아 공유합니다.

Windows를 기반으로 설명된 부분은 일반화하기 위해 '서비스'로 의역했습니다.

 

 

 

1. Nail the basics (기본에 충실하라)

핵심 시나리오-사용자가 당신의 서비스를 사용하는 가장 주요한 이유-는 기타 부가적인 시나리오들 보다 가장 중요하다.

기본에 충실하라! (그러면, 사용자들은 그 외의 부가적인 문제들은 너그럽게 봐줄 것이다.)

 

 

2. Be great at something (가장 탁월한 것이 되라)

실제 사용자들(마케팅이나 PR에서 이야기 하는 사용자들이 아닌 현실의 실제 사용자들)이 당신이 준비하는 서비스에 대해

어떻게 묘사할 것 같은지 생각해 보라. 당신의 타겟 유저(target user)를 명확히 하고, 그들이

난 이 서비스를 사랑해요! 이건 A와 B와 그리고 C를 정말 뛰어나게 해내요라고 말할 수 있도록 해야 한다.

오늘날은그 정도면 충분해요(Good enough)는 더 이상 충분한 것이 아니다.

사용자들이 당신의 서비스를 사랑하도록 만들어야 한다.

 

 

3. Dont be all things to all people (모든 사람에게 모든 것을 제공하려 하지 말라)

모든 사람을 만족시키려 하기보다는, 당신 서비스의 타겟 유저를 기쁘게 만들 때 당신의 서비스는 보다 성공적일 것이다.

 

 

4. Make the hard decisions (어려운 결정을 내려라)

당신은 정말 그 기능과, 명령과 옵션들을 원하는가? 만약 그렇다면 그것들은 잘 제공되어야 한다. 그렇지 않다면, 차라리 없애라 .

모든 것을 제공하기 위해 옵션들로 만들거나, 사용자가 설정하거나 구성할 수 있도록 제공하는 식으로 하여

어려운 결정을 피하려 하지 말라.

 

 

5. Make the experience like a friendly conversation (사용자의 경험은 마치 친밀한 대화같이 만들어라)

UI를 당신과 타겟 유저 사이의 대화로 생각해보라. 사용자들이 당신의 서비스를 사용하는 동안 당신은 그들의 어깨너머로

그들이 어떻게 사용하고 있는지 보고 있다고 가정해보라. 그들은여기서 내가 무엇을 해야 해요?라고 물을 것이다.

이때 당신어떤 설명을 해줄 것인가? 단계나 순서, 당신이 사용할 언어, 그리고 어떻게 설명할 것인지 생각해 보라.

그리고 또한 당신이 말 하지 않은 것들에 대해서도 생각해보라. 이것이 당신의 UI가 해야 하는 것들이다친구간의 대화와 같은 것.

UI는 당신의 사용자들이 해독해 내야만 하는 비밀의 뭔가가 아니다.

 

 

6. Do the right thing by default (가장 적합한 것을 디폴트로 하라)

물론 당신은 사용자들이 뭔가를 바꿀 수 있도록 옵션들을 강조할 수도 있다. 하지만 왜 그렇게 해야 하는가?

가장 안전하고, 확실하고, 편리를 제공하는 디폴트 값들을 선택하라. 또한 당신의 타겟 유저들에게 디폴트 경험은

가장 올바르고 적합한 경험이 되도록 만들어야 한다. 사용자들이 처음에 자신들이 겪은 나쁜 경험을 벗어나기 위해

그들이 하던 방법조정할 것이라고 가정하지 말라. 사용자들은 그렇게 하지 않는다.

 

 

7. Make it just work (바로 동작하게 하라)

사람들은 당신의 서비스를 사용하길 원하는 것이지, 그것을 설정하거나 어마한 양의 것들을 배우려고 하는 것이 아니다.

초기의 설정을 선택하고, 가장 일반적이고 가장 중요한 태스크를 어떻게 해야 하는지 명확히 알 수 있게 하고, 바로 동작하게 하라.

 

 

8. Ask questions carefully ( 신중하게 질문하라)

Modal dialog(자신을 띄운 창에 대해 종속적인 다이얼로그 박스를 말하며, Modal dialog창을 닫지 않는 이상 자신을 open한 창으로 이동할 수 없고, 다른 이벤트도 발생시킬 수 없음 .매우 중요하거나 좀처럼 일어나지 않거나, 작업을 계속 하기 전에 확인 완료를 필요로 하는 1회성의 태스크에서 사용해야 함)를 이용하여 필수적이지 않은 질문을 하는 것을 피하라. 대신 non-modal 방식취하는 것이 낫다.

만약 UI에 대해 반드시 물어봐야만 한다면, 기술적인 언어가 아닌 사용자의 목적과 태스크에 맞는 언어로 표현하라.

옵션 또한 사용자가 이해할 수 있고 명확하게 차이를 이해할 수 있도록 사용자의 목적과 태스크에 맞는 표현으로 제공하라.

사용자가 정보에 근거한 결정을 내리도록 충분한 정보들을 제공해 주어야 한다.

 

 

9. Make it a pleasure to use (사용하기에 즐겁게 하라)

당신의 서비스가 그것이 목적하는 바를 가장 잘 수행할 수 있도록 하라. 그러기 위해 적절한 기능과 특징들을 가져야 하며,

그러한 기능과 특징들은 적절한 위치와 장소에 제공되어야 한다. 디테일에 주의를 기울라.

 

 

10. Make it a pleasure to see (보기에 즐겁게 하라)

서비스에 적용하고 있는 공통적인 표준 폰트, 시스템 컬러, 공통 컨트롤 요소들과 다이얼로그 박스, 표준 레이아웃 등의 내용들

포함하고 있는 표준 디자인 가이드가 있다면 그것들을 사용하라. 커스텀 UI를 피하고, 브랜딩은 제한에 맞게 사용하라.

가능한 어디에서든지 표준 아이콘과 그래픽, 애니메이션을 사용하라. 특별한 그래픽과 아이콘이 필요하다면,

전문 디자이너를 이용하라. (만약 그럴 수 없다면, 심플한 그래픽을 이용하거나 아예 이용하지 말라)

 

 

11. Keep it simple (간결하게 유지하라)

태스크를 가장 잘 수행할 수 있는 간결한 디자인을 하라. 꼭 필요한 만큼만 디자인하라.

하나의 태스크를 수행하는데 3가지 방법을 제하지 말라. 필수적이지 않은 불필요한 요소들은 간소화 하거나 없애라.

 

 

12. Avoid bad experience (나쁜 경험을 막아라)

사실 말하는 것은 행하는 것 보다 쉽지만, 어찌됐든 당신의 서비스에 대한 사용자들의 전체적인 인식은

좋은 경험 보다는 나쁜 경험에 의해 자주 결정된다.

 

 

13. Design for common problems (일반적인 문제들을 위해 디자인 하라)

사용자가 실수를 하거나 네트워크가 끊어진 경우에도 당신의 디자인은 여전히 훌륭한가?

일반적이고 공통적인 문제점과 사용자의 실수와 여러 다른 에러들에 대해 예상하고 디자인하여라.

네트워크가 느려지거나 사용 불가능한 상황들, 디바이스가 설치가 되지 않거나 이용할 수 없는 상황들,

사용자가 잘못된 입력거나 단계를 놓친 경우들을 생각해보라.

당신의 서비스를 이용하는 각 단계에서 발생할 수 있는 최악의 것들은 무엇이 있을 것인지 스스로 물어보아라.

그리고 이러한 것이 발생했을 때 당신의 서비스얼마나 잘 대응하는지 보아라.

모든 에러 메시지는 문제에 대해 명확하게 설명되어야 하고, 행동 가능한 솔루션을 제공해 주어야 한다.

 

 

14. Dont be annoying (성가신 것이 되지 마라)

사용자들이 일상적으로 어떠한 액션도 취하지 않고 무시해 버리는 은 반드시 다시 디자인되거나 제거되어야 한다.

이것은 특히 에러 메시지나 경고, 확인, 알림 같이 사용자들이 반복적으로 보게 되는 것들에서 더욱 그렇다. 소리는 절제해서 사용하라.

단, 보안이나 법적인 이슈(ex. 동의, 최종 사용자 사용권 계약서나 이용 조건 등)와 관련된 경우는 예외다.

 

 

15. Reduce effort, knowledge, and thought (사용자의 수고, 지식, 생각을 줄여라)

사용자의 수고와 지식과 생각을 줄이기 위해서는 다음과 같은 것들을 따르는 것이 요구된다.

· Explicit is better than implicit (명백히 드러내는 것이 분명히 표현하지 않는 것보다 낫다)

사용자들이 알아야 하는 정보는 직접적으로 스크린에 노출시켜라.

UI의 목적에 대해 분명하게 커뮤니케이션하기 위하여 주요한 사용설명은 정교하게 만들어라.

 

· Concise is better than verbose (간결한 것이 장황한 것보다 낫다)

스크린상에 정보를 드러내되, 간결해야 한다. 요점으로 바로 들어가라.

텍스트는 몰두해서 읽는 것이 아닌, 가볍게 스캐닝하기 쉽게 디자인해야 한다.

필수적인 정보는 아니지만 사용자에게 도움을 줄 수 있고, 부가적인 정보들은 Help 링크를 이용하라.

 

· Constrained is better than unconstrained (제한적인 것이 비제한적인 것보다 낫다)

컨트롤을 선택할 때는, 그 컨트롤은 유효한 입력값에 대해서만 제한되도록 하는 것이 일반적으로 가장 좋은 선택이다.

 

· Enabled is better than disable (사용할 수 있게 해 놓는 것이 사용할 수 없게 해 놓는 것보다 낫다)

비활성화된 컨트롤(disabled controls)은 종종 혼란을 일으킨다.

그렇기 때문에 이러한 컨트롤은 사용자가 그것이 왜 비활성화 됐는지 쉽게 추론할 수 있는 경우에써야 한다.

그게 아니라면, 만약 해당 컨트롤이 작동하지 않는 경우 아예 없애거나,

또는 그것을 활성화된 상태로 두고 적절하게 도움을 줄 수 있는 피드백을 제공한다.

 

· Feedback is better than being clueless (피드백을 제공하는 것이 단서가 없는 것보다 낫다)

태스크가 제대로 성공했는지, 실패했는지 인지할 수 있도록 분명한 피드백을 제공하라. 사용자가 추측하게 하지 말라.


16. Follow the guideline (가이드라인을 따르라)

UX Guide는 기반되는 서비스 위의 여러 다른 서비스들에서 최소한의 질과 일관성을 유지하기 위한 제재라고 생각해야 한다.

가장 좋았던 사례를 따르고, 일적인 결정을 내리고, 일을 쉽게 하기 위해 UX 가이드를 사용하라.

당신의 창조적인 에너지는 일상적인 것이 아닌 중요한 일을 하는데 집중하라.

아무도 어떻게 사용해야 할지 모르는 기묘한 것을 만들어내지마라.

가이드라인을 따르고, 당신의 경험은 그 가이드라인에 잘 맞는 가운데 두드러지게 하라.

 

 

17. Test your UI (UI를 테스트하라)

당신의 서비스를 실제 타겟 유저를 대상으로 사용성 연구를 하기 전까지는, 그 서비스가 제대로 된 것인지 당신은 모를 것이다.

당신은 아마 (그다지 반갑지는 않은) 그 결과에 놀랄 것이다.

당신의 UI가 비평 받는 것을 기쁘게 여겨라- 그것은 당신이 최고의 일을 해내기 위해 필요로 하는 부분이다.

그리고 당신의 서비스가 런칭된 뒤에도 반드시 피드백을 모으도록 하라.

 

 

출처 : http://blog.naver.com/ssim98/150027177808