태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


2012.02.08 13:56

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

정보디자인 - 하이브리드 이미지검색  에서 소개한 이미지 검색 UI 의 데모 페이지를 열어두었습니다.

특징은

1. 썸네일 방식과 미리보기(큰 이미지)를 결합한 UI를 사용합니다. 
특정 이미지를 찾아내려는 것 보다는 빠르게 검토해 보려는 사용 패턴에는 썸네일과 원본 이미지를 왔다갔다하는 번거러운 pogosticking 이 빈번합니다. 썸네일과 함께 적당히 큰 원본 이미지를 한꺼번에 보여줘서 빠르게 훑어볼 수 있도록 하였습니다. 개인적으로는 이런 행태의 이미지 검색을 더 많이 하고 있습니다.

2. 그리드 방식이 아닌 타일 방식의 이미지 정렬을 사용합니다.
이미지간의 여백을 줄여 시선의 움직임을 최소화하여 눈의 피로를 줄이도록 하였습니다.

3. auto paging을 사용합니다.
다음 페이지 버튼을 누르지 않고 스크롤만 하면 검색 결과를 계속 볼 수 있습니다.

4. iPad ready
PC, 아이패드 동시에 사용하도록 만들었습니다.


데모 페이지
http://lab.pxd.co.kr/imagesearch/?q=mobile%20ui%20pattern



리서치를 할때 많이 유용합니다. 아이패드에서 아이한테 동물이나 자동차 그림을 찾아줄 때도 좋았고요.
기존의 구글이나 네이버 이미지 검색과 비교해 보시고 사용경험을 공유 부탁드립니다.

실제 이미지 검색 결과는 구글이미지 검색을 이용하고 있습니다.

[참고##redesign##]    
신고

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


Trackback 0 Comment 4
  1. 엄청난동동이 2012.02.08 15:25 신고 address edit & del reply

    화면 상단의 가운데 부분으로 마우스를 가져가면 카테고리를 보여주는 바가 내려오네요~
    그냥 아무것도 없는 화면에 어떠한 단서도 없는 상태에서 특정부위에 마우스를 롤오버하면 카테고리 영역이 훅 내려옵니다. 상당히 무책임한 UI라고 생각이 드는데요. 의도한 것일까요?
    그리고 섬네일 영역이 섬네일로 구분되어 보이지 않습니다. 이건 물론 GUI로 해결이 가능한 부분입니다만, 현재 디자인으로만 보았을 때는 섬네일 영역으로 보이지 않고 그냥 가장 최상단에 나온 검색결과로 보입니다. 따라서 섬네일과 미리보기를 믹스해놓았다는 컨셉이 잘 드러나지 않는 것 같습니다.

    • 無異 2012.02.09 18:26 신고 address edit & del

      원래 여러 기능이 있던 페이지에서 데모용으로 이미지 검색만 남기고 다른 기능을 지웠는데 확인을 못하고 남아있었나 봅니다. :) 지적 고맙습니다.

      실사용에서 썸네일은 사실 큰 이미지들이 어떤게 나오는지 미리 보여주는 정도 역할을 하는 것 같습니다.

  2. 2012.02.13 17:44 신고 address edit & del reply

    안녕하세요. 만드신 사이트 PC에서 사용해 본 후 글 남깁니다~

    ● 썸네일 영역의 필요성
    현재 구성하신 화면에는 16개의 썸네일 영역과 썸네일 보다 면적이 약 4배 큰 미리보기 이미지 16개가 이어서 표시되는데요. 2행 밖에 안되는 썸네일 영역 하단에 바로 미리보기 이미지가 있어 오히려 시선이 미리보기 이미지로 바로 가버립니다. 그리고 하단으로 스크롤을 해야만 다음 페이지로 넘어갈 수 있기 때문에, 썸네일 영역을 시간을 들여 탐색하느니 차라리 마우스 휠을 죽죽 내리며 이미지들을 이어서 계속 탐색하는 것이 훨씬 더 빠르고 편리하게 느껴지고요.

    그리고 썸네일에서 이미지 클릭해서 미리보기 이미지로 이동한 후 다시 썸네일로 바로 돌아올 수 없고, 또 현재 위치를 알 길이 없어 좀 당황스러웠습니다. 다시 마우스 휠을 돌려서 거슬러 올라오는 수 밖에 없더군요.

    이에 대해 몇 가지 제 생각을 말씀 드리자면..
    - 만약 한 번에 표시 되는 이미지가 4~50개라면 썸네일 영역의 실효성이 있을 것 같습니다.
    - 썸네일 영역 간에 점프(이전/다음 썸네일 목록으로 이동)가 가능하다면 썸네일 영역과 미리보기 영역의 기능이 확실히 구별될 수 있을 것 같습니다. 그러면 썸네일 영역 훑어보고 찾고자 하는 이미지가 없을 경우, 미리보기 영역 거치지 않고 바로 다음 이미지 목록을 볼 수 있을테니까요.
    - 페이지 넘버링을 하면 좋을 거 같습니다. 한참 보다보니 제가 얼마나 봤는지, 지나온 이미지가 어디쯤에 있는지 도통 알 길이 없네요...

    ● 이미지 사이즈 인포 버튼
    이 버튼 좀 편리한 것 같습니다. 축소된 미리보기 이미지에만 '600x500' 이런식으로 이미지 사이즈 인포 버튼이 표시 되는데, 버튼 클릭 시 원본 이미지 링크로 바로 이동하니 편리하네요. 버튼 표시 유무로 표시된 이미지가 원본 사이즈인지 아닌지 알 수 있어서 클릭 수고도 덜어주고, 축소된 이미지는 원문 웹사이트와 원본 이미지 링크를 한 화면에서 개별적으로 선택할 수 있어 용이한 것 같고요. 다만 숨겨진 기능과 거의 다름 없는 게 좀 아쉽습니다. 마우스 오버해서 색깔 바뀌는 거 몰랐다면 클릭 할 일이 없었을 거 같습니다.ㅎ

    UI 개선안 고안하셔서 직접 프로토타이핑도 하신다니 신기하고 멋집니다.
    재미있게 잘 보았습니다~:)

    • 無異 2012.02.15 09:32 신고 address edit & del

      꼼꼼한 리뷰 고맙습니다. :)
      썸네일 간의 점프기능은 댓글 보고 바로 제가 쓰는 검색에는 기능을 추가했습니다. :) 여태 귀찮아서 마지막 썸네일을 눌러서 페이지 끝으로 이동해서 좀 더 스크롤하는 편법을 썼었는데 만들어 넣고 보니 좋네요. 고맙습니다.

      스스로 필요에 의해서 만들어 쓰고 있는거라 한번에 UI를 설계하고 프로그래밍하는게 아니라 꼭 필요한 것만 만들고 쓰면서 조금씩 최소 노력으로 기능을 추가하는 애자일 디자인 방식으로 만들어지고 있어서요. 상당히 불친절한 UI입니다. :) 대중적으로 이용하는 걸 고려하지 않은 디자인이라 한계가 있는 것 같아요. 리디자인에서은 해결이 정답이라기 보다는 보통 간과하고 있던 문제를 발견하고 제기해서 함께 고민해보자는데 의미를 두고 있습니다.

      저도 주로 미리보기로 쭉 훑어보는 위주로 사용하고 있고요.
      썸네일 수는 구글api의 결과 개수가 8개로 정해져 있어서요. 두번 호출해서 16개를 보여주고 있었습니다. 썸네일을 더 많이 보이게해서 썸네일 위주로 찾는건 구글검색이 더 좋아서(썸네일이 좀 더 큽니다) 굳이 만들기보다는 링크를 걸어놨습니다. :)

Ad Test...