검색 창 디자인 | 검색 창 디자인 팁 30 개의 베스트 답변

당신은 주제를 찾고 있습니까 “검색 창 디자인 – 검색 창 디자인 팁“? 다음 카테고리의 웹사이트 you.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://you.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 Jesse Showalter 이(가) 작성한 기사에는 조회수 3,492회 및 좋아요 267개 개의 좋아요가 있습니다.

검색 창 디자인 주제에 대한 동영상 보기

여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!

아래 동영상 보기

d여기에서 검색 창 디자인 팁 – 검색 창 디자인 주제에 대한 세부정보를 참조하세요

Search Boxes are so common and commonly confusing. Designing good search boxes can be the difference between success and failure in your UI projects. I’ll show you a few of the most important things to consider when you are designing your search boxes. Remember to Subscribe https://goo.gl/6vCw64
Join this channel to get access to perks:
https://www.youtube.com/channel/UCvBGFeXbBrq3W9_0oNLJREQ/join
————————————————————————————
////////// Connect with me here 👍🏼
Instagram: https://www.instagram.com/iamjesseshow
Twitter: http://twitter.com/iamjesseshow
////////// Sign up for my Monthly Newsletter 📫
http://jesseshowalter.com/newsletter
////////// Music is from Musicbed click below for a free trial 👇🏼
http://share.mscbd.fm/iamjesseshow
////////// Equiptment 📸
https://www.amazon.com/shop/jesseshowaltertv

검색 창 디자인 주제에 대한 자세한 내용은 여기를 참조하세요.

자동완성 검색 기능 UX 설계를 위한 8가지 팁 | 요즘IT

이는 전자 상거래 웹사이트에 들어가는 검색 창을 디자인할 때 매우 중요한 부분입니다. 또한, 사용자가 검색창에 입력된 검색어를 지우고 이전 검색 …

+ 더 읽기

Source: yozm.wishket.com

Date Published: 7/18/2022

18000+ 검색 창 이미지 | 스톡 디자인 이미지 무료 다운로 – Pikbest

검색 창 디자인 이미지 템플릿 PSD 또는 벡터 파일을 찾고 계십니까? Pikbest은 개인 상업용으로 사용할 수있는 18935 디자인 이미지 템플릿을 발견했습니다.

+ 여기를 클릭

Source: kr.pikbest.com

Date Published: 8/9/2021

검색 창 PNG 이미지

검색 창, 아이콘, 광고 소재 검색 창, 푸른, 각도, 화이트 png 750x468px 6.85KB … 검색 창 그래픽 디자인 아이콘, 검색 창, 각도, 화이트, 본문 png 1200x489px …

+ 여기에 표시

Source: www.pngwing.com

Date Published: 6/23/2022

검색창 디자인 1 – CodePen

URL Extension Required. When linking another Pen as a resource, make sure you use a URL Extension of the type of code you want to link to.

+ 여기에 더 보기

Source: codepen.io

Date Published: 6/19/2021

주제와 관련된 이미지 검색 창 디자인

주제와 관련된 더 많은 사진을 참조하십시오 검색 창 디자인 팁. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.

주제에 대한 기사 평가 검색 창 디자인

Author: Jesse Showalter
Views: 조회수 3,492회
Likes: 좋아요 267개
Date Published: 2020. 12. 19.
Video Url link: https://www.youtube.com/watch?v=EXB_HQa4p3Q

검색창 UX UI 디자인 리서치 #1

○ 검색창 안에 들어가는 내용들

0. 내용들을 자세히 알아보기 전에 먼저 정해 할 것!

만드는 웹사이트가 반응형인가 적응형인가 하는 것. 반응형이면 PC 버전 과 모바일 버전이 왠만하면 똑같이 or 비슷하게 작업하면 될 것이고 적응형이면 모바일 버전일 때 모바일에 더 적합하도록 자유롭게 디자인 할 수 있음.

1. 기본 상태일 때

헬퍼 텍스트, 검색 아이콘, 음성 아이콘, QR 코드 아이콘, 햄버거 버튼(메뉴)이나 로고, 해시태그, 프로필, 필터 등의 아이콘이 들어감

– 헬퍼 텍스트 : 해당 입력필드에 어떤 내용을 입력하면 되는지를 알려주는 텍스트. 왠만하면 비워두지 말고 넣는게 좋아요.

– 검색 아이콘 : 웹, 모바일 반응형일 때는 검색버튼이 별도로 있는 편이지만 네이티브앱일경우에는 검색버튼이 따로 두지 않는 추세. 키보드에 검색버튼이 이미 있기때문에.

– 음성, QR코드 : 이 기능들 있으면 좋지만 개발 구현 가능한지 먼저 개발팀에 물어봐야 함

– 햄버거 버튼(메뉴)이나 로고 : 모바일 화면 공간 활용에 좋음. (ex. 구글, 네이버, 다음 등)

2. 포커스 상태일 때

위의 아이콘들 + 취소나 뒤로가기 아이콘, 콤보박스

취소, 뒤로가기 아이콘 : 이 둘은 동일한 작용을 하므로 중복되지 않게 이 둘 중 하나만 사용하는 것이 좋음.

필터 : 필터기능이 필요한 경우 검색창 안이나 근처 어딘가에 넣어도 좋고, 콤보박스에 넣으면 화면 공간을 효율적으로 사용할 수 있음 (ex. 인스타그램, 네이버, 핀터레스트 등)

3. 검색창 안에 들어가는 내용 – 검색어 입력 중일 때

위의 아이콘들 + 텍스트 전체 삭제 아이콘

삭제 아이콘은 거의 모든 검색창에 들어가는 편

자동완성 검색 기능 UX 설계를 위한 8가지 팁

검색창과 자동 제안 디자인 패턴에 대한 8가지 권장사항

본문은 위시켓이 선정한 해외 콘텐츠 기반 번역문입니다. 프로토 타이핑, UX 디자인, 프런트 엔드 개발 등을 다루는 prototypr.io 블로그에서 발행한 글입니다. 작가인 프라나바 탄드라(Pranava Tandra)는 마이크로소프트 팀즈(Microsoft Teams)의 제품 디자이너로 피그마(Figma) 공식 커뮤니티에서도 활동하고 있습니다. 본문은 자동완성 검색 기능 UX 설계에 대한 내용으로 모범사례를 통해, 어떤 UX 디자인을 적용하면 좋을지 함께 생각해볼 수 있겠습니다.

지난 몇 주간 50개가 넘는 검색창 구현 사례에 대해 철저한 조사를 거쳐 사용자가 목표를 달성하는 데 도움이 되는 동작들이 무엇인지에 대해 분석해 보았습니다. 분석 대상에는 웹, 데스크톱 및 모바일 운영 체제에서 동작하는 커뮤니케이션, 전자 상거래, 소셜 미디어 앱과 클라우드 스토리지 앱 등 다양한 플랫폼과 애플리케이션이 포함됐습니다. 사용자는 주로 탐색과 정보 검색, 질문에 대한 답변, 혹은 원하는 작업을 빠르게 완료하기 위해 검색창에 검색어를 입력합니다.

외관상으로 보면, 검색창은 플레이스홀더[1](placeholder), 아이콘, 또는 버튼을 가진 텍스트 상자입니다. 검색어를 입력하면 일반적으로 텍스트 상자 밑으로 제안 목록을 보여주는 드롭다운[2]이 펼쳐지는데요. 정보를 요청하거나 찾기 위해 사용자는 검색창에 검색어를 입력합니다. 쿼리 변환[3](QF, Query Formulation)이 탑재된 검색창은 사용자의 의도 더욱 잘 반영하기 위해 사용자가 입력한 키워드 자체를 변환시킵니다. QF는 사용자가 입력하는 검색어에 대응하여 어떠한 항목을 먼저 사용자에게 보여줄 것인지에 대한 우선순위를 향상시키는 기술입니다. 따라서 자동 제안(Autosuggest)은 사용자 검색어와 QF를 기반으로 생성됩니다.

검색창은 일반적으로 다음과 같은 상호작용 상태를 지원합니다.

기본 상태

마우스 오버(Hover): 검색창이 밝아진다

검색창을 클릭하여 제로 상태[4](Zero State)로 진입: 최근 검색어를 보여주는 드롭다운 목록을 보여줌

검색어 입력 시작: 자동 제안을 포함된 드롭다운 목록을 보여줌

제안 목록 위로 마우스를 가져감: 상황에 맞는 동작(Contextual Actions) 표시

검색창의 상태

다음은 사용자 입력 검색어와 쿼리 변환(QF)에 대한 분석을 기반으로 권장하는 검색창과 자동 제안 디자인 패턴을 위한 모범 사례입니다.

#1. 검색 범위 지정

검색할 항목의 유형이 여러 가지인 경우 범위를 설정할 수 있어야 한다.

범위 지정(Scoping)은 검색을 “종류”별로 구체화하고 필터링하는 데 유용하게 사용됩니다. 이를 통해 사용자는 연관된 정보를 찾기 위해 특정 범위로 초점을 맞출 수 있습니다. 스코프 바[5](Scope Bar) 또는 태그를 사용하면 사용자가 검색창 내에서 결과를 필터링하면서 검색 결과를 좁혀나갈 수 있습니다. 이 기능은 커뮤니케이션 앱과 전자 상거래 웹사이트에서 광범위하게 사용됩니다. 주목할 점은 검색 범위 지정은 검색 과정에서 반드시 필요한 단계는 아니며 더 빠른 컨텍스트[6](context) 맞춤형 제안을 위해 사용됩니다.

검색 범위 지정: 슬랙(Slack)의 검색창은 사용자가 검색을 원하는 정보의 유형을 선택할 수 있다.

마이크로소프트 아웃룩에서는 검색하기 원하는 폴더를 선택할 수 있도록 드롭다운 목록을 제공하고 있다.

#2. 자동 완성

자동 완성을 통해 주요 추천 항목을 제공하라.

자동 완성(Autocomplete)은 사용자의 시간을 절약해 줍니다. 자동 완성은 검색창에 최우선으로 나타나는 목록으로, 대부분 이전 검색 기록을 기반으로 하거나 과거에 수행한 검색과 가장 관련이 큰 항목들이 나타납니다. 이 기능은 메일 애플리케이션 및 검색 엔진에서 활발하게 사용되고 있습니다. 검색 엔진에서의 자동 완성은 특정 지역이나 국가의 트렌드에 기반하여 광범위하게 적용되는데요. Mac OS의 스팟라이트(Spotlight) 검색은 자동 완성 기능을 성공적으로 구현한 좋은 예입니다.

자동 완성: Mac OS, Gmail 및 구글 옴니바 [7] (Google Omnibar)는 자동 완성 기능을 활용하여 주요 추천 항목을 제공한다

#3. 고급 검색

방대한 양의 정보를 가진 웹사이트/앱에 검색 결과를 보여주는 별도의 화면이 있는 경우 고급 검색 기능을 제공하라.

고급 검색(Advanced Search)은 특정한 위치에서 검색을 수행하는 데 도움을 줄 수 있다는 점을 제외하면 검색 범위 지정(Scoping)과 매우 흡사합니다. 검색 범위 지정 및 필터링과 거의 비슷하지만 훨씬 더 강력한 기능을 제공합니다. 복잡한 사이트맵, 많은 정보 또는 다양한 기능을 제공하는 제품에 대해서는 ‘고급 검색’ 기능을 제공하는 것이 좋습니다. 또한, 고급 검색 옵션을 통해 검색 페이지로 자연스럽게 이동할 수 있습니다. 구글 드라이브(Google Drive)나 아웃룩 웹(Outlook Web)과 같은 웹사이트에서는 검색창에 있는 아코디언 아이콘을 클릭하여 고급 검색 옵션을 표시할 수 있습니다.

고급 검색: 구글 드라이브, 아웃룩 웹, 이베이(eBay)는 모두 고급 검색 기능을 제공합니다.

#4. 최근 검색어

항상, 특히 제로 상태에서는 최근 검색어를 표시할 것.

커뮤니케이션 앱에서는 검색어, 파일, 친구 목록에 대해 최근 검색(Recent Searches) 및 방문 기록을 제공하는 것이 검색 속도를 높이기 위해 필수적입니다. 기업용 애플리케이션에서 유용하게 사용할 수 있는 기능 중 하나는 최근 검색어에 사용자가 입력했던 오탈자는 거르고 대신 검색 대상 정보를 표시해 주는 것입니다. 가장 최근 검색어를 맨 위에 배치하는 것도 중요한 부분입니다. 또한, 제로 상태에서 최적의 검색어를 제안하기 위해서는 임계값(Threshold)을 사용하는 것이 좋습니다. 여기에서 임계값을 사용한다는 것은 해당 검색어를 한 번 입력했다고 해서 바로 제안 목록에 포함시키는 것이 아니라 최소한 몇 번 이상 사용되어야 함을 의미합니다.

제로 상태에서의 최근 검색: 링크드인(LinkedIn)과 페이스북은 최근 검색결과를 보여준다.

iOS는 QF와 임계값을 사용하여 최근 사용한 앱과 검색결과를 보여준다.

#5. 짧은 제안 목록

제안 항목은 10개를 넘기지 말 것.

사용자가 자동 제안 목록에서 원하는 정보를 빠르게 찾을 수 있도록 평균적으로 7~9개의 항목이 사용되고 있습니다. 힉의 법칙[8](Hick’s Law)에 따르면 선택의 수와 복잡성에 따라 결정을 내리는 데 걸리는 시간이 늘어나게 되어있습니다. 따라서 10개 미만의 항목이 포함된 목록을 보여주고, 사용자가 값을 입력할 때마다 자동 제안 내용을 정제해 나가는 것은 디자인 시 따라야 할 좋은 사례라고 할 수 있습니다. 또한, 검색 제안에서 스크롤의 사용은 피하는 것이 좋습니다.

짧은 제안 목록: 플립카트(Flipkart), iOS의 프라임 비디오, 팜이지(PharmEasy), 테크크런치(TechCrunch) 핀터레스트(Pinterest)의 예를 보면 8~11개의 검색 제안 항목이 표시되고 있다.

#6. 검색 제안 그룹화(Grouping Suggestions)

항상 다양한 유형의 정보를 분류해줄 레이블을 추가하고 시각적으로 그룹화하라.

검색 제안 목록에 제목, 레이블(Lable), 메타 데이터 및 다양한 종류의 시각적 요소를 가미하면 사용자가(특히 데스크톱에서) 더 빠르게 정보를 검색할 수 있습니다. 이를 통해 서로 다른 유형의 정보 간의 차이점을 강조함으로써 시각적인 노이즈를 효과적으로 감소시킬 수 있습니다.

검색 제안 그룹화: Office.com과 핀터레스트는 서로 다른 유형의 정보를 분류하기 위해 레이블을 추가하고 내용을 그룹으로 나누어 보여준다.

#7. 음성 검색

음성 검색 경험을 제공하라.

신경망 모델[9](NL Model)을 활용하여 음성 입력과 질의응답 방식의 대화형 프레임워크를 제공하면 많은 시간을 절약할 수 있습니다. 사용자의 손으로 입력한 검색어에 대한 분석 데이터를 활용하여 사용자가 원하는 검색을 수행할 수 있도록 제시어를 제공할 수 있습니다. 검색 엔진과 운영 체제는 음성 비서(Voice Assistant)를 통해 사용자의 질문에 대한 답을 검색 제안 화면에 표시함으로써 사용자가 최소한의 클릭으로 원하는 정보에 도달할 수 있도록 도와줍니다. 이는 모바일 기기에서 널리 사용되고 있습니다.

음성 검색: 상단 이미지— 유튜브와 빙(Bing)은 검색창에 음성 검색 기능을 추가했다

하단 이미지— 마이크로소프트 팀즈(Teams)에서 사용자가 전화를 걸 수 있는 명령어 창을 제공한다. 이 외에도 사용자가 수행할 수 있는 명령 모음들을 제공한다. 구글은 강력한 QF구현을 통해 질문에 대한 답변을 검색 자동 제안으로 보여준다.

#8. 검색어 자동 수정 및 검색 초기화

오타를 정정하고 검색어와 제안 항목을 지울 수 있는 기능을 제공할 것.

오타를 허용하거나 자동으로 수정하고, 가능하거나 필요한 경우 사용자가 항상 오타를 정정할 수 있게 허용하며 이에 대한 대안을 제시해야 합니다. 이는 전자 상거래 웹사이트에 들어가는 검색 창을 디자인할 때 매우 중요한 부분입니다. 또한, 사용자가 검색창에 입력된 검색어를 지우고 이전 검색 이력을 삭제할 수 있는 선택지를 제공해야 합니다.

자동 수정 검색: 구글과 아마존은 입력된 검색어를 자동으로 수정해 준다.

슬랙은 입력한 검색어와 제안 항목에 나타나는 최근 검색 이력을 삭제할 수 있도록 검색창에 X 버튼을 제공하고 있다.

결론

위에서 소개한 권장사항 중 일부를 따른다면 검색 사용성을 향상시키고 원하는 결과를 빠르게 찾을 수 있는 자동 제안 기능을 설계하는 데 도움이 될 것입니다. 오늘날 대부분의 웹사이트와 애플리케이션에서 검색은 빠질 수 없는 기능이므로 이는 매우 중요한 부분입니다. 또한, 여러분들께 자동 완성에 대한 Baymard의 UX 연구 기사를 읽어 보시기를 추천드립니다. 저의 연구 내용이 틀리지 않았다는 것을 확인하는데 도움이 됐던 기사인데요. Wikimedia에서 만든 이 PDF 자료는 초보자의 눈높이에서 쿼리 변환(QF)이 어떻게 수행되는지 자세히 설명하고 있으니, 참고해보시기 바랍니다.
[1] 텍스트 필드 내에 있는 짧은 도움말.
[2] 사용자가 여러 값 중 하나 혹은 그 이상을 선택할 수 있도록 제공되는 목록
[3] 사용자가 입력한 키워드가 검색 엔진에서 사용되는 구조화된 질의 표현 구조로 변환되는 과정.
[4] 사용자가 검색창을 눌렀지만 아직 검색어를 입력하지 않은 준비 단계.
[5] 검색과 함께 사용되며, 사용자가 검색의 범위를 정하는 데 도움이 된다. 또 검색 창 아래에 나타나게 되며 검색 결과를 개선하기 위해 사용된다.
[6] 사용자가 제품이나 서비스를 사용하며 이루어지는 상호작용과 이와 관련된 주변상황, 객체, 사용자를 둘러싼 조건에 관한 정보.
[7] 구글 크롬 브라우저 주소 표시줄의 이름.
[8] 힉의 법칙(Hick’s Law) 또는 힉-하이먼 법칙(Hick-Hymann law)은 인지심리학및 인터랙션 디자인 분야에서 사용자에게 주어진 선택 가능한 선택지의 숫자에 따라 사용자가 결정하는 데 소요되는 시간이 결정된다는 법칙이다.
[9] 인간의 뉴런 구조를 본떠 만든 기계학습 모델.

> 이 글은 ‘Best Practices: Designing autosuggest experiences’을 각색하여 작성되었습니다.

검색 절차 줄이기 UX 디자인 가이드 원칙

검색 절차 줄이기 원칙 1. 검색 시 입력 절차를 간소화할 수 있도록 초성 검색이 제공되어야 합니다.

가령 PC는 키보드 자판에서 빠르게 타이핑을 하면 되지만 모바일은 글자 하나하나 입력하는 과정이 번거롭습니다. 이를 해소하기 위해 모바일에서 초성 검색이 제공되면 풀네임을 입력하지 않아도 돼 입력 편의성이 높아집니다.

아이폰에서 연락처에서 사람을 빠르게 찾아 연락하고 싶은데 초성 검색이 안됩니다. 바쁜데 풀네임으로 찾고자 하는 사람의 이름을 다쳐야 하는 불편함이 있습니다. 연락처에서 강래경 강사님을 찾고자 하여 ‘ㄱㄹ ㄱ’ 초성 검색을 하였으나 결과 없음으로 나옵니다.

아이폰. 초성검색이 지원되지 않는다

쇼핑몰의 예를 들어 보겠습니다. 쿠팡에서 노트북 검색 시 풀네임을 입력하지 않아도 초성 ‘ㄴㅌㅂ’만 입력만 해도 노트북 관련 추천 키워드가 제공됩니다. 이처럼 초성 검색 기능은 사용자가 타이핑하는 수고를 덜어주어 입력 편의를 높여 줍니다.

쿠팡: 초성 검색이 지원이 됨

반면, 위메프에서 키워드 검색 시 초성 검색 기능이 지원되지 않아 풀네임을 모두 입력해야 하는 불편함이 있습니다.

위메프: 초성 검색이 지원되지 않는다.

검색 절차 줄이기 원칙 2. 자동 완성 검색어 기능이 제공되어 검색어 선태의 폭을 넓혀 줘야 합니다.

평소에 물건을 잘 떨어트리고 잊어버리는 어떤 사용자가 에어팟 구매 시 또 에어팟을 잊어버릴까봐 걱정이 됩니다. 그래서 이번에 에어팟 구매 시 고리로 연결되는 스트랩도 함께 구매하고자 합니다. 그런데 에어팟에 연결하는 고리 이름이 생각나지 않는 것입니다. 티몬 검색창에 ‘에어팟’ 치니까 ‘에어팟 악세사리’가 자동 검색어로 추천되고, 빠른 시간 내에 에어팟 스트랩을 찾을 수가 있어 편합니다.

티몬. 에어팟 키워드 입력 시 자동 검색어가 추천됩니다.

이처럼 자동 완성 검색어는 모바일 사용자에게 있어 유용한 기능 중 하나입니다. 사용자가 검색창에서 찾고자 하는 검색어를 모두 입력하지 않거나, 단어를 정확히 몰라도 시스템이 현재 입력한 상태에 맞춰 관련 단어를 추천해줘 핵심 키워드 위주로 상품을 좁혀나갈 수 있기 때문입니다.

더구나, 사용자가 생각지 못한 다양한 관련 단어들이 검색어에 나열되어 검색어 선택의 정확성을 높여주기도 합니다. 마지막으로 자동 완성 검색어는 단어 입력 횟수를 줄여주고, 오타 입력도 최소화하고, 글자 하나 입력할 때마다 관련 단어가 실시간으로 나열되기 때문에 검색어 선택의 편의를 함께 높여줍니다.

만약 자동 검색어가 제공되지 않으면 리스트를 다 훑어봐야 하는 등 상품을 탐색하는데 어려움이 클 것입니다.

예를 들면 이베이 쇼핑의 경우 검색 시 자동완성 검색어 기능이 제공되고 있지 않아 다른 쇼핑몰에 비해 검색 편의성이 떨어집니다. 다른 쇼핑몰처럼 키워드 입력 상황에 맞춰 자동 검색어가 제공되어야 할 것입니다.

이베이 쇼핑: 자동 완성 검색어 기능이 제공되고 있지 않습니다.

검색 절차 줄이기 원칙 3. 시스템에서 사용자가 검색한 검색어에 대한 연관 검색어를 제공하여 관련 정보들에 쉽게 다가갈 수 있도록 도와줘야 합니다.

사용자가 검색하였으나 검색 결과에 사용자가 기대한 정보가 없을 경우 연관검색어가 제공된다면, 재검색을 유도할 뿐만 아니라 사용자가 검색한 검색어와 관련하여 다른 사용자들이 가장 많이 검색한 검색어를 추천해줘 검색의 폭을 점점 좁혀 나갈 수 있습니다.

개편 전 옥션은 검색어와 연관 있는 추천 검색어가 제공되지 않아 검색의 편의성이 낮아집니다.

개편 전 옥션. 연관검색어가 없습니다

반면, 개편된 옥션의 경우 검색창 바로 아래에 삼성 노트북 등 연관 검색어가 제공되어 검색의 폭을 넓혀 줍니다.

개편된 옥션. 검색 키워드 바로 아래에 연관 검색어가 제공됩니다.

검색 절차 줄이기 원칙 4. 최근 검색어 기능이 제공되어 재검색의 편의를 높여줘야 합니다.

상품을 탐색할 때 어떤 경우는 물건을 검색하고 바로 구매하는 경우도 있지만, 어떤 경우는 물건을 검색하고, 또 검색하고 사는 경우가 있습니다. 사용자는 이전에 검색했던 물건의 이름을 일일이 다 기억해서 해당 물건을 다시 찾는 것은 귀찮을 것입니다. 그런데 사용자가 최근에 검색했던 물건을 한 번에 조회할 수 있는 기능이 제공된다면 사용자는 물건을 찾는데 불편함이 최소화됩니다. 이처럼 최근 검색어는 사용자가 검색했던 최근 단어들이 시스템에 기록되어 기록된 검색어를 토대로 재검색이 수월해집니다. 가령, 시간이 촉박하거나 여러 가지 단어로 검색을 하다 보면 이전에 어떤 단어로 검색했는지 기억이 안 날 수가 있는데, 최근 검색어가 제공되면 재 검색의 편의를 높여주기 때문입니다.

예를 들어 쿠팡의 경우 검색창 선택 시 바로 하단 영역에 최근 검색어가 보여줘 한눈에 알아보기 편합니다.

쿠팡. 최근 검색어가 제공되고 있습니다.

반면, G마켓은 검색창 하단에 검색어가 제공되고 있으나, 최근 검색어라는 것을 알려주는 타이틀 레이블이 없어 불친절해 보입니다. 보여주는 검색어(삼성, 노트북)가 최근 검색어인지, 인기 검색어인지 불 명확합니다. 물론 바로 얼마 전에 검색한 키워드는 사용자의 머릿속에 인지되어 있어 최근 검색어로 생각할 수 있으나, 몇 개월 만에 방문한 사용자의 경우 이전에 내가 검색한 키워드인지, 연관검색어인지, 인기 검색어인지 바로 인지하기는 어려울 수 있습니다. 사용자의 인지 기억의 부담을 최소화하기 위해서는 ‘최근 검색어’라는 레이블이 붙여져 있으면 친절성이 더 높아질 것입니다. 또한, 검색창 키패드 영역에 상품 리스트가 있는데 이 또한 타이틀이 없어 최근에 검색했던 상품 목록임에도 불구하고 상품 광고나 인기 검색어처럼 보여집니다. 이 경우도 ‘최근 본 상품 목록’이라는 타이틀이 제공되어야 할 것입니다.

G마켓. 최근 검색어, 내가 본 상품 목록이라는 타이틀이 없습니다.

검색 절차 줄이기 원칙 5. 검색 탐색의 편의성을 높여줘야 합니다.

PC 버전의 경우 검색 결과 목록에서 페이지네이션을 통해 검색 결과를 조회할 수 있지만, 모바일은 작은 화면에서 한정된 정보를 보여줄 수밖에 없어 검색 결과를 보여줄 때 PC 버전처럼 페이지네이션 형태로 결과를 보여주기는 어렵습니다. 그렇다면 모바일에서 검색 결과를 보다 빠르게 검색할 수 있는 방법은 뭐가 있을까요? 대표적인 사례로 ‘더보기’ 방식과 ‘무한 스크롤’ 방식 등이 있습니다. ‘더보기’는 버튼을 누르기 전까지는 다음 검색 결과를 보여주지 않고, 더보기 버튼을 눌러야 다음 결과를 보여주는 방식입니다. ‘무한스크롤’은 사용자가 스크롤만 하더라도 시스템이 자동으로 다음 검색 결과를 불러오는 방식입니다.

예를 들면 더보기와 무한스크롤은 음악 앱에서 많이 접할 수 있습니다. 음악 어플의 경우 검색 시 많은 데이터를 불러오므로 ‘V’ 버튼과 같은 더보기 버튼 방식이나 자동으로 데이터를 불러오는 무한 스크롤 방식이 사용됩니다.

벅스의 경우는 무한스크롤 방식의 대표적 사례로 페이지 하단에서 스크롤할 때마다 시스템이 자동으로 곡을 계속 불러와서 곡 탐색하기 편합니다.

벅스. 무한스크롤 방식의 곡 탐색 방식

반면, ‘더보기’ 버튼 방식의 대표적 사례로 지니가 있습니다. 지니는 ‘더보기’ 버튼 영역에 현재 탐색된 곡이 얼마인지, 앞으로 곡 탐색이 남았는지 숫자로 표식 되어 있어 사용자를 배려하는 친절함이 느껴집니다.

반면, 멜론의 경우 더보기 버튼 방식이 제공되고 있으나 현재까지 몇 곡을 탐색하였고, 앞으로 총 몇 곡이 남았는지 알려주지 않아 답답합니다. ‘더보기’ 버튼만 봐서는 얼마나 눌러야 곡 탐색이 종료되는지 예측할 수 없기 때문입니다.

멜론. 더보기 버튼 방식이 제공되나 앞으로 몇 곡이 더 탐색되는지 알 수가 없습니다.

감사합니다.

위 내용에 대해 더 알고 싶으면 아래 UX 강좌&스터디 신청해 보세요~

(신청 중!!!!) 민수샘의 VOD UX 신규 강좌 17개 오픈 기념!!!!

UX 신규 강좌 묶음 할인 이벤트 !!!!!

(한정 판매!!!!! 할인율 94%, 1,640,000원 > 98,000원)

(평생 소장)

자세한 UX 강좌 커리큘럼 확인 > 아래 링크 클릭하시면 됩니다.

https://ebprux.liveklass.com/packages/78858

(신청 중!!!) 프로덕트 디자이너를 위한 추천 UX 강좌
[1일차 줌 Live/8월8일] 메크로 데스크 리서치 UX 방법론

– 메크로 데스크 리서치 개념 > 데스크 리서치란?

– 메크로 데스크 리서치 개념 > 메크로 데스크 리서치

– 메크로 데스크 리서치 개념 > 마이크로 데스크 리서치

– 메크로 데스크 리서치 개념 > 유저 리서치

– 메크로 데스크 리서치 기대효과 > 프로젝트 목표 구체화

– 메크로 데스트 리서치 기대효과 > 최근 업계 동향 파악 가능

– 메크로 데스트 리서치 기대효과 > 유저 리서치 체계적 준비

– 메크로 데스트 리서치 기대효과 > 가설 수립에 따른 러프스케치

– 메크로 데스트 리서치 기대효과 > UX 리서치릍 통해 가설 검증

– 메크로 데스크 리서치 방법론 > Step1. 서비스 정의 및 변천사 파악

– 메크로 데스크 리서치 방법론 > Step2. 유저 Context에서 키워드 발견

– 메크로 데스크 리서치 방법론 > Step3. 키워드별 서비스 R&R 정의 및 가설 도출

– 메크로 데스크 리서치 방법론 > Step4. 러프 스케치 작성
[2일차 줌 Live/8월10일] 스토리라인(UX 분석 출발 Key)

– 스토리라인 개념 > 스토리라인 무엇인가?

– 스토리라인 개념 > 스토리라인 필요성

– 스토리라인 개념 > UX 디자인 프로젝트에서 스토리라인을 활용하면 어떤 점이 좋은가?

– 스토리라인 개념 > 스토리라인과 여정지도의 유사점과 차이점은 무엇인가?

– Task 기반 스토리라인 작성 방법론 > Step1. 사용자 유형 정의

– Task 기반 스토리라인 작성 방법론 > Step2. 기능 나열

– Task 기반 스토리라인 작성 방법론 > Step3. 포스트잇 작성

– Task 기반 스토리라인 작성 방법론 > Step4. 어피니티 헤더 작성

– Task 기반 스토리라인 작성 방법론 > Step5. 어피니티 헤더 맞춰 그룹핑

– Task 기반 스토리라인 작성 방법론 > Step6. 스토리라인 최종 정리
[3일차 줌 Live/8월15일] WOM 분석 UX 방법론

– WOM 분석 개념 > WOM 분석이란?

– WOM 분석 개념 > UX 디자인 프로젝트에서 WOM 분석 방법을 활용하면 어떤 점이좋은가?

– WOM 분석 개념 > WOM 분석 장점과 단점

– WOM 분석 개념 > 더블 다이아몬드

– WOM 분석 방법론 > Step1. VOC 수집한다

– WOM 분석 방법론 > Step2. 수집한 VOC를 스토리라인에 매핑한다

– WOM 분석 방법론 > Step3. 긍정적 이미지와 부정적 이미지 분류한다

– WOM 분석 방법론 > Step4. 소항목별 인사이트를 도출한다

– WOM 분석 방법론 > Step5. (AS-IS VS To-Be)기능 발견한다

– WOM 분석 방법론 > Step6. (AS-IS VS To-Be) 기능 우선 순위 선정한다
[4일차 줌 Live/8월17일] 브레인덤프, 이해관계자 인터뷰, 컨텍스츄얼 인쿼리

– 브레인덤프 > Step1. Task 정의한다

– 브레인덤프 > Step2. Task별 Flow에 맞춰 궁금한 점 포스트잇에 작성한다

– 브레인덤프 > Step3. 여정지도에 맞춰 포스트잇을 붙인다

– 브레인덤프 > Step4. 여정지도에 맞춰 이해관계자 인터뷰 스크립트를 작성한다

– 이해관계자 인터뷰 > Step1. Hierarchical Task 정의

– 이해관계자 인터뷰 > Step2. Task 분석 및 User 관점 이슈 검토

– 이해관계자 인터뷰 > Step3. 이해관계자 인터뷰 스크립트 작성

– 이해관계자 인터뷰 > Step4. 이해관계자 인터뷰 결과, VOC 정리

– 이해관계자 인터뷰 > Step5. VOC 결과를 토대로 UX 관점 인사이트 도출

– 이해관계자 인터뷰 > Step6. UX 리서치 검증을 위한 가설 수립

– 컨텍스츄얼 인쿼리 UX 방법론 > 개념

– 컨텍스츄얼 인쿼리 UX 방법론 > Step1. 조사 목적 정의

– 컨텍스츄얼 인쿼리 UX 방법론 > Step2. 관찰 체크리스트 정의

– 컨텍스츄얼 인쿼리 UX 방법론 > Step3. 동석 근무

– 컨텍스츄얼 인쿼리 UX 방법론 > Step4. Contextual inquiry 분석 결과 인사이트 도출
[5일차 줌 Live/8월19일] 심화 QA& 및 (희망자) 과제 피드백 1회
[6일차 줌 Live/8월22일] 마이크로 데스크 리서치(벤치마킹) UX 방법론

– 벤치마킹 유형1. 클라이언트의 추상적 생각을 구체화하기 위해서 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹 유형2. 서비스 역할 관점 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹 유형3. Task 관점 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹 유형4. 경쟁사 VS 자사 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹 유형5. 웹 서비스 히스토리 관점 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹 유형6. 레이블링 보편성을 파악하기 위한 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹유형7. UI 관점 벤치마킹은 어떻게 해야 하는가?

– 벤치마킹 유형8. 러프 스케치 목적으로 벤치마킹 진행 시 어떻게 해야 하는가?

– 벤치마킹 보고서 작성법1. 벤치마킹 보고서는 어떻게 작성하는가

– 벤치마킹 보고서 작성법2. 이해관계자 대상 벤치마킹 리뷰는 어떻게 진행하는가?

– 벤치마킹 보고서 작성법3. 데스크 리서치 결과를 UX 디자인 프로젝트에 어떻게 활용하는가?
[7일차 줌 Live/8월24일] UX 리서치/서베이/FGI

– UX 리서치 개념 > 정성적 리서치 무엇인가?

– UX 리서치 개념 > 정량적 리서치 무엇인가?

– UX 리서치 개념 > 마켓 리서치와 UX 리서치의 차이점

– UX 리서치 개념 > UX 리서치 5가지 요소

– 서베이 > 응답자 프로파일

– 서베이 > 이용 형태 분석

– 서베이 > 문항별 평균

– 서베이 > Top2 VS 항목별 교차 분석

– 서베이 > 항목별 Why 분석

– FGI > 다이어리 스터디를 통한 FGI 프로그램 설계

– FGI > 서비스 이용 태도, 목적, 문제점, 개선 이슈 파악한다

– FGI > 그룹별 의견을 파악한다

– FGI > 그룹별 프로토타입에 대한 반응 및 선호를 파악한다

– FGI > FGI 보고서는 어떻게 작성하는가?
[8일차 줌 Live/8월26일] 심화 QA& 및 (희망자) 과제 피드백 2회
[9일차 줌 Live/8월29일] 인뎁스 인터뷰 I

– 인뎁스 인터뷰 개념 > 인뎁스 인터뷰 무엇인가?

– 인뎁스 인터뷰 개념 > 인뎁스 인터뷰 장단점은 무엇인가?

– 인뎁스 인터뷰 개념 > 인뎁스 인터뷰 한계는 무엇인가?

– 인터뷰 질의서 > 비구조화 인터뷰와 구조화 인터뷰 차이점은 무엇인가?

– 인터뷰 질의서 > 인터뷰 질의서는 어떻게 작성하는가?

– 인터뷰 참여자 섭외 > 참여자 프로파일은 어떻게 정의하는가?

– 인터뷰 참여자 섭외 > 참여자 선별 질문은 어떻게 작성하는가?

– 인터뷰 참여자 섭외 > 참여자 섭외는 어떻게 하는가?

– 모더레이터의 역할 > 모더레이터가 반드시 알아야 할 인터뷰 기법은 무엇인가?

– 모더레이터의 역할 > 인터뷰 진행 시 참여자의 의견을 어떻게 도출하는가?
[10일차 줌 Live/8월31일] 인뎁스 인터뷰 II

– 인터뷰 진행 VS 캐어묻기 원칙(행동)

– 인터뷰 진행 VS 캐어묻기 원칙(상황)

– 인터뷰 진행 VS 캐어묻기 원칙(태도)

– 인터뷰 진행 VS 캐어묻기 원칙(니즈)

– 인터뷰 결과 VOC 정리 VS 인뎁스 인터뷰 진행 시 기록물은 어떻게 관리하고 정리하는가

– 인터뷰 결과 VOC 정리 VS 인뎁스 인터뷰 결과, 참여자의 VOC를 어떻게 정리하는가?

– 인터뷰 결과 VOC 정리 VS 인뎁스 인터뷰 결과, Context 관점에서 어떻게 분류하는가?

– 인터뷰 결과 VS 인사이트 도출 및 보고서는 어떻게 작성하는가?
[11일차 줌 Live/9월2일] 심화 QA& 및 (희망자) 과제 피드백 3회
[12일차 줌 Live/9월5일] 사용성 테스트 I

– 사용성 테스트 참여자 선정 > 참여자 프로파일은 어떻게 정의하는가?

– 사용성 테스트 참여자 선정 > 사용성 테스트 진행 시 해비유저와 비해비 유저 중 누구를 참여시키고 있는가?

– 사용성 테스트 참여자 선정 > 사용성 테스트 진행 시 패널은 몇명 참여하는가?

– 사용성 테스트 참여자 선정 > 참여자 선별 질문지는 어떻게 작성하는가?

– 사용성 테스트 참여자 선정 > 참여자는 어떻게 섭외하는가?

– 과제 시나리오 목표 수립 > 일반적 목표

– 과제 시나리오 목표 수립 > 일반적 관심 사항

– 과제 시나리오 목표 수립 > 특정한 관심 사항

– 과제 시나리오 목표 수립 > 특정한 관심사항 측정

– 과제 시나리오 > 자유 과제 시나리오는 무엇인가?

– 과제 시나리오 > 지정 과제 시나리오는 무엇인가?

– 과제 시나리오 > 과제 순서는 어떻게 정하는가?

– 과제 시나리오 > 과제가 많을 경우 어떻게 우선순위를 선정하는가?

– 과제 시나리오 > 경쟁사와 자사를 테스트하고자 하는 경우, 과제 신정은 어떻게 진행하는가?
[13일차 줌 Live/9월7일] 사용성 테스트 II

– 사용성 테스트 진행 > 씽크 얼라우드(Think-aloud)

– 사용성 테스트 진행 > 모더레이터의 역할

– 사용성 테스트 진행 > 사용성 테스트 진행 Tips

– 사용성 테스트 측정 > 효과성

– 사용성 테스트 측정 > 효율성

– 사용성 테스트 측정 > 만족도

– 사용성 테스트 측정 > 오류

– 사용성 문제점/개선/가이드라인 > 사용성 원칙을 왜 알아야 하는가?

– 사용성 문제점/개선/가이드라인 > 사용성 테스트 진행 시 문제점을 어떻게 발견하는가?

– 사용성 문제점/개선/가이드라인 > 사용성 테스트 진행 시 개선점을 어떻게 제시하는가?

– 사용성 문제점/개선/가이드라인 > 사용성 가이드라인 무엇인가?

– 사용성 문제점/개선/가이드라인 > UX 디자인 프로젝트에 사용성 가이드를 어떻게 활용하는가?
[14일차 줌 Live/9월14일] User Context UX 전략

– UX 리서치 결과,인사이트 도출하기 > 행동(Task) 관점

– UX 리서치 결과,인사이트 도출하기 > 태도(Context) 관점

– UX 리서치 결과,인사이트 도출하기 > 목표 관점

– 어피니티 다이어그램 > Step1. 아이디어를 카드에 적는다

– 어피니티 다이어그램 > Step2. 관련된 카드를 그룹으로 만든다

– 어피니티 다이어그램 > Step3. 각각의 그룹에 카드들의 특성을 대표하는 이름을 붙인다

– 어피니티 다이어그램 > Step4. 그룹을 조정한다

– 어피니티 다이어그램 > Step5. 어피니티 다이어그램 이후 러프스케치를 함께 그린다

– UX 컨셉 > UX 컨셉은 화면 설계에 어떻게 반영하는가?

– UX 컨셉 > Step1. 사이트/서비스 역할을 정의한다

– UX 컨셉 > Step2. 서비스 구성 방안을 제시한다

– UX 컨셉 > Step3. AS-IS VS To-Be 방안을 제시한다

– UX 컨셉 > Step4. UI 구성 방안을 제시한다
[15일차 줌 Live/9월16일] 심화 QA& 및 (희망자) 과제 피드백 4회
[16일차 줌 Live/9월19일] 여정지도

– 여정지도 개념 > 여정지도란 무엇인가?

– 여정지도 개념 > 여정지도는 퍼소나 전에 작성해야 하는가? 퍼소나 이후 여정지도를 만들어야 하는가?

– 여정지도 개념 > UX 디자인 프로젝트에 여정지도를 어떻게 활용해야 하는가?

– 여정지도 개념 > 여정지도는 어떻게 작성하는가?

– 여정지도 방법론 > Step1. User, Goal, Scope

– 여정지도 방법론 > Step2. Phases

– 여정지도 방법론 > Step3. Actions/Tasks

– 여정지도 방법론 > Step4. Touchpoints & Channels

– 여정지도 방법론 > Step5. Emotions and pain points

– 여정지도 방법론 > Step6. Opportunities for features and improvements
[17일차 줌 Live/9월21일] 퍼소나

– 앨런쿠퍼 퍼소나 > Step1. 행동 변수를 만들기 위해 인터뷰 항목을 정의한다

– 앨런쿠퍼 퍼소나 > Step2. 인터뷰 결과, 시사점 및 행동변수 및 질문지를 만든다

– 앨런쿠퍼 퍼소나 > Step3. 패널 선정 및 리서치 결과 공통 분모 그룹핑한다

– 앨런쿠퍼 퍼소나 > Step4. 퍼소나별 특징/태도/기능 정의한다

– 목적형 퍼소나 > 역할 기반 목적형 퍼소나

– 목적형 퍼소나 > 오프라인 Context 기반/Context 분석 관점 목적형 퍼소나

– 목적형 퍼소나 > 프로토타입 리서치 관점 목적형 퍼소나

– 목적형 퍼소나 > UX 컨셉/서비스 고도화/린 UX 관점 목적형 퍼소나

– 프로토 퍼소나
[18일차 줌 Live/9월23일] 심화 QA& 및 (희망자) 과제 피드백 5회
[19일차 줌 Live/9월26일] 정보 구조 & 카드소팅

– 정보 구조 설계 > Step1. Brainstorming the user flow

– 정보 구조 설계 > Step2. Paper/Final User Flow

– 정보 구조 설계 > Step3. Card sort

– 정보 구조 설계 > Step4. Site map paper sketch

– 정보 구조 설계 > Step5. Digital Site Map

– 정보 구조 표현 > 동선 관점

– 정보 구조 표현 > Life 관점

– 정보 구조 표현 > Old VS New

– 정보 구조 표현 > 화면 요소 관점

– 정보 구조 표현 > CTA 버튼 강조

– 카드소팅 > 열린카드 소팅 방법은 어떻게 진행하는가?

– 카드소팅 > 닫힌카드 소팅 방법은 어떻게 진행하는가?

– 카드소팅 > 카드소팅 보고서는 어떻게 작성하는가?
[20일차 줌 Live/9월28일] 디자인 크리틱

– 디자인 크리틱은 무엇인가?

– UX 디자인 프로젝트에서 디자인 크리틱을 어떻게 활용하는가?

– 이해관계자 대상 디자인 크리틱은 어떻게 진행하는가?
[21일차 줌 Live/9월30일] 심화 QA& 및 (희망자) 과제 피드백 6회
[22일차 줌 Live/10월3일] 유저 시나리오

– 유저 시나리오 > 주요 Task별 유저 시나리오 정의는 어떻게 하는가?

– 유저 시나리오 > AS-IS VS To-Be UI Flow 어떻게 보여줘야 하는가?

– 유저 시나리오 작성 방법 > Step1. 퍼소나 혹은 UX 컨셉 결과를 토대로 주요 Task 어떻게 정의하는가?

– 유저 시나리오 작성 방법 > Step2. 주요 Task별 상황 시나리오는 어떻게 구성하는가?

– 유저 시나리오 작성 방법 > Step3. 주요 Task별 Flow Chart 구성하는가?

– 유저 시나리오 작성 방법 > Step4. 주요 Task별 러프 스케치는 어떻게 작성하는가?
[23일차 줌 Live/10월5일] 프로토타이핑 & 와이어프레임

– 프로토타이핑 유형 > Conceptual Prototyping

– 프로토타이핑 유형 > Low-fidelity Prototyping

– 프로토타이핑 유형 > Medium-fidelity Prototyping

– 프로토타이핑 유형 > High-fidelity Prototyping

– 프로토타이핑 테스트 > 화면 설계 관점에서 프로토타이팅 테스트는 어떻게 진행하는가?

– 프로토타이핑 테스트 > 선호도 관점에서 프로토타이핑 테스트는 어떻게 진행하는가?

– 와이어프레임 > 낮은 수준의 와이어프레임

– 와이어프레임 > 중간 수준의 와이어프레임

– 와이어프레임 > 고충실도 와이어프레임
[24일차 줌 Live/10월7일] 심화 QA& 및 (희망자) 과제 피드백 7회
[25일차 줌 Live/10월10일] 휴리스틱 평가 & 메인 디자인 시안 AB 테스트

– 휴리스틱 평가 원칙 > 원칙1. 사용자에게 시스템의 현재 상태를 시각화하여 보여준다

– 휴리스틱 평가 원칙 > 원칙2. 현실 세계와 부합하도록 시스템을 설계한다.

– 휴리스틱 평가 원칙 > 원칙3. 사용자에게 적절한 통제권을 부여한다.

– 휴리스틱 평가 원칙 > 원칙4. 일관성과 표준성을 높인다

– 휴리스틱 평가 원칙 > 원칙5. 사용자의 실수를 미연에 방지할 수 있도록 설계한다

– 휴리스틱 평가 원칙 > 원칙6. 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다

– 휴리스틱 평가 원칙 > 원칙7. 사용자가 시스템을 유연하게 사용할 수 있도록 한다

– 휴리스틱 평가 원칙 > 원칙8. 심미적이고 간결한 시스템을 제공한다.

– 휴리스틱 평가 원칙 > 원칙9. 에러 발생 시용자 스스로 문제를 파악하고 수정할 수 있도록 설계한다

– 휴리스틱 평가 원칙 > 원칙10. 사용자에게 충분한 도움말을 제공한다

– 디자인 시안 테스트 > 디자인 시안 테스트는 왜 필요한가?

– 디자인 시안 테스트 > 디자인 시안 테스트는 어떻게 진행하는가?

– 디자인 시안 테스트 > 투사법이란 무엇인가?

– 디자인 시안 테스트 > 디자인 투사법 테스트는 어떻게 진행하는가?

– 디자인 시안 테스트 > 디자인 시안 테스트 조사 보고서는 어떻게 작성하는가?
[26일차 줌 Live/10월14일] 심화 QA& 및 (희망자) 과제 피드백 8회