핵심 한 줄 정리
“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”
→ 이런 이유로, 눈에 띄는 나쁜 디자인을 정리하고 비교하는 방식으로 나열했다.
내용 정리
1. 정보 과부하
•
나쁜 예시 : LA 주차표시판
Author/Copyright holder: Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0
이유 → 좁은 영역에 복잡하고 많은 정보 전달
◦
이는 모바일 화면(좁은 영역)에서 디자인할 때도 많이 즉면하는 상황임
•
좋은 예시 : Nikki Sylianteng’s Parking Sign
Author/Copyright holder: Nikki Sylianteng. Copyright terms and licence: CC BY-NC-SA 4.0
이유 → 사용자 중심 디자인
•
사용자는 단순히 한 지점에 주차가능 여부를 알고 싶어함 (핵심 니즈)을 찾아, 전달함
•
정보 전달 방법 : 텍스트가 아닌, 시각 자료로 전달
HOW? →
◦
녹색은 OK, 빨간색은 No Parking
◦
색맹도 확인 가능하도록 주차금지, 줄무늬 그래픽 사용
✦ Lessons Learnt ✦
•
사용자가 필요로 하는 것이 무엇인지 파악하고, 이를 기반으로 디자인하기 → 정보 과부화를 줄일 수 있음
•
사용자에게 전달해야 할 정보가 많을 경우, 텍스트대신 시각 자료를 사용할 것 → 데이터 시각화
2. Mystery Meat Navigation
: 사용자가 커서를 가리킬 때까지 각 링크의 대상이 표시되지 않는 웹 탐색 사용자 인터페이스…
•
안좋은 이유1 | 탐색 요소의 검색 가능성을 감소시키기 때문에 좋지 않음
•
안좋은 이유2 | 사용자가 탐색 방법이나 클릭이 무엇을 하는지 추측해야 하기 때문에 인지 부하를 추가함
•
나쁜 예시 : LazorOffice.com
이유 → 사진만 나열되고, 어디로-어떻게 이동해야 하는지 알 수 없음
•
UX FLOW → 클릭해 봐야지만, 정보를 알 수 있는 것은 좋지 않음!
BUT → MMN 문제는 쉽게 해결이 가능함 (→ 사용성을 개선할 수 있음)
•
HOW? →
◦
레이블을 명확하게 지정하기
◦
hover시, “프로젝트 보기" context 추가하기
•
좋은 예시 : Course Cards on Interaction Design Foundation’s website
이유 → 상태별, 정확한 정보 제공
•
각 카드 하단에 "코스 보기"가 있을 뿐만 아니라 발생할 작업을 표시할 뿐만 아니라 "코스로 이동"이라는 텍스트가 있는 호버 상태도 있음
✦ Lessons Learnt ✦
•
이동하는 링크에 레이블을 지정하여 명확하게 알려줄 것!
→ 사용자가 이건 뭐지?라고 생각하지 않도록!
3. Adding Friction to User Actions | 사용자 행동에 마찰이 생기는 것
•
나쁜 예시 : iFly50.com
Author/Copyright holder: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines).
원형 버튼을 몇 초 동안 클릭해야 → 더많은 사진을 볼 수 있음
◦
이유 → 몇 초간의 마찰/압력이 필요한 UX는 사용성을 떨어트릴 수 있음
◦
권장하고 싶은 것 → 새로운 UX 탐구도 좋지만,
이미 흔하게 적용되고 있고, 테스트된 규칙(예: 간단한 클릭 또는 스와이프)이 완벽한 작동 경험을 제공할 수 있다는 것을 기억해~_~
BUT → 근데, 부가적인 마찰/압력을 잘 활용하면 오히려 좋은 사용성의 디자인을 만들 수도 있음
•
좋은 예시 : Elastic Scrolling on iOS
Author/Copyright holder: Interaction Design Foundation ApS.
이유 → 특정 상황에서 (의도적으로) 스크롤이 어려워지는 ‘탄성 스크롤’
•
스크롤이 더이상 되지 않는다는 정보를 전달하는 ‘직관적인 경험' 제공 (ㅇ0ㅇ…;;)
✦ Lessons Learnt ✦
•
가능한 사용자에게 마찰의 UX를 추가하지 말고, 구현할 때는 신중하게 시도할 것. (만들면 나도 애플 갈 수 있는 건가? ㅇ0ㅇ?)
4. “Clever” Design that Ignores Usability | 사용성을 무시하는 ‘영리한'디자인
•
Clever : 작은 그래픽으로 완성한 경의로운 디자인이라 덧붙임
→ 그러나 보기 좋더라도 접근성, 발견가능성 또는 사용성 문제가 발생한다면?, 좋은 디자인이 아님
•
나쁜 예시 : Bolden.nl
Author/Copyright holder: Bolden
Author/Copyright holder: Bolden.
: 1→2(순서대로 표현됨) : 마우스를 모서리로 이동해야 만, 사진 속 타이틀을 제대로 읽을 수 있음
◦
이유 1 → 사용자에겐 좋은 디자인이라 말할 수 없음
◦
이유 2 → 마우스 이동안내도 없어서, 이해하고 정보를 파악하기도 어려움
◦
이유 3 → 2번 상태가 되어도, 여전히 겹쳐져있음(→ 대비가 좋지 않아서, 보기 어려움)
•
좋은 예시 : CultivatedWit.com
Author/Copyright holder: Cultivated Wit.
: 1→2 (순서대로) : 홈페이지에 마우스를 올리면, 올빼미 기름이 윙크함
좋은 이유 1 → 중요한 정보가 아닌, 사용성과 관련없는 부분에 엣지를 더한 사례이므로 괜찮다 말할 수 있음
좋은 이유 2 → 하단 스크롤 유도하는 화살표로, 아래에 정보가 있음을 안내함
아래로 스크롤시, 노출 화면
✦ Lessons Learnt ✦
•
디자인 엣지를 넣고 싶다면, 가능한 오류가 없어야 하고 → 실제 사용자대상으로 테스트를 진행해야 함!
왜? → 사용성을 저해할 수 있으므로-!
5. Superfluous animations | 불필요한 애니메이션
: 애니메이션은 IxD의 중요한 요소이지만, 항상 목적에 부합해야 함
•
나쁜 예시 : PayPal Receipt Concept on Dribbble
: 필요한 정보인지 까지 3.5sec 긴 애니메이션
•
좋은 예시 : Stripe Checkout’s Animation
Author/Copyright holder: Stripe, Inc.
좋은 이유 1 → 진행 상황보다, 빠른 진행처럼 느끼게 함 (SMS보내는 중이지만~ “보냄"이라는 메시지로 그렇게 인지되게 함)
결과 → 사용자는 기다림의 부정적인 경험을 최소화 하고, SMS가 보내지고 있다는 것을 확신하도록 함
✦ Lessons Learnt ✦
•
목적기반의 애니메이션을 만들 것 : UX를 해치지 않는 선에서
The Take Away
1.
사용자의 니즈를 이해하고, 정보를 제공할 것
2.
전달해야 할 정보가 많다면, 텍스트보단 시각화를 활용할 것
3.
링크에는 ‘레이블’을 지정할 것 → 사용자가 인지하고 행동할 수 있도록
4.
인터랙션의 ‘마찰'을 최소화할 것
5.
디자인의 ‘테스트'는 필수
6.
애니메이션은 ‘목적에 맞게’ 활용할 것
나의 생각/관점
저자는 나쁜 디자인을 ‘사용자를 생각하지 않은 디자인’이라고 칭한 것 같다.
스스로 어떻게 디자인했는지 되짚어보았다.
<사용자가 이 기능 언제/어떻게 사용하지?>를 상상하며 만들다보면,
‘이전에는 이런 게 불편했을 테니까…이렇게 개선해 볼까?’
‘그럼 어떤 레퍼런스를 참고해보면 좋을까? 무얼 적용하거나 뺄까?’ 등등
솔루션의 방향성을 찾아가게 됐던 것 같다.
그래서인지, 결과를 보면 작은 수치이더라도 조금은 좋아졌다.
좋은 디자인을 위해서는…
눈에 보이는 디자인 이외에도, 보이지 않는 상황(목적)까지 고민하며 디자인하다 보면,
언젠간 사용자에게 좋은 경험으로 닿을 수 있지 않을까? 싶다-!
좋은 디자인이란, 사용자의 상황을 고려한 디자인 일지도 몰라-!
용어
•
사용자가 커서를 가리킬 때까지 각 링크의 대상이 표시되지 않는 웹 탐색 사용자 인터페이스의 한 형태.
이러한 인터페이스에는 미적 외관, 여백, 기본적인 실용성과 기능에 대한 관련 정보의 은폐를 강조하는 사용자 중심의 디자인이 없음
(출처 : 위키백과)
예시 이미지
단어
단어 | 뜻 | 예문 |
pitfalls | 함정 | |
notoriously | 악명높게 | |
Friction | 마찰 | |
novelty | 참신한 | |
detrimental | 해로운 | |
Clever | 영리한, 솜씨 좋은 | |
Superfluous | 불필요한 | The animation is pretty, but superfluous. |
whopping | 엄청나게 |