태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'visual_hierarchy'에 해당되는 글 4건

  1. 2011.08.01 [정보디자인] 하이브리드 이미지검색 (3) by 無異
  2. 2010.08.31 기능배치의 원근법 (3) by 전성진
  3. 2010.07.27 [Visual Hierarchy] 네이버 그린윈도우 (2) by 無異
  4. 2010.07.16 다음 지도앱 음성검색 - Primary Action by 無異
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...
2010.07.16 16:55

다음 지도앱 음성검색 - Primary Action


다음 지도 앱에 음성검색 기능이 추가되었습니다. 다음앱과 동일한 음성인식엔진을 사용하지만 체감하는 인식율은 더 높습니다. 지도 검색이라는 컨텍스트가 정해지니까 음성 매칭을 하는 말뭉치(corpus)도 POI정도로 한정하기 때문입니다.

아래 왼쪽이 다음 일반 검색, 오른쪽이 다음 지도 검색입니다. 지역 정보 키워드가 아닌것은 배제하여 유사한 발음으로 오인식될 수 있는 키워드도 줄어드니까 인식 성공률이 높아지겠죠.


(다른 그림 찾기 : 아이폰 UI컨벤션으로는 왼쪽에 취소버튼을 둡니다)




음성 인식 Best Matching Keyword

다음앱에서는 설정에서 음성 검색 후에 음성 분석 결과를 볼지 바로 검색결과를 볼지 선택할 수 있었는데, 이번 다음 지도에서는 선택없이 음성 분석 결과를 보여줍니다.
그런데 이 음성인식 결과의 표현 방식에 좀 문제가 있습니다. 이 UI만 보면 다음은 음성 인식율에 자신감이 없다고 고백하는것처럼 보입니다. (사실 좀 어이없는 매칭을 보여주는 경우가 많긴 했지만 :) 대부분은 제대로된 음성매칭결과를 보여줬습니다.)

primary action 디자인패턴이 제대로 적용되어 있지 않기 때문인데요. 모든  항목이 시각적으로 동일한 priority로 보여지고 있어서 의도했던 키워드를 선택하기가 쉽지 않습니다. 선택지가 많으면 인지적으로도 부담이 되니까 ( hick's law ) 선택할 확율이 가장 높은것을 딱 집어서 강조해주는 것이 좋습니다. 노란색으로 차이를 두긴 했지만 인지적 측면과 더불어 조작(버튼 누르기)도 쉽게 할 필요가 있습니다. fitts's law 는 포인팅 디바이스를 기반으로 하고있지만 터치인터페이스에서도 버튼이 크면 빨리 누른다는데는 변함이 없습니다.

이전 글 모바일검색 suggesiton UI 에서 제안했던것처럼 음성 매칭 결과도 리스트형태가 아니라 가장 추천하는 키워드는 크게 나머지는 버블로 비대칭적으로 표시하는게 어떨까 싶네요. 아직 기대 수준만큼은 아니지만 꽤 잘 맞는것 같으니까 좀 자신감을 가져도 되지 않을까요? :)






Primary Action 

검색결과 페이지의 페이징 버튼을 보면 다음은 검색에서도 사용자가 뭘 선택할지 자신이 없는것 같습니다. 로그만 분석해보면 1페이지를 볼때는 2페이지를 가장 많이 누르고 2페이지를 볼때는 3페이지를 가장 많이 누른다는걸 알 수 있을거에요. 내기해도 좋아요. 검색 결과 페이지에서 primary action은 다음 페이지( 현재 +1 )를 보는것입니다. 익숙했던것을 바꾸면 처음에는 고객이 조금 혼란 스럽겠지만 네이버는 잘 바꿨잖아요.


다음


네이버


구글


[참고##음성##]



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


Trackback 0 Comment 0
Ad Test...