[카테고리:] UX Design

UX Design (사용자 경험 디자인)
사용자 중심 디자인의 원칙과 방법론을 깊이 있게 탐구합니다. 사용자 리서치, 정보 구조 설계, 프로토타이핑, 사용성 테스트 등 UX 디자인의 전 과정을 다룹니다. 실무에서 바로 적용할 수 있는 UX 디자인 기법과 도구 활용법을 제공합니다.

  • 2022 Related Searches UI — Mobile

    2022 Related Searches UI — Mobile

    사용자에게 많은 입력을 요구하는 것은 죄악입니다. 사용자가 원하는 것을 바로 제시해주지 못하는 서비스는 앞으로 역사속으로 사라질 것입니다. 검색어를 입력할 때 우리는 머리속에 단어를 가지고 있습니다. 그것을 입력하는 과정을 완벽하게 거쳐야만 올바른 검색 결과를 통해서 사용자가 원하는 곳으로 이동할 수 있습니다. 하지만 많은 사용자들이 검색하는 검색어는 따로 있습니다. ‘ㅊ + ㅜ + ㅁ’을 입력하게 된다면 ‘춤추기’, ‘춤배우기’ 등 사용자들이 검색하는 단어는 한정적입니다. 춤꾸러기라고 검색할 사람은 거의 없습니다. 있으면 특이한 케이스입니다. 그렇다면 연관 검색어 서비스가 나오기 전에 제공자들은 생각했습니다. 검색한 키워드를 입력하는 순간에 알려주는 것은 어떨까? 그렇게 만들어진 서비스가 검색어를 입력하는 도중 하단에 노출되는 완성된 단어가 노출됩니다.

    여기에 더해 트렌드라는 개념을 더한다면 검색어를 입력할 때 사용자들이 검색하는 검색어에 트렌드가 있어서 이 두가지를 접목하면 사용자들이 많이 찾으며, 더 최근에 많이 찾게된 검색어를 상단에 올린다면 사용자가 더 편리하지 않을까 하면서 고안된 기능입니다. 근데 검색바 있는 하단에 노출되는 경우가 많은데, 구글과 네이버는 내가 검색했던 검색어를 같이 제공하고 있습니다. 물론 제일 상단에 배치하는 것을 원칙으로 서비스를 제공하고 있습니다.

    앞으로 연관 검색어 영역이 어떻게 바뀌게 될까요?


    Google

    구글은 아이콘으로 연관 검색어와 최근 검색어를 구분해 제공하고 있습니다. 최근 검색어는 앞에 시계 모양의 아이콘을 통해 시간이라는 것을 암시하고 미래 검색어는 없을 것이니, 과거 사용자가 입력했던 검색어임을 알 수 있게 합니다. 일반적인 연관검색어는 앞에 돋보기 모양의 아이콘이 있습니다. 그리고 우측에 있는 좌상단으로 향해있는 아이콘이 검색창에 연관 검색어를 넣어주는 느낌이 들어서 사용자에게 선택을 유도하는 것처럼 보입니다.

    다크 테마에서 잘 보이지 않지만 연관성이 있는 어휘는 하이라이트 되어있음을 확인할 수 있습니다.


    Naver

    네이버는 구글과 동일한 로직과 노출 구조를 가지고 있습니다. 하지만 차이점이 있다면 부가적인 검색을 키보드위에 있는 버튼 3가지를 통해 진행할 수 있어, 더 다양한 인풋을 통한 검색이 가능하다는 점입니다. 근데 이것을 키보드를 통해 입력하는 중간에 눌러서 사용하는 사용자가 과연 많을까요?


    G Market

    이커머스에서 사용하는 것은 연관된 키워드만 하이라이트하는 것으로 보입니다.


    SSG.COM

    SSG.COM은 연관 검색어를 두가지로 분리해 공식브랜드관 검색과 키워드 검색을 구분해 제공하고 있다.


    Farfetch

    Farfetch는 실시간 검색을 진행해 결과값을 하단에 바로 노출하고 있다.

  • 2022 Search Activity

    2022 Search Activity

    나는 검색을 할때 궁금증이 생기면 한다. 궁금증을 생각 혹은 지식이 떠오르지 않으면 한다. 그리고 이유와 생각을 찾기 위해서 검색을 활용한다. 머리를 외주화한 느낌이고, 그런 외주화된 것들이 모여서 만들어낸 인터넷이라는 공간에 모이는 역할을 한다고 봅니다.

    검색 전 부터 검색 결과를 통해 원하는 곳으로 이동하기의 까지 크게 보면 아래와 같다.

    1. 검색이 필요한 상황이 발생한다.
    2. 검색을 한다.
    3. 원하는 곳으로 이동한다.

    1. 검색이 필요한 상황이 발생한다.

    까먹었다, 물건이 필요하다, 지식이 부족하다, 궁금하다, 알고싶다, 등등 사용자에게 니즈가 발생한 상황입니다. 이때 이 니즈를 빠르게 해소하기 위해 우리는 약속된 검색 버튼을 사용하면 검색어를 입력할 수 있는 인풋박스가 나옵니다. 그 전에는 야후 카테고리 방식이었습니다. 그때는 화면 배치가 중요하다고 생각을 했습니다. 하지만 그것은 사용자에게 불편을 전가하는 방식이었습니다. 검색어를 입력해서 결과를 보여주고 바로 이동하게 하는 것이 사용자에게 가장 필요한 서비스라고 봅니다. 특히 검색엔진에서는 말이죠. 야후와 구글의 갈림길에서 사용자는 편리한 구글을 선택했으며, 세상 모든 검색결과가 있는 구글을 더 신뢰하기 시작했습니다.

    여러분들은 어떤 상황에서 검색엔진 혹은 검색기능을 켜시나요. 공통된 상황은 사용자가 원하는 것을 못찾는 상황임에는 틀림없습니다. 서비스를 사용 중일 때는 사용자에게 그럴싸한 상품과 콘텐츠를 소개하지 못한 것이고, 서비스 이용중이 아니라면 대부분은 정보가 필요한 상황일 것입니다.

    2. 검색을 한다.

    검색은 여러 종류가 있는데, 키워드 검색과 그 외의 콘텐츠로 검색하는 방법이 있습니다. 그 외의 대표적인 방법으로는 이미지, 소리를 통한 
    검색이 필요한 상황에 필요한 결과물을 찾을 수 있는 키워드를 입력해야합니다. 만약 제가 새로운 쿠키를 만들고 싶어 필요한 준비물을 검색할 때 ‘쿠키 만들기 준비물’ 이렇게 입력해야 결과물이 노출되는데 ‘쿠키’ 만 치게 되면 내 생각과 다른 결과물이 노출되게 됩니다. 내가 원하는 검색 값을 얻을 때 까지 키워드를 바꿔가면서 검색하게 됩니다.

    이 과정은 과거 사전에서 단어를 찾는 것과 비슷하지만 전혀 다른 경험을 제공합니다. 사전과 도서관에서는 내가 찾는 정보를 찾기 위해서 무수히 많은 우연한 마주침이 일어납니다. 그 과정에서 우연히 마주친 정보가 더 맘에 끌리는 경우도 있습니다. 하지만 키워드 검색은 오타 혹은 검색어를 잘못 입력하지 않고 서는 우연한 마주침이라기보다 정확한 충돌을 만들어내야 하는 기능입니다. 그렇기 때문에 정확성이 중요한 것이고, 검색 결과를 노출할 때 중요한 것은 상단에 배치하고, 중요하지 않은 것은 화면 하단에 배치하는 것이 유리합니다.

    디지털 업계에 있는 사람들에게 통용되는 말인데, 두 번째 페이지는 없다 입니다. 이 말은 대부분의 사람들은 검색을 할 때 페이지네이션된 2번째 장으로 넘어가는 경우가 거의 없습니다. 이를 감안하고 중요한 것은 무조건 첫 번째 페이지에 노출하는 것이 좋습니다.

    3. 원하는 곳으로 이동한다.

    결국 검색엔진이나 서비스 내 검색을 했다면 원하는 것을 찾은 즉시 그곳으로 이동하게 됩니다. 이렇게 그곳에서 궁금증 혹은 갈증을 해소하고 사용자는 만족감을 느끼게 됩니다.

  • 2022 Search bar UI — Mobile

    2022 Search bar UI — Mobile

    컴퓨터가 생긴 이후 키워드 검색은 너무도 당연한 것이 되었다. 이전에는 도서관에서 책과 정보를 찾을 때 색인된 것을 기준으로 데이터를 찾는 것을 수행했다. 하지만 CLI가 생긴 이래로 우리는 키워드를 통해 검색을 하고 검색에 결과가 없다면 몇 번을 더 시도해본 다음 없으면 없다고 생각을 해버리는 시대에 살고 있다. 돋보기는 초등학교 이후로 꺼내본 적이 없지만 검색창에서는 매일 볼 수 있는 픽토그램이자 아이콘이다.

    검색 UI 진입

    서치바(검색어 입력 영역)에 진입했을 때 크게 2가지의 구분점으로 구분할 수 있다. 하나는 정보 입력 유도 방법, 나머지 하나는 진입했을 때 키보드를 노출하는지 안 하는지로 구분할 수 있다.


    Google

    구글은 정보 입력을 유도하는 방법으로 상단에 키워드 검색바를 제외한 나머지는 배치하지 않았다. 심플하게 해서 사용자에게 검색엔진이라는 이미지를 심고, 부각하고 싶은 메시지는 doodle을 통해 제공하면서 사용자와 소통을 한다. 검색을 통해 다른 곳으로 이동시켜주는 곳이며 구글이라는 이미지가 강력하게 심어지는 계기가 된다. 물론 이것은 야후와 과거 네이버와 비교했을 때의 이야기이다.


    Naver

    과거 대비해서 네이버 검색창과 그린닷이 돋보이는 디자인으로 검색을 유도하고 있다. 도입했을 때 유저들의 반발이 심했다. 그전의 디자인과 방향성이 너무 많은 정보를 제공했기에 호불호가 명확하게 갈리는 지점이 있었다. 나는 변경했을 때 바뀐 디자인을 선호했다. 하지만 여기서 하나 배웠다. 급속한 업데이트와 많은 부분에서 변하는 것은 사용자들로부터 반발을 산다는 것을 확인할 수 있었다. 반면 구글은 로고를 교체했을 때를 제외하면 알게 모르게 하나씩 하나씩 바꿔 사용자들도 모르게 업데이트가 되어있다. 이 방법이 사용자들로 하여금 반발 없이 업데이트할 수 있는 방법이라고 생각한다.

    사용자가 많이 사용하는 서비스라면 당연히 모든 사람을 만족시키는 디자인을 할 수 없다. 제약 사항을 충분히 확인하고 현실적인 방법을 모색하는 것이 가장 현명한 방법이다.

    그리고 구글과 네이버의 방향성이 명확하게 차이나는 것은 데스크톱 검색이다. 하지만 모바일에서도 큰 차이가 나는 것을 확인할 수 있다. 구글은 하단에 다른 콘텐츠가 없는 반면에, 네이버는 하단에 콘텐츠와 광고가 노출되는 것을 확인할 수 있다. 이것이 구글과 네이버의 방향성의 차이라고 본다. 어떤 게 더 좋다, 나쁘다를 판단하기보다 비즈니스 방향성에 따라 UI의 구성과 룩 앤 필이 변경되는 것을 확인할 수 있는 계기가 된다.


    G-Market

    검색 아이콘을 누르면 하단에서 Floating Layer가 올라와 검색을 진행할 수 있게 만들어주는 UI를 제공하고 있다. 여기서 이렇게 레이어 팝업으로 처리한 이유는 하단의 페이지를 유지하는 니즈가 많았으리라고 판단된다. 화면의 이동이 아닌 팝업으로 처리하는 장점은 해당 검색에 진입하기 전까지 있던 내용을 저장하지 않고 그냥 두고 그 위에서 부가적인 작업을 하는 것이기에 다시 바닥 페이지로 이동하는 것이 유리하다. 이 UI는 11st도 마찬가지로 사용하고 있는 UI이다.


    SSG.com

    검색 영역을 누르면 검색 영역이 확장되면서 바로 검색어를 입력할 수 있도록 OS 키보드를 호출하는 것을 확인할 수 있다. 검색이 메인되지 않은 서비스에서 검색을 눌렀다는 것은 키워드 검색을 통해 빨리 상품을 찾고 싶은 니즈를 읽었다고 본다. 그래서 해당 페이지로 진입했을 때 바로 키워드를 입력할 수 있게 키보드를 노출하는 것은 정말 세심하게 사용자를 잘 배려했다.


    Farfetch

    고급 의류 브랜드를 판매하는 서비스의 느낌을 살리기 위해 광고 혹은 이미지로 콘텐츠를 전달하지 않고 사용자에게 최소한의 정보를 통해 상품을 검색할 수 있는 환경을 제공하고 있다.