사업 개발자들이 저지르는 UX 실수들
당신이 누군지 알잖아요...
본 게시물은 번역글입니다. 원문
Intoduction
Mendix partner에서 UX컨설턴트를 하는 저는
종종 조직화된 팀들이 멋진 내부 애플리케이션을 만드는 것을 발견합니다
저는 그 애플리케이션 내에서 UX를 개선하는 일을 하죠.
어떤 문제가 해결되는 창의적인 방식에 내가 사로잡혔을 때,
왜 몇몇 논리적인 해결책들이 나쁜 아이디어인지 설명하게 만들어야합니다.
제가 제시하는 해결책은 정답이 아니라 예외도 있으므로
영감을 찾는 정도로만 봐주십시오
Everything in a single screen.
이것은 가장 일반적으로 구현되는 나쁜 UX입니다.
당신은 이 작은 앱을 빠듯한 인터페이스로 시작하고
몇가지 기능을 추가하고 버튼들로 스크린을 가득 채우겠죠.
걱정하지마세요 우리도 다 그랬으니까.
논증
1. 적은 클릭
2. 한눈에 다보여 !
3. 유저들은 스크롤을 싫어하니까~
제가 이 인터페이스를 봤을때
모든 툴이 접혀있는 스위스 나이프가 생각났죠.
다양한 툴이 있지만 사용자들은 오직
이 스위스 나이프를 병따개로 씁니다.
Overwhelming
모든 옵션들을 펼쳐서 보여주는 것은 마치 개요를 보여주는 것 같죠.
하지만 문제는, 사용자들의 뇌는 최대 9개의 옵션만 이해하고
버튼들의 95%는 사용하지 않습니다.
Proximity
또다른 문제로는, 버튼이 영향을 미치는 데이터에 가깝다는 것입니다.
버튼이 많을수록 시각적 근접성을 잃게됩니다.
Users dont hate scrolling
‘사용자들은 스크롤링하는 것을 싫어한다’는 말은
오히려 적절한 위치에 적절한 컨텐츠를 넣지 못하고
한 화면에 정보를 많이넣어버리는 부작용을 가져옵니다.
문제는 스크롤이 아닙니다. 방대한 양의 정보들입니다.
페이지에 정보가 많다고해서 유저들이 정보를 많이 흡수하는 것은 아닙니다.
오히려 쉽게 지치고 사이트를 나가게 됩니다.
Millers law by Laws of UX
Law of proximity by Laws of UX
Dropdown buttons
그래서, 스크린에 있는 모든 버튼을 드롭다운 버튼에 넣었나요?
논증:
1. 더 집중되게!
2. 내가 필요한걸 더 쉽게 찾을 수 있게!
Balance is key
당신의 인터페이스가 실제 공간에 있다고 생각해보세요.
만약에 당신이 페이지들을 서랍속에 다 넣었다면,
당신은 원하는 페이지를 찾기 위해 모든 서랍을 다 열어봐야 할거에요.
디지털 UI에서도 마찬가지입니다.
만약 서랍이 논리적이고 제대로 작동하지만
정원 창고의 서랍에 정원 용품을 가지고 있다면,
BBQ 용품도 거기에 들어가야 할까요?
아니면 부엌에서? 아니면 둘 다?
균형이 잘 잡혀있는게 중요합니다.
bbq 용품을 얼마나 자주 사용하는가에 따라
창고에 둘지, 부엌에 둘 지 결정하는 것입니다.
만약에 5개의 버튼이 있다면 드롭다운버튼에 넣을 필요 없어요
하지만 버튼이 6개가 되면, 그건 또 달라지겠죠.
Where am I?
너무 일관된 디자인 시스템과 브랜드 스타일을가지고 있으면 모든 페이지가 같게 느껴집니다.
곧 당신은 이 페이지를 본 적이 있는지, 또는 비슷한 상태를 가진 다른 페이지인지 알지 못하는
페이지 숲을 걷고 있는 것처럼 느낍니다.
논증:
1. 일관된 비주얼 스타일!
2. 디자인 시스템이 디자인을 이끈다!
3. 효율적인 화면분배야
금요일 오후, 당신은 A.D.D.를 가지고 있고
소셜 미디어, 동료, 개인 메시지와 함께 일을 하려고 노력하고 있습니다.
마지막으로 마음에 남은 것은 방금 클릭한 링크와 흐름이나 프로세스의 위치입니다.
이것을 참고해서 만들어주세요.
페이지마다 헤더나 페이지 이름을 달아주세요.
1레벨 이상의 깊이에 있는 경우 네비게이션(breadcrumbs)을 사용하십시오
흐름에 여러 단계가 있는 경우 해당 단계를 표시합니다.
Long lines and tiny text
화면을 최대한 활용하려는 또다른 예입니다.
논증:
1. 유저들은 스크롤을 싫어해 !
2. 효율적인 화면 분배야
가장 중요한 웹타이포그래피는 한 줄에 9단어를 넘지 않는것입니다.
한줄을 읽고나면 그 다음줄을 읽어야 하는데 이게 너무 길어지면 읽기 힘들어지죠.
"하지만 낭비되는 여백이 너무 생기는걸요"
브런치 글을 읽으면서 양 옆 여백이 얼마나 되는지 눈치 채셨나요?
사실 당신이 말하는 낭비된 여백은 투자입니다.
여백에 투자한다는 것은 그만큼 텍스트에 더 집중한다는 뜻입니다.
A Typographic Approach to Email by 1910
Popup in popup
텍스트 쓸 공간을 확보하려고 공지내용이 있는 버튼을 달았습니다.
그 공지팝업에는 다른 팝업으로 이어지는 버튼이 있습니다.
논증:
더 많은 것을 보여줄거라구욧!
그것은..
이것의 문제는 사용자가 자신이 어디에 있는지에 대해 잃어 버렸다는 것입니다.
만약 그가 두 번째 팝업을 끝내면, 그는 원래 팝업으로 가나요, 아니면 원래 스크린으로 돌아가나요?
첫 번째 팝업은 화면이어야 하고 두 번째 팝업은 인라인 오류 메시지여야 합니다.
Card in card
카드는 현재 유행하고 있는데, 그렇다면 하나의 카드보다 더 좋은 것이 있을까요?
다른 카드에 있는 카드는 어때요?
논증:
시각적 계층 구조를 만들기 위해 카드를 쌓는거죠!
UXer들은 자주 시각적 계층구조에 대해 말합니다. 사용자에게 중요한 요소를 화면에 표시하는 방법입니다.
전통적인 카드 데크에서 카드는 모두 같은사이즈입니다.
카드는 특정 주 또는 관계를 전달하기 위해 다른 카드의 위 또는 아래에 배치됩니다.
카드를 다른 카드에 중첩하면 이 카드가 뭔지 뭘할수있을지에 대해 알수가 없습니다.
사용자는 무의식적으로 인터페이스의 다른 요소에 눈이 가고, 모든 논리는 창 밖으로 던져집니다.
하지만 해결책은 쉽습니다! 카드를 겹치지않고, 서로 가까이 놓거나 같은 선상에 놓습니다 (카지노 테이블에 카드를 놓는 것과 같습니다).
Form fields, what do i do with them.
폼 입력 목록을 길게 만들어야 할까? 여러 단계로 나눌까?
또는 폼 입력 열 3개를 모두 단일 화면에 맞도록 할까?
???: 사용자는 스크롤을 싫어한다구!!!
중요한 문제는 페이지의 양이나 폼의 갯수가 아닙니다.
얼만큼의 폼이 스크린에 한번에 적당히 보여지느냐입니다.
버튼과 마찬가지로 컨텐츠를 잘 보이게, 쉽게사용하도록 가능한 최소 양으로 줄여야 합니다.
- 항상 1단 칼럼을 사용하세요!
가장 좋은 방법은 입력필드를 1칼럼에 두는 것입니다,
사용자들은 자연스럽게 내려가며 읽고 각 세션을 체크할 수 있을겁니다.
-이야기를 하고있나요?
때로는 입력 필드가 사용자가 착수하려는 여정(보딩 중)이나 중요한 결과(세금 미끄러짐)에 관한 것이기도 합니다.
그래서 여러 페이지로 필드를 분리하는 가장 좋습니다.
이렇게 하면 약간의 호흡 공간을 만들어 사용자에게 무엇을 하고 있는지,
왜 그것이 중요한지 설명해줄 수 있는 시각적 공간이 마련됩니다.
-드롭다운
만약에 선택해야 할것이 1-5개정도라면 드롭다운에 넣지 마세요!
물론 보기에는 좋겠지만, 유저를 위한 것은 아닙니다.
라디오 버튼을 쓰는것이 더 편할거에요.
Design better forms by UX Collective
Single page or multi-page forms? by Stackoverflow
What does this button do?
페이지의 특정 요소는 현재 어떤 페이지에 있는지를 지정하는 데 도움이 되며,
다른 요소는 가능한한 일관되고 명확해야 합니다.
???: 하지만 애플/구글은 그렇게 해!
가장 일반적인 예는 수락 및 취소 버튼과 왼쪽 또는 오른쪽 단추입니다.
엄지 손가락의 규칙은, 다음 플로우로 갈때 버튼이 초록색이고 오른쪽에 있다는 것은 "수락, 진행, 명령"과 같은 의미를 지닌다는 것입니다.
Writing microcopy for destructive actions by UX Collective
Recap, Quickrules
버튼은 9개 이상 금지
드롭다운은 최후의 수단으로 쓰십시오.
모든 페이지에 헤더를 부여합니다
한 페이지가 1개 이상의 깊이를 가지고 있을 때, 네비게이션(빵가루)를 표시해주세요
여러 단계에 있을 때 단계를 표시합니다
한 줄에 9단어를 넘지 않습니다
팝업에 팝업을 사용하지 마십시오
카드에 카드를 넣지 마십시오
양식 필드를 단일 열에 나열합니다.
버튼에 이름을 달아주세요.
원하시는 번역글이 있으시면 메일이나 댓글로 남겨주세요 :)
오역도 언제든지 알려주세요.
greative90@gmail.com
