검색을 위한 디자인시 고려해야 하는 5가지 중요 사항 (5 important things you need to consider when designing for search)

이 글은 Chaymae Lougmani 의 글을 번역하였습니다.
presentation
Chaymae Lougmani 의 블로그 바로가기 입니다.

검색을 더 많이 활용하기 위한 주요 팁

presentation

검색 디자인을 위한 주요팁
좋은 검색 도구는 브랜드 인지도를 높이고 매출을 높일 수 있습니다.
검색은 특히 전자 상거래 비즈니스에서 매우 중요합니다. 사용자는 검색 대상을 제어 할 수 있으며 원하는 제품을 쉽게 찾을 수 있습니다.
"최근의 전자 상거래 유용성 조사에서 사용자 중 83 %는 하나 이상의 사이트를 검색했습니다."- Nielsen Norman Group

검색이란 무엇입니까?

컴퓨팅 세계에서 이것은 데이터베이스에 대한 쿼리를 실행(running a query)합니다. 사용자는 데이터베이스(database)에서 찾거나 검색하지 않은 키워드를 입력(input)하고 검색 결과(search results)로 반환합니다. 다음 글에서 검색 결과에 대한 우수 사례에 대해 더 자세히 이야기하겠습니다.
현명한 디자인은, 검색 필드(input field)와 검색 버튼(search button)입니다.
presentation
Google

검색 디자인을 최적화하는 방법은 무엇입니까?

눈에 띄게 만들고 위치(positioning), 대비(contrast) 및 크기(sizing) 조정 작업을 수행하십시오.
1. 사용자가 쉽게 찾을 수 있는곳에 검색 창(search box)을 위치 시킵니다.
A study by A. Dawn Shaikh와 Keisi Lenz가 142명의 참가자를 대상으로 실시한 설문 조사에 따르면 사용자는 header 오른쪽 상단에 검색 입력란이 있어야한다는 사실을 알 수 있습니다. 검색에 대한 자세한 내용은 Where’s the Search? Re-examining User Expectations of Web Objects를 참조하십시오.
presentation
사이트 검색 엔진의 예상 위치
Wikipedia는 검색 창 위치를 변경했습니다. 이 사례 연구는 새로운 포지셔닝 가용성에 대한 좋은 통찰력을 제공합니다 : 왜 우리는 검색 창을 옮겼을까요? - Why Did We Move The Search Box?
2. 검색을 인식 가능하게 설정.
검색을 쉽게 알아볼 수 있도록 검색의 대비와 시각적 표현으로 만들 수 있습니다.
입력란(input field)과 테두리(border) 사이의 대비를 높이는 것이 검색 창을 강조하는 가장 효과적인 방법 중 하나입니다.
presentation
3. 돋보기 아이콘(Magnifying glass icon)을 사용하십시오.
돋보기는 전 세계적으로 알려진 아이콘입니다. 다양한 애플리케이션 및 운영 체제에서 검색 기능을 제공하기 위해 이 아이콘을 사용합니다. 이것은 사용자가 아이콘에 대해 친숙함과 기대감을 갖게 했습니다.
  • 스키매틱 아이콘(schematic icon)을 사용하고 세부 사항을 추가하는 것을 피하십시오. 단순한게 더 좋습니다.
  • 더 적게, 더 적은 그래픽 세부 정보로 돋보기 속도 향상
presentation
Bing 검색 엔진
아랍어(Arabic) 및 히브리어(Hebrew)와 같이 오른쪽에서 왼쪽으로 (RTL) 디자인 할 때 방향 아이콘(Directional icons)을 대칭을(mirrored)이루어야 합니다. 검색 아이콘은 오른손으로 물건을 들고있는 것을 나타냅니다. RTL 작성 국가에서는 미러링해서는 안됩니다.
"RTL 작성 국가의 대부분 사용자는 오른 손잡이이기 때문에 이러한 아이콘을 미러링해서는 안됩니다."유용성 - Usability–Bidirectionality, Google Material Design
presentation
4. 사용자의 검색어를 수용 할 수있을 정도로 검색 막대를 넓게 만드십시오.
Jacob Nielsen의 글, The Magnifying-Glass Icon in Search Design: Pros and Cons, 에서 검색 입력 필드는 27개의 문자(27-characters)를 포함할 만큼 충분히 넓어야 한다고 합니다. 이것은 전 세계 검색어의 90%를 수용할 수 있다고 합니다.
작은 입력 검색창은 사용자가 전체 쿼리를 읽으려면 오른쪽에서 왼쪽으로 이동하고 그 반대도 마찬가지입니다. 쿼리의 스크롤을 사용하면 유용성이 손상됩니다.
"이제 검색 상자(search box)를 27자(27 characters)로 넓히는 것이 좋습니다." - Jacob Nielsen
presentation
https://duckduckgo.com
외관을 잘 유지하고 사용자 쿼리를 수용할 수있는 디자인 팁이 있습니다. 사용자가 클릭 할 때 확장되는 작은 상자를 디자인 할 수 있습니다.
5. 이런 실수들을 하지 마세요
검색 상자(search box)를 비정상적인 장소에 두거나 navigation menu에 숨기지 마십시오.
presentation

presentation
Hermes 검색 창
다른 아이콘으로 주변을 복잡하게 만들지 마십시오.
검색 공간을 확보해주세요.
presentation
http://inspirationfeed.com/
기타 일반적인 실수들
  • 입력 필드가 너무 짧아서 사용자가 짧고 부정확 한 쿼리를 사용하게 만듭니다.
  • 제출 버튼(submit button)을 너무 작게 만듭니다 (특히 터치 장치의 경우).
  • 다른 아이콘들로 주변을 둘러싼다.
좋은 검색으로는 충분하지 않습니다.
좋은 디자인은 검색과 탐색 간의 유용한 통합을 제공합니다. 목표는 사용자가 신속하고 효과적인 방법으로 검색을 찾고 실행하도록 돕는 것입니다.
이러한 모든 단계는 적은 노력으로 사용자의 경험을 향상시킵니다.

이 글은 번역 글입니다. 원본 링크입니다.



presentation
안녕하세요! Early adopter입니다.제 번역 블로그를 자주 찾아 주셔서 감사드립니다.페이스북의 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰", "페이스북" 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!