복잡한 정보를 직관적으로 풀어내는 UI/UX 디자인
안녕하세요, 플러스 마이너스 제로 스튜디오입니다.
이번 글은 저희 스튜디오에서 개발한 Leadigm IP Market의 웹사이트 개발 과정을 이야기드리고자 합니다.
Leadigm IP Market은 서울특별시 강남구에 위치한 리다임IP그룹에서 의뢰한 지식재산권 거래 플랫폼 홈페이지입니다.
MVP용도의 랜딩페이지 성격이었던 이번 홈페이지는 최대한 간결하고 관리가 쉬운 홈페이지를 설계하면서도, 지식재산권 리스트를 필터링을 통해 세부적으로 검색할 수 있도록 개발했습니다.
이번 프로젝트의 가장 핵심 과제는 ‘복잡성’이었습니다.
지식재산권을 거래하는 홈페이지는 각 지재권의 출원인, 출원일자, 번호, 거래형태 등 매우 다양한 정보를 동시에 표시해야 하는 복잡성이 있습니다. 저희 스튜디오는 이번 홈페이지를 디자인하면서 이 복잡성을 어떻게 단순하게 풀어낼 수 있을까를 고민했습니다.
방문자의 행동을 단순화하기
아래 홈페이지는 클라이언트분께서 전달해주신 레퍼런스 페이지입니다.
위의 레퍼런스 페이지에서부터 알 수 있듯이,
방문자들은 정보 탐색 과정에서부터 자료검색을 위해 여러개의 검색 설정을 한 후
검색을 할 수 있습니다.
저희 스튜디오는 먼저 이 페이지에서 고객이 하는 행동을 분류하였습니다.
검색창을 통합하자
가장 먼저, 그리고 자주 활용될 기능은 역시 검색어와 검색항목 설정이었습니다.
저희가 발견한 것은 이 페이지에서는 검색항목을 전체, 지식재산명, 출원번호를 구분한다는 것이었습니다. 저희는 이에 다음과 같이 판단했습니다.
출원번호는 고유 ID이고, 재산명과 내용은 문장이기에 사용자 의도가 겹칠수는 없다.
그렇습니다.
지식재산명 혹은 내용으로 검색할 때에는 특정한 단어나 문장을 기반으로 검색할 것이고, 출원번호나 등록번호를 기반으로 검색할 때에는 고유한 ID를 검색할 것이기에 사용자가 이를 의도적으로 구분해 검색항목을 선택하게 하는 것은 방문자가 이중으로 행동하게 하는 것 이었습니다.
이에 저희는 모든 검색 관련 내용을 한개의 검색창으로 합쳤습니다.
검색하고자 하는 것이 내용에 있거나, 제목에 있어도
혹은 출원번호/등록번호이더라도 사용자가 검색을 하면 모든 정보를 기반으로 동시 검색이 되도록 하여 방문자의 행동을 단순화시켰습니다.
필터링 기능 단순화
하지만 해결해야하는 문제는 이것만이 아니었습니다.
레퍼런스 페이지의 이미지와 같이 검색은 검색어만을 기반으로 이루어지는 것이 아닌, 카테고리와 기간으로도 검색이 가능하여야 했습니다.
저희는 여기서 두가지 의도를 파악했습니다
카테고리
카테고리를 구분하는 것은 매우 중요했습니다. 홈페이지에 방문한 고객들은 특정한 카테고리를 검색하고자 하는 의도를 가지고 오는 경우가 많았기 때문입니다.
기간 검색
기간을 검색하고자 함은 정말 명확하게 특정 기간의 내용만을 보겠다는 의도가 아니었습니다.
해당 지식재산권이 대략 언제쯤에 공개/업로드 된 것인지와 최신의 자료가 맞는지를 확인하고 싶은 것 이었습니다.
하지만 저희는 위의 두가지 의도를 각각 검색창에서 세부적으로 설정하도록 하기에는 기능과 디자인의 복잡성이 증가해 방문자의 UX에 매우 안좋은 영향을 끼친다 파악했습니다.
따라서 저희는 이 기능을 아래와 같이 단순화시켰습니다.
위의 사진은 최종적으로 완성된 지식재산권 리스트 홈페이지입니다.
저희는 가장 먼저 ‘카테고리’ 설정을 드롭다운 방식이 아닌 다중선택으로 변경했습니다.
이렇게 함으로서 정보 필터링을 위한 유저의 행동을 2단계에서 1단계로 단축시키고 UI 또한 더욱 직관적으로 개선하였습니다. 또한 기술분야를 태그 형식으로 표시하여 유저들이 해당 내용을 더 쉽게 확인할 수 있도록 했습니다.
그 다음으로 저희는 기간 검색을 과감하게 삭제했습니다.
유저들이 검색어를 입력하면 자동으로 최신순으로 내용이 정렬되도록 하고, 유저들은 원하는 기간 근처로 이동하여 해당 기간에서 검색할 수 있도록 했습니다.
이렇게 저희는 홈페이지의 리스트 페이지에서 복잡한 필터링 및 검색 기능을 단순화시키고 방문자의 행동단계를 의도적으로 낮추고 제약해 더 나은 UX를 만들어낼 수 있었습니다.
복잡한 정보를 직관적으로 풀어내기
검색어 창과 리스트창보다 더 큰 문제는 각 지식재산권의 상세 페이지였습니다.
먼저 아래 레퍼런스 페이지를 볼까요?
위의 레퍼런스 페이지의 상세페이지에서 확인할 수 있듯 각 지식재산권 페이지에는 무수히 많은 정보가 표시되어야 합니다. 특히, 위의 검색창과 달리 지식재산권에서는 모든 정보 하나하나가 방문자 입장에서 중요한 정보이기에 유저의 행동을 제약하거나 의도적으로 정보를 제한할 수 없습니다.
정보의 유형화
저희 스튜디오는 가장 먼저 유형화할 수 있는 정보와 유형화할 수 없는 정보를 구분하였습니다.
각 지식재산권의 국내/국외 출원 여부, 지식재산권의 종류, 지식재산권의 산업분야는 모두 유형화할 수 있는 정보입니다. 이에 저희는 레퍼런스 페이지와 달리 유형화할 수 잇는 정보는 각 파트별로 모아 태그 기반으로 확인할 수 있도록 하였습니다.
위의 사진과 같이 각 정보의 유형정보를 단순 텍스트로 표기하기보다 태그 기반으로 표기함으로서 방문자들은 자연스럽게 정보의 유형을 텍스트를 상세히 읽지 않고도 파악할 수 잇습니다.
정보의 그룹화
그 다음, 저희는 유형화 할 수 없는 정보를 확인하고 이 정보들을 그룹화하였습니다. 그렇게 함께 보면 좋을 정보는 인접하게 표시하고, 정보의 위치를 조율하여 필요한 정보를 직관적으로 확인할 수 있게 만들었습니다.
디자인을 통한 사용자 경험(UX) 개선
앞선 개발 사례에서 알 수 있듯이, 같은 역할을 하는 홈페이지, 같은 행동을 요구하는 과정이더라도 이것을 어떻게 분석하고 홈페이지에 자연스럽게 녹여내느냐에 따라 사용자 경험(UX)는 큰 폭으로 달라지게 됩니다.
아래는 이번 사례에서 기존 레퍼런스 페이지와 저희가 개발한 Leadigm IP Market의 검색 과정을 나열한 것 입니다.
기존: 페이지 진입 → 검색어 종류 설정 → 검색어 입력 → 분류 드롭다운 열기 → 분류 선택 → 기간 선택 → 검색
개선: 페이지 진입 → 분류 클릭 → 검색어 입력
이처럼 기존 홈페이지는 총 7단계를 요구하였지만, 저희는 이를 3개의 단계만으로 검색이 완료되도록 하였습니다.
이렇게 고객이 동일한 결과를 위해 소모되는 액션(행위)의 갯수를 줄일 때마다, 각 단계에서의 고객의 이탈율은 큰 폭으로 감소하게 됩니다.
마찬가지로 각 상세페이지 내에서도 동일한 정보를 표시하면서도 이 정보를 더 직관적으로 보여주어 방문자들이 훨씬 쉽게 정보에 접근할 수 있도록 개선했습니다.
홈페이지 개발은 단순히 이쁜 디자인을 만드는 과정이 아닙니다.
각 방문자들의 액션과 고객의 의도를 체계적으로 분석하여, 어떻게 이탈율을 줄이고 고객의 행동을 이끌어낼지를 고민하는 과정이 제일 중요합니다.
hello@plusminus-zero.studio
070-8098-9503