디자인이나 개발처럼 IT 분야에서는 웹사이트들을 즐겨찾기에 다양하게 저장하고 많이 참고할수록 결과물에 있어 다다익선이지만, 그만큼 관리가 필요하다고 느껴 개인 프로젝트 주제로 만들게 되었습니다. 시간이 갈수록 쉽게 사용되고 편리해지는 자동화 기능에 비해 현존하는 브라우저 즐겨찾기 기능은 오래된 업데이트 날짜로 그 간극에 괴리감을 느껴 사용자 조사를 통해 문제를 검증하고 사용성 테스트 과정을 거쳐 유저의 의견을 수용하며 프로젝트를 진행했습니다.
어떻게 하면 즐겨찾기 기능의 경험을 편리하게 제공할 수 있을지에 대해 문제 의식을 가졌습니다. 예를 들어 구글 북마크바의 경우 경고창을 보기 어려울만큼 즐겨찾기를 더한다, 제거한다. 그리고 분류한다. 이 세가지 기능이 북마크바의 전부인 점이 가장 큰 문제점이라고 생각했습니다. 여기에 변형된 자동화 기능이 더해진다면 더 멋진 브라우저 경험이 되지 않을까 하는 생각에서 출발했습니다.
Main Features
“제목으로 구분을 못해서 이미지가 있었으면 좋겠다고 생각했다.” “자주 가는 사이트가 많아서 분류가 한정적일 때 아쉽다.” 실제 즐겨찾기 기능 사용자들의 목소리를 바탕으로 주요 기능을 추려냈습니다.
1. 다양한 정보
메모, 태그, 썸네일 수정 기능을 통해 웹사이트를 방문하지 않고도 어떤 사이트인지 알아볼 수 있습니다.
2. 간단하게 저장
일회성으로 저장하고 싶은 사이트는 크롬 확장 프로그램의 읽기 목록 탭에서 클릭 두번으로 쉽게 저장할 수 있습니다.
3. 보고 싶은 핵심만
웹사이트에서 유용한 내용만 따로 하이라이트하고, 저장된 웹사이트들을 골라 하나의 문서를 만들고 공유할 수 있습니다.
problem solving statement
Competitive Analysis
현재 즐겨찾기 기능을 제공하는 제품의 장단점을 분석하고, 스토어 리뷰를 통해 사용자들의 목소리를 듣고 눈에 띄는 기능을 살펴봤습니다.
User Survey
즐겨찾기를 사용하는 사람들의 이야기를 수집하고 문제를 구체화하기 위해 여러 커뮤니티에 공유하여 21명을 대상으로 설문 조사를 진행했습니다. 먼저 사전 질문을 통해 즐겨찾기 기능을 사용하는 개괄적인 생활 방식을 알아보고 평소에 가지고 있던 생각과 경험을 알아보고자 스무개의 질문을 추려냈습니다.
웹사이트 즐겨찾기 기능을 사용하는 목적이 무엇인가요?
만약 내가 즐겨찾기했던 웹사이트들을 찾을 때, 어떤 사이트였는지 쉽게 파악할 수 있는 정보는 다음 중 무엇일까요?
웹사이트 즐겨찾기를 저장하려고 할 때 다음 중 여러분이 직접 설정할 수 있다고 하면, 어떤 기능이 가장 유용할 것 같나요?
Result of User Survey
설문 조사를 통해 사용자는 즐겨찾기 기능 중 폴더 관리나 분류 방법에 가장 아쉬움을 느끼고 있었습니다. 또한 일부 주관식 질문을 통해 즐겨찾기와 함께 시너지를 낼 수 있는 다른 기능들에 대한 아이디어나 의견을 얻을 수 있었습니다.
5개 영역으로 나눠 진행
사전 질문 | 즐겨찾기 기능 활용 전반 | 사용 기기 | 추가 기능 | 웹 서핑
21명 대상
웹사이트 즐겨찾기 기능을 얼마나 사용하시나요?
웹사이트 즐겨찾기 기능을 사용하시면서 추가되었으면 하는 부분이 있었나요?
즐겨찾기로 접속한 횟수 표시
자동 분류 / 용도에 따른 정렬 기능
검색 기능
한눈에 펼쳐볼 수 있는 UI
여러 번 방문 시 상단으로 오는 기능
사이트별 자동 폴더링 기능
User Interviews
설문 조사에 참여한 사람들 중 인터뷰 의사가 있는 사람들을 대상으로 심화 질문과 설문 답변을 토대로 한 개별적인 질문들로 준비했습니다. 총 5명을 대상으로 약 26개의 질문을 해 평균 47분의 인터뷰 조사를 진행했습니다. 인터뷰를 통해 사용자가 제품을 사용하는 특정 상황을 디테일하게 이해하고 기능에 대한 우선순위를 판단할 수 있었습니다.
A
여성/대학생/20대
b
여성/대학원생/20대
c
여성/회사원/20대
d
여성/배우지망생/20대
e
남성/취업준비생/20대
유용하다고 생각하는 웹사이트를 잊고 못찾은 적은 없었나요?
많았어요. 유튜브같은 거 크롬에서 북마크를 하는데 뒤늦게 봐서 삭제했다가 다음주에 왜 삭제했지? 봤어야 했는데 이렇고. 논문 같은 경우도 필요 없으니까 삭제해야지 하고 뒤늦게 필요하다는 걸 발견한다. 제대로 파악을 못하고, 너무 많으면 관리가 안되니까.
너무 많아요. 맞아 아쉬웠었어요. 그래서 하나하나 다 들어가봤어요. 바쁘게 북마크를 하다보면 북마크를 엉뚱한 폴더에 저장해놓으니까 그거야 말로 못찾는 것 거거든요. 일단 귀찮아서 폴더 안만들고 여기다 넣어야지 하고 했을 때 못찾아서 그랬던 것 같아요.
있었어요. 까먹고 저장을 못하거나 갑자기 렉이 걸려서 강제 재부팅하거나 날라가거나. 정신없이 까먹고 나서 넘길 때. 너무 큽니다... 타고타고 들어갔으니까 아쉬워요.
아쉬움 있죠. 그래서 어제도 한정식 집을 못찾았어요. 네이버에 잠실 한정식을 검색해봤어요. 이게 비슷하면서도 내가 찾던 게 아닌 것 같아서 결국엔 포기하게 됐어요. 다른 지역을 가기로 해서 아쉬웠어요.
쇼핑 같은 걸 할 때 웹서핑을 할 때 첫번째 본 게 진짜 좋았었는데, 어제 첫번째로 본 글이 좋았거나 첫번째로 본 상품이 좋았을 때 있잖아요. 그럴 때 방문기록 같은 게 보면 남아있으니까. 방문 기록 같은 게 남는 게 유용한 것 같아요.
즐겨찾기의 어떤 정보가 편할 것 같은지 중요도를 나열한다면요?
제목, 태그, 하이라이트 순이요. 논문에 요약한 부분이 있어서 그 한 문단의 내용 긁어올 것 같아요.태그는 제가 뇌과학 쪽을 하다 보니까 어느 부분을 타겟팅 하는지 해마, MRI, 논문이 쓰여진 연도, 이런 식으로 설정하고 하나로는 부족하니까 2개 이상 할 것 같아요.
썸네일, 하이라이트, 태그 순이요. 제목만 보고 그 컨텐츠를 어떤 내용인지 구별을 못했었어요. 이번에 논문 쓰면서 많이 북마크를 해놓고 찾으려고 하는데 결국 제목으로 구분을 못해서 한번씩 눌러봐서 확인했어서 이미지가 있으면 좋겠다고 생각했어요.
메모, 이미지, 제목 순이요. 메모는 예를 들어 큰 카테고리_어디에 필요해서 저장했는지(프로젝트, 스터디용)_정보에 대한 걸 압축해서 쓸 수 있는 단어를 쓸 것 같아요. 예를 들어서 UI_프로젝트명_버튼가이드 라던가 이렇게 쓸 것 같아요.
하이라이트, 태그, 제목 순이요. 태그는 만약 기사를 저장했다면 무슨 과제 때문에 저장해놨다. OOO 과제 이렇게 저장해놓고, 쇼핑몰 옷을 해놨다 그러면 어떤 스타일에 어디 갈 때 입고갈 것 이렇게 태그하는 게 1순위일 것 같아요.
저는 제목, 포함하는 대표 웹사이트, 하이라이트, 썸네일 순서대로 유용하다고 생각합니다.
Defining Persona & User Journey
앞서 진행된 인터뷰와 설문조사의 수집된 유저 데이터를 기반하여 페르소나를 개인적인 목적과 업무적인 목적으로 나뉘어 2명을 구축할 수 있었습니다. 이를 바탕으로 즐겨찾기 기능을 사용할 때를 5단계로 나누어 각각 사용자 여정 지도를 그려냈습니다.
Personal Purpose
Business Purpose
Key Problems & Insights
설문 조사와 인터뷰를 바탕으로 번복되는 이야기들을 카테고리별로 추려냈으며, 그중에서도 문제점으로 번복되는 이야기를 정리해 기능에 대한 인사이트를 도출했습니다. 그 외 제시된 의견들은 아래 인사이트 외 서브 기능으로 카테고리화했습니다.
1. 문제점
폴더에 중복 저장되어 있다.
제목으로 구분 못해서 이미지가 있었으면 좋겠다고 생각했다.
한눈에 안보여서 까먹고 못찾는다.
바쁘게 북마크해서 북마크가 엉뚱한 곳에 가있다.
자주 가는 사이트가 많아서 분류가 한정적일 때 아쉽다.
찾기가 힘들다.
링크를 보내 놓았는지 까먹을 때가 있다.
언제 저장했는지 기억이 안날 때가 있다.
2. 인사이트
북마크 관리에 자동화 시스템을 도입해 스마트하게 운영한다.
→ 중복된 링크, 카테고리 자동 분류
웹사이트에 대한 다양한 단서들을 추가해 한눈에 알아보기 쉽게 한다.
북마크에서 생기는 너무 많은 정보들의 관리를 도와준다.
어떻게 하면 사용자가 즐겨찾기 기능을 편리하게 이용할 수 있을까?
Detailed Features & MoSCoW Prioritization
사용자 설문조사와 인터뷰는 즐겨찾기 사이트에 대한 메인 기능과 그 외 중요도 순서를 더 정확히 알도록 도왔습니다. 이를 염두하며 MoSCoW 우선순위 방법론으로 필요한 기준들을 몇개 추가해 기능들을 지면에 배치하였습니다.
우선순위 설정 기준
핵심 기능 여부
문제의 심각성 정도
사용자에게 전달할 수 있는 가치
High/Low Efforts
IA(Information Architecture) - Web & App
웹 페이지와 앱으로 즐겨찾기 기능을 사용하는 유저에 따라 웹과 앱 나누어 Visual Hiearchy를 텍스트로 구조화했습니다. 설문조사 에서 즐겨찾기 기능을 가장 많이 사용하는 기기로 모바일(4명)보다 웹 브라우저(15명)를 더 많이 사용 하는 것을 참고해 웹에 대한 중 요도를 높이고 앱은 기능을 덜어내었습니다.
Web
Mobile
Sketch
화면 성격에 따라 IA에서 구조화된 기능들과 설문을 통해 발견한 기능들의 우선순위를 고려하여 웹과 앱 프레임을 러프 스케치로 그려냈습니다. 각 화면별로 필요한 부위를 취합하고 수정해나가는 방식으로 이후 와이어프레임을 완성합니다.
Low-fi Wireframe
스케치 이후, High-fidelity 단계를 가기 전 와이어프레임으로 구체적인 디자인을 완성하는 과정을 가졌습니다. 스케치에 살을 붙이며 유저의 사용성과 경험을 예상하고, 스스로 유저의 입장으로 대입하며 그려냈습니다.
Web
Mobile
Design System Setting
컬러와 폰트, 간격, 아이콘 및 컴포넌트 등 디자인적인 요소들을 디자인 시스템으로 나누었습니다. 앱과 웹에서 사용할 수 있는 공통적인 부분과 그 외 다르게 설정할 부분을 구분해 일관된 사용성을 유지할 수 있도록 구축했습니다.
Usability Test: Evaluating Interfaces and Usability
완성된 디자인을 바탕으로 5명의 사용자에게 사용성 테스트를 부탁했고 사전에 미리 프로토타입 화면을 준비해 온라인으로 실시했습니다. 기능별로 섹션을 나누어 테스크를 구성했으며 테스크가 끝날 때마다 만족도 점수(1~5점), Good/Bad 평가를 진행했습니다. 또한 녹화를 통해 테스크 성공 여부와 소요 시간을 측정해 사용자의 리뷰와 행동이 일치한지에 대해서 확인하며 신뢰도 높은 피드백을 받아냈습니다.
사용자에게 즐겨찾기 사이트 제목을 바꾸고 저장하는 미션을 주었을 때 소요 시간, 오류 횟수를 통해 사용자가 기대한 바를 충족시키지 못한 것을 알 수 있었습니다. 제목에는 수정을 표시하는 수정 아이콘과 밑줄 디자인을 추가하고, 스크랩과 즐겨찾기 탭을 2개의 화면으로 나누어 시각적으로 분리시켰습니다.
AS-IS
TO-BE
2. Bookmark Link Button of Main Screen
즐겨찾기한 사이트 링크 바로가기를 찾는 미션에서는 사용자에게는 어느 정도 학습이 필요했고 또 좋지 못한 경험을 주었다는 점에서 수정하게 되었습니다. 링크 클릭 버튼을 이미지 밖에 두어 각각의 영역이 독립적일 수 있게 만들었습니다.
AS-IS
TO-BE
3. Add Evaluation Function
사용성 테스트 중 “카톡으로 중요한건 보내놓으니까 정리가 안될 때가 있어서 체크해놓는 아이콘이 있으면 좋겠다”는 의견에 즐겨찾기 사이트의 페르소나 상황과 부합하여 최종 디자인에 반영했습니다. 사용자는 즐겨찾기한 사이트에서 5가지 별로 나누어 머릿 속에 새겨 놓고 싶은 사이트, 계속 읽고 싶은 사이트 등을 표시할 수 있습니다.
평소 웹서핑을 하면서 문제로 인식했던 기능을 웹사이트 프로젝트로 진행하면서 즐겨찾기에 대한 사람들의 의견을 듣게 되고, 그 과정에서 어떻게 하면 편리한 경험을 줄 수 있을지 고민을 거듭해 스스로도 배울 수 있었던 시간이었습니다. 특히 사용성 테스트 중 예상 밖의 불편함을 이야기하는 상황을 겪으며 혼자만의 디자인은 결코 옳지 않다는 생각을 깨닫게 된 프로젝트였습니다. 예를 들어, 구글의 확장 프로그램 UI는 한 화면에 모두 디자인하는 것과 읽기 목록이라는 개념의 생소함 중에 어떤 것이 우선순위가 되어야 하는지에 대한 결론을 내릴 수 있었습니다. 또한 실제로 프로덕트가 출시된 것은 아니지만, 웹 서핑을 경험하는 사용자들에게 더 편리하고 효율을 극대화시킬 수 있는 보조 수단으로 적합한지 시간을 두고 더 알아가고 싶은 프로젝트 중 하나입니다.
.jpg)
.jpg)
.jpg)
_App.jpg)
_right.gif)
_right.gif)
