쉽게 무너지지 않는 UX/UI 디자인을 위하여
뭣이 중한지는 알고 하자...
# 절대 현혹되지 마소
절대 현혹되지 마라축록자 불견산 逐鹿者 不見山
사슴을 쫓는 자는 산을 보지 못한다. 즉, 한 가지 일에 마음을 빼앗기는 사람은 전체를 보지 못한다는 뜻의 고사성어입니다. 사용자를 현혹시킬 화면과 UI 디자인에만 몰두하다 보면 전체 서비스의 흐름을 잃거나 놓치는 부분이 분명 발생하게 됩니다. 그렇게 되면 공들인 나의 디자인도 결국 힘을 잃게 되겠죠. 작은 것에 현혹되고 실리를 탐하느라 대의를 망각하지 않는 UX/UI 디자인을 위해!
#1 UI 그리고...
페이지 새로고침, 미끼를 물었다...UI는 사용자 경험의 한 부분일 뿐. 고려해야 할 부분이 UI 외에도 참 많습니다. 최근 강조되는 부분이 바로 Interaction인데요. 사람과 사물 사이의 상호작용을 좀 더 부드럽고 원활하게 만드는 게 바로 인터랙션이라고 생각합니다. 이 인터랙션을 상황에 맞게 잘 구성한다면 내가 설계한 화면을 User들이 더 쉽게, 편리하게 사용할 수 있겠죠. 특히 제한된 크기의 화면을 사용하는 모바일 App에서 인터랙션은 필수입니다!!
네이버의 말하는 검색 UI Interaction최근 개편된 네이버 음성인식 검색의 인터랙션이 인상적이었습니다. 음성 인식은 화면의 터치, 타이핑 없이 실시간으로 음성을 텍스트로 변환하여 결과를 보여주는 단순한 프로세스이지만, 이 과정이 자연스러워야 하고 계속 연결되고 있다는 느낌을 사용자에게 보여주는 것이 포인트라고 생각합니다. 네이버의 음성인식 검색은 이 과정을 매력적으로 잘 풀어냈다고 생각합니다. '인식 - 분석 - 결과'의 프로세스가 무척 자연스럽게 연결되는 것이 인상적입니다! 아직은 어색한 음성인식 서비스를 사용자가 어색해하거나 불편해하지 않게 받아들이도록 애쓴 흔적이 보입니다.
각 상태별 도트 모션 by 네이버하지만 이러한 인터랙션도 잘 쓰면 '약'이 되고 잘못 쓰면 '독'이 됩니다. 과한 인터랙션은 사용자의 집중력을 흩트리고 App의 구동에도 무리를 줄 뿐 아니라, 사용자의 이탈률을 높일 수도 있습니다. 정말 나쁘네요ㅎㅎ UI Interaction (혹은 Animation)을 설계할 때 과연 이게 필요한 상황인지, '속도'는 알맞은지를 꼭 체크해야 합니다. 이 두 가지를 고려하지 않은 인터랙션은 그저 사용자를 괴롭히는 움직임이고 눈속임일 뿐입니다.
역시나 '적당히'가 가장 어렵습니다.
애는 쓰는데 자연스럽고, 열정적인데 무리가 없는 디자인...#2 '사용자님'만을 생각합니다
Target User를 알고, 이해하자. 사용자 경험 설계에 있어 기본으로 갖추어야 할 마인드입니다. 사용자가 무엇을 원하는지, 어느 부분에서 무너지는지 꼼꼼히 살피고 깊게 파고들어야 합니다. 하지만 이게 참 말처럼 쉽지 않죠... 충분한 데이터를 수집하기도 분석하기도 쉽지 않습니다. 그러다 보면 어느 순간 나를 기준으로 사용자를 생각하게 됩니다. Target User를 '내 기준'으로 주관적으로 생각하게 되는 실수를 하고 말죠. 하지만 내 생각과 실제 사용자의 행동에는 큰 차이가 있습니다. 아래 도표처럼 극히 일부분만 겹칠 뿐...
ㅇㅣ렇다니까... 다르다 달라!Less visual information, More noticeable. 사용자는 바쁩니다. 온전히 우리의 서비스에만 집중하지 못하죠. 모바일 중심의 서비스일수록 더욱 그렇습니다! 이동 중이거나, 음악을 감상 중이거나, 스포츠 중계를 보거나, 심지어 업무 중이기도 하죠. 그렇기 때문에 사용자에 대한 큰 기대는 금물입니다. 사용자는 내가 기획한 콘텐츠를 일일이 살피지 않다는 것을 명심! 보이는 정보가 적을수록 더욱 명확해집니다. 보여주고 싶은 건 많겠지만, 그럴수록 욕심을 버리고 명료하게 전달해야 하는 이유입니다.
#3 저는 이 길 밖에 모릅니다만...
process, 유용하지만 맹신하지 말 것틀에 박힌 프로세스를 고집하지 않길 바랍니다. 여기서의 프로세스란 서비스의 시작점부터 개발까지의 프로세스뿐만 아니라, 내 개인 작업의 프로세스까지 포함합니다. 틀에 박힌 프로세스로는 크리에이티브한 결과물이 나오기 힘듭니다. '리서치-기획-디자인-가이드-개발-QA'의 프로세스는 일반적으로 대부분의 서비스에서 효과가 있겠지만, 그렇다고 모든 프로젝트에 적용되지는 않습니다.
새로운 접근법과 프로세스로 만들면 이런 가방이 나옵니다STEP 1: TRUCKSPOTTING
STEP 2: CUTTING TARPS
STEP 3: WASHING
STEP 4: BAG DESIGN
STEP 5: THE FINISHING
FREITAG의 가방 만드는 프로세스입니다. IT 서비스의 사례는 아니지만, 새로운 접근법과 새로운 제작 프로세스로 세상에 하나뿐인 가방을 만들고 있습니다! 우리가 틀에 박힌 프로세스만을 고집해서는 안 되는 이유입니다. 틀에 박힌, 늘 하던, 익숙한 프로세스는 한계가 있습니다. 내가 지금 만들고 있는 UX/UI가 이전에 없던 새로운 서비스가 되길 바란다면, 과감하게 새로운 프로세스를 통해 만들어보는 건 어떨까요?
#4 Prototype with Real Contents
귀에 딱지가 앉도록 들었던 커뮤니케이션의 중요성. 기획, 개발자와의 커뮤니케이션을 위한 목업을 제작할 때도 유념해야 할 부분이 있습니다. 바로 Real Contents인데요. 대충 뭉갠 텍스트와 더미 이미지, 혹은 서비스와 연관이 없는 너무 좋아 보이는 이미지 사용을 지양하고 실제 데이터, 혹은 실제 데이터와 가장 가까운 텍스트와 이미지를 사용해야 합니다.
<추천곡> 브로콜리너마저 - 커뮤니케이션의 이해좋은 이미지와 내 입맛에 맞는 글 줄로 만든 프로토타입과 실제 서비스되는 화면의 괴리감에 실망해본 경험이 다들 있을 텐데요. 그렇다고 이미지를 탓할 수도 없고... 커머스 서비스의 경우 상품 이미지의 차이가 주 사용층에 따라 다르기 때문에 더욱 그렇습니다. 패션 편집샵과 오픈마켓, 소셜커머스가 제공하는 콘텐츠의 차이가 있습니다. 늘 좋은 이미지를 제공받기 힘들 서비스 특성을 고려하여 실제 서비스가 오픈되었을 때를 고려하여 목업을 제작해야 함을 명심합시다!
real content를 목업에 사용한 흔한 좋은 예#5 디자인 너마저... 이거 고쳐주세욥!
에러, 위험 부담이 높은 기능과 디자인은 최대한 지양하시죠. 추후 고치고 수정해야 할 일이 계속 생긴다면 분명 촘촘하게 잘 된 UI 설계는 아닐 테니까요.
아름다움 < 사용성
디자이너에게는 안타까운 사실이겠지만, '아름다움'때문에 해당 서비스를 선택하는 사용자는 없습니다. 혹여 있더라도 극 소수입니다. 아름다움에 집중하다 여러 에러를 발생시키고, 개발이 늦어지고, 서비스가 무거워지면 사용자는 점차 이탈하게 됩니다. 우리가 아름다움보다는 사용성과 접근성이라는 유형의 가치에 좀 더 중점을 두어 화면 설계를 해야 하는 이유입니다.
올림픽 404 페이지, 아무리 보기좋고 유쾌한 404페이지라도 마주치치 않는게 최선입니다#6 위험을 감수하지 말 것
하지만 급격한 리디자인, 변화(위험)를 감수하지 않았으면 합니다. 새로운 것을 만들고 시도함에 있어 주저하거나 겁먹지 않는 자세는 바람직합니다. 새로운 UX 접근법이나 테크닉, 툴에 도전하는 과정에서는 누구나 실수를 하죠. 실수를 하고 나서야 비로소 내가 깨닫는 배움이 많기도 합니다. 이러한 위험을 감수하는 자세는 좋은 것 같습니다. 하지만 사용자와 맞닿는 UI 화면 설계 혹은 서비스 프로세스에 있어서 급격한 변화에는 조금은 보수적인 태도도 필요합니다.
같은듯 다른 페이스북 앱 UI의 변천사를 보고 계십니다 (2016~2018)무조건 새롭고 간편한 경험을 제공하기보다, 기존의 사용성을 해치지 않으면서 사용자의 신뢰를 유지하는 것이 중요합니다. 급격한 변화는 충성 고객을 잃을 수도 있을뿐더러, 설계가 잘 되었더라도 결국 사용성 측면에서 좋은 평가를 받기 힘들 수 있습니다. 기존의 흐름과 형태는 유지하여 현재 유저의 만족을 우선시하면서, 충분한 데이터와 근거를 바탕으로 사용성을 개선하는 것을 추천합니다!
타고싶다 독일차, BMW 3 시리즈이외에도 인스타그램, 카카오톡, 네이버 홈 화면의 UI는 이러한 급격한 변화보다는 기존의 서비스 UI를 유지하며 점차적으로 사용성 개선을 이뤄낸 좋은 사례라고 생각됩니다. 기존의 톤 앤 매너는 최대한 해치지 않은 채 천천히 작은 부분부터 하나씩 고쳐나갔죠.
급격한 변화로 힘든 경험을 겪은 좋은 예시. 인스타그램 앱, 유벤투스 팀 로고# 마치며
위 내용들은 굉장히 기본적인 내용이지만 꼭 기억하고 있어야 할 것들이라 생각합니다. 이 외에도 흔들리지 않고 UX/UI 디자인을 이끌어 나가는 자신만의 방법들이 다들 있겠죠. 단순히 화면을 그려내는데 현혹되지 말고, 기본적인 규칙들을 유념해 화면 설계를 한다면 시행착오도 줄이고 더욱 튼튼하고 오래가는 UI 디자인 작업이 될 것입니다. 늘 가까이에 두고 잊지 말자!
이미지 출처
https://blog.naver.com/nvr_design/221186309575
https://dribbble.com/shots/2186653-Fishing-refres
https://www.pinterest.co.kr/pin/104356916340421659/
https://dribbble.com/shots/3166627-Music
