태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'information design'에 해당되는 글 4건

  1. 2011.08.18 [정보디자인] 검색엔진 URL 정보 표시 (1) by 無異
  2. 2011.08.01 [정보디자인] 하이브리드 이미지검색 (3) by 無異
  3. 2010.08.31 기능배치의 원근법 (3) by 전성진
  4. 2010.07.27 [Visual Hierarchy] 네이버 그린윈도우 (2) by 無異
2011.08.18 19:13

[정보디자인] 검색엔진 URL 정보 표시

저는 twtkr(http://twtkr.olleh.com/)을 사용하고 있습니다. 일일히 클릭해서 사진 보는게 귀찮아서요. 오늘 twitter(http://twitter.com/) 를 오랫만에 보니 웹에서는 트윗에 포함된 url을 단순화 하여 보여주고 있더라구요. 아이폰에서 사용하는 서드파트 클라이언트인 tweetbot에서는 이전 부터 지원하고 있는 익숙한 기능이지만 메이저 웹서비스에서도 적용하고 있다는게 반가웠습니다.



URL information priority

http://www.dailymail.co.uk/sciencetech/article-1220286/Sir-Tim-Berners-Lee-admits-forward-slashes-web-address-mistake.html
라는 url을 나눠보면
- 프로토콜(http://) 
- 서버 주소(www.dailymail.co.uk)
- 서브 경로(sciencetech/article-1220286/)
- 페이지 이름(Sir-Tim-Berners-Lee-admits-forward-slashes-web-address-mistake.html)
으로 나눌 수 있습니다.
중요도 순서로 나열하면
서버 주소 >> 페이지 이름 > 서브 경로 >> 프로토콜 순입니다. 때에 따라서는 서브 경로가 페이지 이름보다 중요한 경우도 있겠지만요. 달랑 url만 링크하거나 할때 도움이 되니까 위 처럼 페이지 이름을 의미있게 짓는게 추세입니다. 블로그 기사의 permalink도 의미없는 고유 숫자 대신 제목을 표시하도록 변환하는 팁도 많이 사용하고 있고요.

그래서 트위터는 중요하지 않은 정보를 생략하여 url의 노이즈를 줄이는데 3가지 방법을 사용합니다.

1. http:// 제거

웹에서 사용하는 프로토콜이니까 새로운 정보가 아닙니다.
브라우저에서 먼저 사용되었는데 아이폰 사파리에서 먼저 적용하였고 크롬에서도 따라하고 있습니다.
브라우저 검색창 UI 디자인 비교 http://story.pxd.co.kr/174



2. url 줄임

너무 길면 어차피 읽지 않으니까 생략합니다. 보통은 쉽게 뒷 부분을 줄입니다.

3. www. 제거

사실 위 두가지는 검색결과에도 많이 사용하고 있는데 www를 빼는 건 신선했습니다.
서버 주소는 서브도메인(www)과 도메인(dailymail.co.uk)으로 나뉩니다. 별도의 기능을 하는 서브도메인이 아니라면 www는 별 의미가 없습니다. www 자체가 도메인의 월드와이드웹 서버라는 이름이니까요. 실제 웹 브라우저에 url 입력 할때 www를 빼도 제대로된 사이트라면 웹서버로 연결해줍니다. 
유선 전화로 시내 통화를 할때 국가코드나 지역번호 붙이지 않아도 전화 연결되는 것 처럼 자연스러운 것입니다. 맥락에서 불필요한 정보를 굳이 보여주는 것은 오히려 불친절해 보입니다. 한글 명함 전화번호에 국가 코드 집어 넣는 것 처럼요.

재작년에 팀 버너스 리 님께서 http:// 프로토콜을 만들 때 쓸데없는 // 두개 넣은 것을 엄청 후회하고 죄송하다고 밝혔지요.
Sir Tim Berners-Lee admits the forward slashes in every web address 'were a mistake'




검색 결과의 url 표시

검색 엔진의 검색 결과에서도 페이지의 url이 하나의 정보 요소로 표현됩니다. 어떤 정보가 검색 결과를 선택하는데 중요할까요?
검색 결과에서 http를 뺀 것은 그리 오래된게 아닙니다. 작년까지도 http를 모두 표시하고 있었고 구글이 아마 크롬팀의 영향으로 http를 빼고 다른 검색 엔진도 모두 따라했던 것 같습니다.


구글


구글은 얼마전에 url을 제목 바로 밑으로 이동하였습니다. 위치 상으로는 본문보다 더 중요한 정보라고 판단한 것 같은데 색상은 부가정보로 본문의 검은색보다는 덜 중요하고 눈에 덜 띄는 녹색을 그대로 유지하고 있어서 뭐 아직은 정리가 덜 된 느낌입니다.

구글은 다른 검색엔진과는 다르게 좀 더 중요하다고 생각되는 페이지 이름을 남기고 중간 경로를 생략합니다. 단순한 방식은 아니고 중간 중간을 생략하여 url 안에서도 정보를 뽑아내고 중요하지 않은 부분은 생략하려는 고민과 노력을 많이 합니다.

두번째 검색 결과에 보이는 것은 단순한 url이 아니라 웹사이트의 계층 구조를 나타내는 breadcrumb 입니다. 



Yahoo,네이버,다음(Bing)


얼핏 위 세 사이트를 구분하기는 아주 어렵습니다. 전형적인 검색 결과 표시 방법을 따르고 있어서 인데요.
전형적이라는 건 개편 전의 구글을 그대로 따라했다는 거지요. 이제 어떻게 따라 바뀔지 궁금합니다.

네이버와 다음의 글자가 작아보이는데 실제 글자 크기가 작은게 아니라 원본 이미지가 길어서 폭 맞춤을 하니 이미지가 축소되어서 그렇습니다. 그런데 이렇게 브라우저 폭에 따라 결과의 문단 폭이 가변적이 되는 방식도 문제가 있습니다. 문단의 폭이 길어지면 다음 줄로 시선이 이동도 길어져서 읽는 속도도 떨어지고 가독성이 낮아집니다. 사이트 구조에 예쁘게 맞추기다는 폭을 고정하는 것이 좋습니다. http://baymard.com/blog/line-length-readability
다음은 고정폭을 사용하지만 고정 폭이 너무 깁니다. 네이버의 최소폭도 너무 길고요. 인쇄물에서는 보통 줄 당 26-30자를 넣다고 하고요. 책처럼 가까이서 읽는게 아니라 모니터를 고려해도 네이버의 68자,다음의 62자 (나눔고딕 기준)는 좀 무리가 있어 보입니다. 물론 폭을 줄여 줄 수가 늘어나서 스크롤이 길어지는 것이 더 불편하기 때문에 많을 정보를 담기 위해서 좀 더 길게 디자인을 할 수도 있습니다. 하지만 두번째 줄의 여백이 많이 남는 걸 보면(기본 폰트로 정의한 굴림에서도)  노출 본문의 글자 수와 검색결과의 폭을 함께 고려하면서 디자인된게 아닌 것 같습니다. 뭔가 그냥  그림을 그리면서 폭을 정해버린게 아닌가 싶습니다.


informationredesign


추가: 현재 사용하고 있는 UI는 링크 색을 검은 색으로 하고 매칭 키워드를 강조하고 있습니다.



위는 제가 쓰는 검색엔진 입니다. 이전 글 검색 리디자인 참조 http://story.pxd.co.kr/396

가장 큰 특징은 favicon을 사용 하는 것입니다. url에서 페이지의 출처인 도메인이 가장 중요하다면 도메인을 가장 잘 표현하는 방법은 파비콘을 사용하는 것입니다. url가지고 복잡하게 할 필요가 없습니다. 이미지가 가장 효과적인 정보 표현 방법입니다. 백 글자 url 한 파비콘만.... 저는 요즘 검색을 하면서 신뢰할 만한 사이트의 파비콘만 보고 클릭하는 경우가 많아졌습니다.

검색결과에서 페이지를 클릭할지 말지는 이미 제목과 본문 그리고 도메인에서 결정이 됩니다. 페이지 이름이 물론 정보를 담고 있지만 상대적인 중요도는 낮습니다. url에서 경로와 페이지 이름을 아예 날려버리면 도메인이 더 잘 눈에 띄게 됩니다. 위의 야후나 다음(Bing)을 보면 도메인을 볼드로 강조하고 있는데 정말 효과적인 강조는 강조하지 않을 것을 약하게하여 대비를 크게 하는 것이거든요.
아 여기도 물론 www.를 빼고 있습니다. 이거 빼고 스스로 너무 뿌듯했는데 메이저 사이트인 트위터에서도 뺀 걸 보고 반가워서 이 글을 쓰게 되었습니다 :)

다른 검색 엔진과 다른 또 다른 차이는 링크의 언더라인을 사용하지 않는 것입니다. 이제 웹에서 대충 파란색이면 링크라는 건 학습되어 있습니다. 클릭 할 수 있다는 걸 알려주기 위해서 지저분하게 밑줄 그으면서 가독성을 해치는 건 잃는게 더 많습니다.이제 링크의 밑줄 같은거 뺄때도 된 것 같습니다. 트위터를 보세요. 링크 없어서 뭘 눌러야 할지 모르겠다고 불평하지 않잖아요.

사실 리디자인에는 본문에 모두 링크가 걸려 있습니다. 모바일 웹이나 앱에서는 fitts's law 를 고려하여 리스트 전체에 링크를 걸어 두는 경우가 많은데요. 웹에서도 마찮가지입니다. 클릭할 곳이 넓으면 훨씬 편합니다. 한번 익숙해지면 반대로 돌아가기 어렵습니다. 다만 이 경우에 본문 중에서 키워드를 select 할 수 없습니다. 하지만 빈도가 많지 않아서 클릭 범위를 넓힌 것이 더 도움이 많이 되었습니다.

추가: 본문에도 링크를 걸어서 사용하면서 제목이 굳이 링크임을 나타내는 파란색일 필요가 없게되었습니다. 오히려 본문과 너무 도드라지게 다른 색을 사용하는게 가독성에 방해가 되어 본문을 검은색으로 바꾸었습니다. 대신 매칭 키워드를 더 도드라지게 강조했습니다.
네이버 모바일도 이제는 본문에도 링크가 걸려있는데요. 제목이 계속 파란색일 필요가 있을까요?


정리하면

현재 검색결과는 보다 많은 정보와 기능을 넣는데 초점이 맞추어져 있는 듯 합니다. 하지만 결국 사용자에게는 검색엔진이 제시한 많은 결과들을 비교하여 만족도 높은 결과를 찾는 것이 목적이므로 오히려 덜 중요한 정보를 덜어내어 인지적 비용을 줄여주는 방향의 접근 역시 필요합니다.

1. 파비콘 좀 넣어주세요.
2. url 정말 꼭 반드시 필요한게 아니면 덜어내 보세요. (특히 블로그 주소)
3. 링크 밑줄 좀 빼주세요.
4. 문단 폭 좀 줄여보세요.

웹페이지 검색 결과 디자인은 그냥 정답인 구글 따라하면 되는 것 같지만 구글도 더 잘 하려고 열심히 노력하고 있습니다. 모두 열심히 해 주세요.

[참고##검색##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 2 Comment 1
Ad Test...
2011.08.01 17:44

[정보디자인] 하이브리드 이미지검색


얼마 전에 네이버 이미지 검색 결과 디자인이 개편되었습니다.

네이버 이미지검색 개편
http://naver_diary.blog.me/150113580452
 
기존 방식에 비해 세가지 뷰가 추가 되었습니다.
텍스트 설명을 없애고 이미지에 집중하도록 한 "썸네일만 보기" 와 타일형태로 여백을 없앤 "크게보기" , 새창으로 이동하지 않고 별도의 프레임에서 더 크게 보는 "미리보기"가 새롭게 추가 되었습니다. 

네이버 썸네일만 보기
 



정보요소의 중요도와 대비 

처음 슬쩍 봤을 때 기본 화면인 "썸네일만 보기"는 텍스트 부가정보를 없애고 마우스 오버하였을때 썸네일이 확대되면서 부가 정보를 보여준다는 점에서 구글 이미지 검색 개편의 영향(이라고 쓰고...)을 받은 것 같았습니다. 검색을 하는 의도에 따라 다르겠지만 저는 출처의 제목이나 유형(블로그인지 카페 뉴스인지) 작성일 같은 메타정보가 이미지를 찾는데 도움이 되는 경우가 별로 없었습니다. 물론 경우에 따라 부가 정보가 부족해서 불만인 경우도 있었지만 일반적인 경우는 아니었습니다.

여러 정보 요소를 표시할때는 모두 공평한게 좋은게 아니라 중요한 정보만을 강조하여 대비를 주어야 눈이 편합니다. 대비를 만드는 방법의 기본은 강조할 부분을 강하게 하는게 아니라 강조하지 않을 부분을 약하게 하는 것입니다. 음악 들을 때도 저음을 강조해서 듣고 싶으면 이퀄라이저로 베이스만 크게 키우는게 아니라 트레블을 깎잖아요. 이 대비를 더 강하게 적용하여 중요하지 않은 정보는 아예 안 보여주는 것도 좋습니다. 공간에서는 빼는 대신 마우스오버같은 stacked in time 방식을 사용 할 수 있습니다.


블로그 검색결과 정보 요소 디자인


우선 정보 요소를 사용 행태에 따른 정보 priority 순서대로 쭉 나열합니다. 꼭 중요한 정보는 항상 같은 위치에 놓이도록 정렬하고, 공간에 펼쳐놓아 한 눈에 비교될 수 있도록 하고 중요하지 않은 정보는 약하게 하거나 없애서 대비를 높입니다. 제목은 우선 가장 중요한 정보인데 이미지가 있느냐 없느냐에 따라 들쑥 날쑥 한 것은 좋지 않습니다. 항상 같은 위치에 정렬이 되는 게 좋습니다. 블로그에서 사진은 중요한 정보이니까 마우스 오버하면 펼쳐지는 stacked in time이 아니라 adjacent in space로 펼쳐 놓습니다. "검색어표시"나 "블로그 내 검색" 같이 계속 나열되고 정보량이 적은건(또는 사용 행태에 따라 노이즈가 될 수 있는) 아예 빼버리고 마우스 오버로 표시해도 될 것 같습니다. 블로그 포스팅의 고유 주소같은건 봐도 모르는데 블로그명보다 더 강조되어 표시되는 것도 이상하고요. 블로그의 시간 정보도 꽤 중요한데 정렬이 안되어 항상 같은 위치에 있지 않으면 눈에 잘 들어오지 않습니다. 똑같은 정보 요소를 가지고 디자인 한 것이지만 information priority를 고려하여 visual hierarchy 만든 것과 그렇지 않은 것은 차이가 큽니다.

암튼 그래서 별로 안 중요한 텍스트를 뺀 개편된 네이버의 이미지 검색 형태가 만족스러웠다는 것이지요.

이미지 정렬


하지만 네이버의 썸네일 보기와 구글의 이미지 검색은 큰 차이가 있습니다.
네이버의 썸네일만 보기는 한 눈에 들어오지 않습니다. 불필요한 여백 때문인데요.
첫째는 그리드에 깔끔하게 맞추기 위해서 가로 세로 이미지를 모두 정사각틀에 넣고 있어서 입니다. 어쩔 수 없이 이미지의 방향에 따라 상하,좌우 여백이 반복됩니다. 
기호로 된 텍스트 항목은 소설처럼 쭉 읽는게 아니라 스캔을 해나가면서 중요한 것만을 취하기 때문에 세로로 정렬을 하는 것이 읽기 편합니다. 반면에 이미지는 기호를 해석하는 정보 처리 단계를 거치지 않아도 바로 중요한 정보를 찾아 낼 수 있기때문에 "한 눈"에 보는 게 정렬 보다 중요합니다.
둘째로 시선을 방해하는 여백을 더 늘어나게 만든건 "예쁜" 그리드를 위해서  양측 정렬을 사용해서 입니다. 브라우저를 늘이면 여백도 늘어납니다(가변적으로 행의 개수를 바꾸긴 하지만). 문장에서도 양측정렬을 하면 대충 보면 깔끔해 보이지만 readability는 떨어지거든요. http://en.wikipedia.org/wiki/Justification_(typesetting)
텍스트는 왼쪽 정렬 해야 읽기 편합니다.

추천 검색어 정렬에 따른 가독성 차이









다음의 이미지 검색 결과는 깔끔한 정렬을 위해서 세로, 가로 사진을 모두 정사각으로 잘라내 버립니다. 예쁘게 보이기 위해 정보 훼손하기를 택했습니다. 아이폰의 사진 앨범도 물론 이렇게 표현하고 있긴합니다. 하지만 검색이 아니라 내가 찍은 사진을 다시 보기 위한 것이라는 사용 맥락과 모바일의 작은 화면이라는 제약에 따른 선택이지 웹에서 굳이 이렇게 정보를 훼손해야 할 필요가 있는지 모르겠습니다. 화면이 좀 더 큰 아이패드의 사진 앨범만 해도 원래 비율을 그대로 표시하고 있고요.


네이버 크게 보기



새롭게 추가된 크게 보기 방식은 앞의 설명처럼 크게보기 보다는 여백없이 보여주기 때문에 보기 편합니다. 컬럼에 폭을 맞추어 가변적인 높이로 타일처럼 배치합니다. 그리드에 딱 맞추진 않았지만 더 그림이 눈에 잘 들어옵니다.

다만 이방식의 문제는 컬럼에 딱 맞추다보니까 세로 사진은 크고 가로 사진은 작게 보입니다. 큰 사진이 작은 사진 보다는 더 좋아보이고 시선이 먼저 가게되어 왜곡이 생깁니다. 저도 이 때문에 고민을 많이 하고 프로토타이핑도 여러 차례해봤는데 깔끔하게 딱 맞는 것보다는 아래처럼 들쑥 날쑥해도 크기의 편향을 없애는게 훑어보는데 더 좋았습니다.
물론 이렇게 가운데로 모으는 방식은 3컬럼에만 적용되는 한계가 있습니다. 또 가운데 컬럼에 세로 사진이 오면 휑해보이는게 문제인데, 폭맞춤을 하다가 현재는 옅게 배경색을 넣는 편법을 사용하고 있습니다.
 


플리커 검색 리디자인




구글 이미지 검색



구글의 검색 결과는 열과 행이 바뀌었을 뿐 같은 방식입니다. 개별 이미지의 넓이에 따라 한 열에 포함되는 썸네일의 수를 가변적으로 다르게 하고 있고 꼭 열의 높이에 맞추려고 하지 않습니다. 예쁘게 맞추려고 검색 순서도 바꾸는게 아닐까 싶게 딱 떨어지는데요 사실은 얍삽하게 크랍핑을 하고 있습니다(다음처럼 싹뚝 잘라먹는게 아니라 눈치 못챌 정도로). 스크롤이 아래로 가면 자동으로 다음 페이지 결과들이 보여지는 infinite scroll도 아주 편하고요. 메이저 검색엔진에서는 bing이 가장 먼저 하긴 했지만요.

 

이미지 검색의 목적 - 찾아보기와 감상


플리커에는 세가지 보기 방식이 있는데 일반적인 썸네일 보기와 메타정보 위주로 보여주기 그리고 슬라이드 쇼가 있습니다. 이미지 검색의 목적만으로 보면 여러 이미지 중에서 특정한 이미지를 찾아보려는 것과 모든 이미지를 꼼꼼히 감상하려는 두가지 목적으로 나눌 수 있을것 같습니다. 전자의 경우는 구글이미지 검색처럼 여러 썸네일을 보여주는 것이 적합하고 후자의 경우는 플리커의 슬라이드쇼가 목적을 잘 반영하고 있는 것 같습니다.

플리커 슬라이드쇼



네이버나 다음의 미리보기는 이도 저도 아니고 좀 애매합니다. 시원하게 크게 보이는 것도 아니고 슬라이드쇼로 보겠다는 것도 아니고요. 새창에 열리는 번거러움을 줄여주긴 하지만 그림도 작고, 매번 클릭하는 불편은 똑같습니다.

네이버 미리보기



다음 미리보기



하이브리드 이미지 검색

그런데 제가 이미지 검색을 하는 경험을 돌아보면 실제로는 검색과 감상의 중간 정도의 스탠스에서 찾으면서 동시에 감상하는 경우가 대부분 이었습니다. 딱 원하는 이미지를 하나 찾아서 원본 이미지를 보고 끝나는게 아니라 다양한 이미지를 계속 비교하면서 보게되거든요.
"묻지마 이미지 검색" 이런 사용행태에 딱 맞춰진 검색이라 아주 맘에 들었습니다(현재 malware를 배포한다고 경고가 나와서 링크를 포함하지는 않습니다). 썸네일 따위를 보여주는게 아니라 원본 이미지를 원본 크기로 시원하게 펼쳐 보여주거든요.  adjacent in space 방식의 슬라이드쇼 같은 느낌입니다.
너무 맘에 들었지만 "찾아보기"에는 불편한 방식입니다. 그래서 제가 사용하는 방식은 하이브리드 형태의 UI를 만들어 사용하고 있습니다. 리서치를 위한 이미지를 찾을때 많이 도움이 됩니다. 아이에게 동물 사진을 보여줄때 아주 만족스럽고요. 예제 사진도 지난번에 자연사박물관에서 사슴벌레랑 장수풍뎅이를 보고와서 아이한테 찾아보여줬던거거든요. 아이패드에서 사용할때는 쓱 핀치 줌으로 크게 보여줬다가 작게 해서 훑어보는 식으로 사용하면 편하고요.


이미지 검색 하이브리드 리디자인


아이패드에서 하이브리드 이미지 검색 활용 데모




이렇게 원본 이미지를 바로 검색 결과에 노출하는 것은 저작권 문제로 검색 서비스에서는 제공하기 어렵다고 합니다. 
아뭏든 이미지 검색의 목적이 단순히 찾기와 감상하기로 이분화 되는 것이 아니라 찾으면서 감상하려는 케이스가 많다고 생각됩니다. 검색 포탈에서는 서비스 가능한 범위에서 이에 해당하는 방법을 고민해 주면 좋겠습니다.


[참고##검색##]   



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 3
Ad Test...
2010.08.31 15:50

기능배치의 원근법





르네상스 이래 원근법은 2차원의 평면에서 3차원의 입체를 표현하기 위한 기교로서 널리 활용되었는데, 시각적인 효과면에서 볼 때, 근경-중경-원경에 따른 시각적인 깊이감을 줌으로써 시선의 흐름을 유도하여 작가의 의도대로 '화면을 순차적으로 읽을 수 있게'하는 효과를 가지고 있습니다. 이러한 '효과'는 근,현대회화에서 선형원근법 뿐 아니라 면적, 형태, 컬러, 명도 등의 다양한 요소를 통하여 그 효과를 증대, 발전시키고 있죠. (난해한 근 현대회화를 감상할 때 자연스럽게 시선의 흐름을 느끼면서 감상하는 방법을 연습해보시기 바랍니다!)



이러한 원리는 정보디자인에서도 적용될 수 있는데요, 화면에서의 정보를 효과적으로 전달하기 위하여 즉, 어떤 정보부터 보아야 하는지, 어떤 정보가 중요한 것인지, 어떤 정보가 부차적인 것인지 등에 따라 시각적 요소들을 그룹핑한다거나 순차적으로 읽어나갈 수 있도록 의도적인 조정을 하게 됩니다. 

[Adward Tufte]



작가의 의도에 따라 필요 요소들의 의도적인 부각과 우선순위 부여, 생략과 감춤이라는 기교면에서 볼 때, 
서비스나 어플리케이션에서 주요 기능과 부차적 기능의 중요성에 따라 안배하여 배치하는 UI설계 측면과 상통하는 면이 있습니다.

아이폰을 사용하다보면 숨겨진 기능들을 종종 발견하게 됩니다. 중요한 기능들은 전면에, 직관적인 형태를 띠고 있으면서 부차적인 기능들, 우선순위에서 밀리는 기능들은 누가 알려 주기전엔 도저히 알 수 없을만큼 교묘하게 숨기고 있기도 합니다.

사용하고픈 기능이 숨겨져 있으면 어떤 때는 답답하고 화가 나겠지만 바로 이렇게 우선순위에 따라 드러내는 기능과 감추는 기능의 원근법 적용을 통하여 애플은 직관적인 UX를 달성하고 있습니다. 애플 '광팬'이 많은 이유도 이러한 원근법의 적용이 성공적으로 이루어지고 있기때문이 아닐까요?




[http://taptaptap.com/blog/10-useful-iphone-tips-and-tricks/]



[위와 동일 출처]





애플은 자신의 홈페이지를 통해서 이러한 팁을 교육시키고 있는데요, 단순하게 생각하면 '이러한 설명 없이도 직관적으로 알수 있게 만들어야 하지 않을까?'라고 불평을 할수도 있지만, 퍼소나의 관점에서 본다면 이러한 설명을 기꺼이 찾아서 습득하면서 즐겁게 사용하는 퍼소나를 위한 기능들이라고 볼 수도 있습니다. 또한 이렇게 퍼소나에 따라 '기능들에 대한 인지적 거리'조절을 통하여 중요한 기능들이 더욱 쉬워지고, 복잡한 기능들도 유용성을 잃지 않도록 하고 있습니다.

[http://www.apple.com/iphone/tips/]



실무를 하다보면 드러내는 것보다는 감추는 것이 더 어렵다는 것을 체감하게 됩니다. '이 기능을 좋아할 사용자도 있으니 잘 보이는 곳에 배치해야 한다, 자기에게 필요 없는 기능이면 사용하지 않으면 그만이니 문제 없는 것 아니냐...'이런 논리로 두서없이 기능들이 전면으로 나오면서 무엇부터 사용해야 할지 혼란스러운 UI가 만들어지게 됩니다.

기능배치에서의 원근법은 단순히 따르기만 하는 되는 법칙이 아니고 우선순위에 따라 보여지는 수준을 면밀히 검토하고 결정해야 하는 어려움이 있습니다만 적용의 필요성에 대해 공감하는 것으로도 의미가 있지 않을까 싶습니다.

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 3
Ad Test...
2010.07.27 17:06

[Visual Hierarchy] 네이버 그린윈도우

이전 글에서는 네이버의 디자인 개편을 통해 그린윈도우가 부각되었다고 칭찬을 하였는데요. 하지만 사실 여전히 답답하고 거북한 느낌이 듭니다. 이유는 세로로 배치한 그린 메뉴바의 존재감이 너무 커서 사용자의 시선을 블랙홀처럼 빨아들이기 때문입니다. 그린메뉴바가 그린윈도우보다 visual hierarchy가 훨씬 높아서 검색 키워드보다 카테고리에 먼저 시선의 흐름이 이동하게 되는데, 명백하게 잘못된 디자인입니다. 


Visual Hierarchy

대비를 통해 강조를 하는 방법은 뭔가를 더하는게 아니라 빼는 방법밖에 없습니다. 그린윈도우 브랜드를 밀기로 했다면, 가장 좋은 방법은 그린메뉴바를 죽이는 것입니다. 메뉴바의 색깔만 빼면 시선의 흐름이 자연스러워지고 선택 카테고리도 잘 보이게됩니다.




초록색이 너무 적어지니까 허전하고 네이버스럽지 않게되었나요? 근데 TV에서 보여주는 그린윈도우 브랜드는 원래 여백을 강조하고 미니멀한 이미지잖아요. 검색브랜드의 coherence를 실제 검색페이지에서 깨트리고 있는건 뭔가 모순적으로 보입니다. 현재의 검색창에 적용된 소심하게 얇은 테두리 대신에  원래 가이드만큼 두껍게 만드는것도 필요할 것 같고요.

불필요한 노이즈를 없애기 위해서는 불필요한 들여쓰기로 시선을 방해하지 않아야 합니다. 들여쓰기는 활자인쇄를 할때 활자가 한벌밖에 없을때나 쓰던거고요. 텍스트는 정렬을 맞추고 강조할 부분은 텍스트의 크기나 굵기, 색상을 사용하는것이 더 효과적입니다.





네이버 검색 페이지를 보면서 알 수 없는 갑갑함을 느끼시지 않으셨나요? 저 초록 판때기가 여러분의 영혼을 빨아들이고 있기 때문이에요! 진짜로!


[참고##redesign##]  



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...