알버트 아인슈타인은 ‘무엇이든지 어렵게 만들기는 쉽다. 하지만 똑같은 것을 쉽게 만드는 것은 엄청난 노력과 특별한 재능이 필요한 매우 어려운 작업이다.’라는 말을 남겼습니다.
이 말은 지금 시점에서 많은 생각을 하게 되는데요. 기술은 스테로이드라도 맞은 듯 너무나 급속도로 성장하고, 이를 활용한 많은 서비스가 대거 등장하는 가운데, 이 기술을 사용자에게 조금이라도 빨리 접목하기 위한 경쟁도 치열합니다. 그래서 사용성은 디자이너뿐 아니라, 개발자, PM 등 제품을 만드는 사람이라면 누구나 관심을 가지게 되는 분야인 것 같습니다.
혁신적인 기술로 좋은 제품을 만들어도 쓰기 어렵다면 사용자는 외면하게 되는데요, 애플의 아이패드와 아마존의 킨들을 그 예로 들 수 있습니다. 아이패드는 페이지 간 이동 시 지연이 없고 페이지를 넘기는 인터랙션이 손으로 넘기듯 실생활과 유사하게 적용된 반면, 킨들은 속도도 느리고 페이지를 넘길 때 버튼을 눌러야만 하며, 특히 가로 버전일 때는 버튼을 누르는 위치가 애매했습니다. 그래서 한때는 인기가 많은 제품이었지만, 아이패드가 나온 이후 그 인기가 하락하는 결과를 맞이하게 됩니다. 사용성이 중요함을 각인시켜주는 하나의 사례였습니다.
디지털 전환기에 들어서면서 온라인 서비스가 많이 등장하고 있는 가운데, ‘이 복잡한 서비스를 친숙하고 쉽게 만들 수 있을까?’라는 질문은 많은 기획자, 디자이너의 고민인 것 같습니다. 저 또한 같은 고민을 하는 디자이너로서, 이 고민을 조금이나마 해소하고자 모아 본 각 서비스의 사례들을 함께 공유하려 합니다.
우리는 사용성을 왜 생각해야 할까?
사용성에 관해 유명한 책을 집필하고, UX 업계의 소문난 전문가인 스티브 크록은 사용자를 관찰하며 충격적인 사실을 발견했습니다. 사용자가 사이트나 서비스를 확인할 때, 대충 보고 훑어보기만 한다는 것인데요, 많은 분들이 공감하고 계시는 내용일 것입니다.
사용자는 서비스를 파악할 때 많은 시간을 할애하지 않습니다. 즉, 우리가 사용자에게 서비스를 알리기 위해서는 시간이 촉박하다는 것입니다. 사용자는 꼼꼼하게 파악하는 것이 아닌 훑어보는 행태를 보이기 때문에, 우리 서비스를 빠르게 알 수 있게 하는 방법은 메시지를 눈에 띄게 전달하고 학습하는 시간을 줄이는 것입니다.
이론적으로 살펴보는 사용성의 속성
사용성은 크게 다섯 가지로 분류할 수 있습니다. 제이콥 닐슨의 10가지 휴리스틱 자료와 HCI 개론 등의 도서를 참고해 정리했습니다.
다섯 가지 원칙은 바로 효율성, 정확성, 의미성, 유연성, 일관성입니다.
- 효율성: 작업을 수행하는 데 드는 시간과 노력의 양은 합리적인가?
- 정확성: 시스템을 사용하면서 저지르는 오류를 방지할 수 있는가?
- 의미성: 사용자가 보고 싶은 정보나 실행하고 싶은 기능이 잘 제공되어 있는가?
- 유연성: 시스템을 통해 사용자가 원하는 작업을 원하는 방식으로 진행할 수 있는가?
- 일관성: 시스템의 정보나 기능이 다른 대상과 비슷한 모습이나 유사한 역할을 가지고 있는가?
이 다섯 가지 원칙은 하위에 여러 속성도 내포하고 있는데요, 그중에서도 오늘은 효율성에 대해 알아보고자 합니다.
효율성은 작업을 수행하는 데 드는 시간과 노력의 양은 합리적인가?
효율성에는 두 가지 속성이 존재합니다. 반응성과 단축성입니다.
반응성은 사용자의 행동에 대한 시스템의 반응속도와 관련된 것으로, 시스템이 얼마나 빨리 사용자의 행위에 반응하는지는 시스템이 얼마나 지체 없이 반응했는지와 같습니다.
즉, 시스템과 네트워크가 지체 없이 빠르게 반응한다면 사용자는 더할 나위 없이 좋겠죠. 하지만 현실적으로는 불가능한 경우가 많습니다. ‘시스템의 메모리가 꽉 찬 상태라면?’, ‘네트워크가 불안정한 곳이라면?’ 등 우리가 직접 해결할 수 없는 문제들이 있습니다. 그렇다면 어떻게 우리는 이 효율성을 향상시킬 수 있을까요?
- 시스템 반응 속도는 안정적으로 빨라야 하며
- 시스템의 현재 상태를 시각적으로 명확히 나타내야 함
완벽히 해결할 수 없는 고질적인 문제라면, 실제 반응성을 향상시키기 위해 지체되는 시간과 액션에 대한 반응을 시각적으로 자명하게 보여주어 이 문제를 보완할 수 있습니다.
시스템 진행 상태
시간이 얼마나 걸리는지 시각적으로 보여주어 사용자가 체감하고 인지할 수 있도록 합니다.
box
- 파일이 업로드되는 상태를 표시하며 완료된 후에는 창이 닫힌다.
Google Drive
- 파일이 업로드되는 상태를 표시하며, box와는 다르게 창이 닫히지 않는다.
Additor
- 파일이 업로드되는 상태를 표시한다.
- 업로드가 완료된 파일에 대해 시각적으로 크게 구분을 두고 있지는 않습니다.
시스템 상태를 보여줌으로써 기다리다가 이탈하는 상황을 방지하고, 고객이 스스로 각 상황에 맞게 응용할 수 있기에 효율적으로 서비스를 사용할 수 있게 해줍니다.
즉각적 선택 행위 인지
사용자가 선택 행위를 했다면, 그에 대한 반응을 시스템에서 보여줘야 합니다.
- 웹 스크랩을 하면, 빈 아이콘 이미지에서 fill 아이콘으로 바뀐다.
- 스크랩이 된 페이지를 즉각적으로 볼 수 있다.
- 게시물에 ‘좋아요’를 클릭하면 애니메이션이 적용되면서 fill 아이콘으로 바뀌며, 색상 또한 변경된다.
즉각적으로 반응한 상태를 보여줌으로써 시스템이 잘 작동되고 있음을 시각적으로 인지하게 해주고, 사용자가 원하는 대로 시행되고 있다는 좋은 경험을 제공해 줍니다.
여러 사례를 통해 반응성에 관해 살펴보았습니다. 시스템이 즉각적인 반응을 보여주지 않으면 사용자는 기다리는 시간이 지루해 이탈할 수 있고, 반응을 보이지 않는다면 잘 진행되고 있는지 확인하기 어려울 것입니다.
이처럼 작은 것처럼 보이지만 이런 미세한 설정들이 사용자에게 큰 영향을 끼친다는 사실을 잊지 말아야겠습니다. 흔히 볼 수 있는 사례를 이론에 접목시켜 정리해보았는데요, 많은 도움이 됐기를 바라며 다음에는 효율성의 나머지 속성인 단축성에 대한 내용으로 다시 만나 뵙겠습니다. 감사합니다.
Daseul / Product Manager
글쓴이가 만든 제품이 궁금하다면?
지금 새로운 제품 만들고 있다면?
