데이터 기반 근거로 개선안을 제시하고 설득하는 디자이너
이 부분은 꼭 개선이 필요하다구요!
프러덕트 디자이너라면 우리 앱의 부족한 점을 개선해 완성도를 끌어올리고 싶은 욕구가 있습니다. 그러나 디자이너의 눈에 보이는 개선점이 다른 사람들 눈에는 보이지 않는 경우도 있기 마련이죠. 특히 지표상에서 부정 피드백이 없는 경우라면 더 그렇습니다. 체감상 느껴지는 문제가 없다면 ‘굳이’ 개선을 하지 않는게 합리적일 수 있죠.
알라미 앱에서도 눈에 보이는 문제는 없지만, 디자이너의 눈으로는 개선이 필요하다 느낀 화면이 있었습니다. 바로 여기 이 알람에디터 화면입니다.
알람 에디터 화면 Dark / Light저는 이 화면을 보고 막연히 ‘불필요한 정보가 많아 시각적 피로도가 높다.’ 라는 생각이 들었습니다. 리스트에 있는 아이콘은 없어도 무방할거 같았죠. 알람 에디터의 아이콘들은 통상적으로 사용하는 것(휴지통, 돋보기, 햄버거 아이콘과 같은)이 아닌 ‘알라미 고유 기능'을 나타낸 아이콘이기 때문에, ‘이 기능을 이해하는 데 즉각적인 도움이 되나?’ 라는 생각도 들었습니다.
그러나 이생각은 순전히 저의 가설이었고 근거는 없었습니다. 에디터 화면은 유저의 사용성에 큰 영향을 끼치는 페이지이기 때문에 순전히 저의 생각만으로 모두를 설득시킬 수 없었습니다.
가설에 근거를 더하자
그래서 저는 Visual Eyes라는 아이트래킹 툴을 근거로 활용했습니다. Visual Eyes는 인공지능으로 사용자의 아이트래킹, 관심 분포, 복잡도를 예상해 시각적으로 나타내주는 툴입니다. 피그마, 스케치, XD 에 플러그인을 설치해서 쉽게 사용할 수 있습니다.
기존의 알람 에디터 화면을 등록하니, 이런 결과가 나왔습니다.
세가지 데이터 Attention, AoI (Area of Interest), Clarity 에 대해 각각 확인하겠습니다.
Attention: 사용자의 아이트래킹을 예상해 히트맵으로 표현한 화면입니다. 사용자의 시선은 아이콘에 많이 머무르지 않다는 걸 알 수 있습니다. 생각보다 아이콘에 관심을 주지 않습니다. 또 기능명의 앞글자에만 시선이 머무르네요.
AoI: 정해진 사각 영역에 대한 유저의 관심도를 나타냅니다. 전체 화면의 평균 관심도와 비교했을때 정해진 구역의 관심도가 얼마나 크고 작은지를 알려줍니다. 에디터 리스트에서 사용자에게 잘 전달되어야 하는 정보는 ‘아이콘 + 기능명' 이기에, 이 구간의 영역을 지정했습니다.
Clarity: 말그대로 화면이 얼마나 명료한지를 나타냅니다. 초록색으로 표시된 부분은 복잡하지 않아 명료하고, 빨간색으로 표시된 부분은 복잡하고 명료하지 않은 부분입니다. 현재 화면의 명료도는 75%입니다.
기존 화면의 데이터를 해석해보자면 이렇습니다.
1. 사용자는 아이콘에 크게 주목하지 않습니다.
2. 사용자는 기능명 전체에 주목하지 않습니다. (앞단어에만 주목합니다.)
그럼 이 화면을 어떻게 개선할 수 있을까요?
어차피 관심을 받지 못하는 아이콘은 제거하고, 기능명의 Color level을 높이면 에디터 화면에서 가장 중요한 정보인 ‘기능명'에 더 집중할 수 있게 되지 않을까요? 바로 확인해보겠습니다.
Attention: 기존의 화면에서보다 기능명 전체에 시선이 머무르는 모습입니다.
AoI: 가장 하단의 ‘Label’을 제외한 모든 리스트에서 관심도가 올라갔습니다.
Clarity: 시각적 복잡도를 준다고 예상한 아이콘을 삭제하고 기능명의 대비를 높이니 명료도가 82%까지 개선되었습니다.
직감을 데이터로 확인하면 직감이 아니게 된다.
여러 항목이 수치상으로 개선된 근거를 가지고 작업을 하니, 더 설득력있게 구성원들과 이야기를 나눌 수 있었고, 디자이너로서 높은 Confidence 를 가지고 작업을 진행할 수 있었습니다.
제가 이용한 VisualEyes툴은 무료로 제공되는 기본 기능도 있으니 여러 관계자들을 설득할 근거가 부족할 때 꼭 이용해 보시길 바랍니다. :)
https://www.visualeyes.design/
딜라이트룸에서 같이 일하고 싶으신분!
여러 포지션이 열려있습니다.
우리 같이 여러 재미난 일들을 해봐요! ⏰
ttps://team.alar.my/
