효과적인 UI 디자인을 위한 58가지 규칙
Design
원문: https://uxdesign.cc/58-rules-for-stunning-and-effective-user-interface-design-ea4b93f931f6
https://uxdesign.cc/58-rules-for-stunning-and-effective-user-interface-design-ea4b93f931f6효과적인 UI 디자인을 위한 8가지 필수 요소, 'ELEGANCE'
E: 공감(Empathy)
- 모두를 위한 아름다운 디자인이란 것은 존재할 수 없다. 매력적인 디자인은 목표 사용자를 진정으로 이해하고, 그들을 위한 디자인을 설계했을 때 나올 수 있는 것이다.
L: 레이아웃(Layout)
- 레이아웃은 인터페이스의 캔버스와도 같은 것이다. 레이아웃은 사용자가 힘을 들이지 않고도 디자인을 손쉽게 따라갈 수 있게 만들어야 하며, 더 나아가 디자인의 요소들을 자연스럽게 연결시켜 직관적인 사용 흐름을 유도할 수 있어야 한다.
E: 본질(Essentialism)
- 의도한 목적을 충분히 나타낼 수 있는 단순한 디자인을 만들어야 한다. 난잡한 구성요소들은 사용자의 경험을 방해할 뿐만 아니라, 디자인에 담긴 메세지마저 흐릿하게 만든다.
G: 유도(Guidance)
- 디자인은 단순히 미적으로 예쁜 것이 아니라, 사용자가 특정 행동이나 생각을 할 수 있도록 이끌어야 한다. 이를 위해서는 설계된 경로가 사용자에게 분명히 보여야 하며, 어떤 행동을 취해야할지도 명확해야 한다.
A: 아름다움(Aesthetics)
- 아름다움이란 단순히 외적인 것이 아니다. 디자인의 전체적인 느낌을 압축적으로 전달해야하며, 그 느낌은 사용자의 감정을 울릴 수 있어야 한다.
N: 참신함(Novelty)
- 혁신적이고 참신한 디자인은 이목을 끌 뿐만 아니라, 사용자에게 이질적이지 않은 방식으로 매력적이면서도 편안한 경험을 할 수 있도록 해야한다.
C: 일관성(Consistency)
- 디자인적 일관성은 사용자에게 친밀감을 제공해준다. 인터페이스 내의 다양한 요소들에 대해 편안함을 느끼게 해주어, 신뢰와 편리함이라는 가치를 만들어 낸다.
E: 참여(Engagement)
- 참여를 유도하는 매력적인 디자인은 사용자가 마치 소통하고 있다는 경험을 하게 해준다. 매력적인 디자인은 사용자를 지속적으로 집중하게 하고, 사용자의 행동에 맞게 반응하며, 다시금 찾아오도록 유도한다.
ELEGANCE를 위한 58가지 규칙 - 공감(Empathy)
문화적, 사회적인 요소는 디자인에 대한 인식과 선호도를 규정하는 데에 중요한 역할을 수행하기 때문에 사용자를 진정으로 이해하고 공감하는 것이 중요하다.
1. 문화적, 사회적 영향을 고려한다.
- 사용자의 문화적, 사회적 배경을 디자인에 고려해야 사용자의 마음을 울릴 수 있는 디자인을 만들 수 있다.
2. 사용자가 속한 산업적 특성과 사용 맥락을 이해한다.
- 만들고자 하는 디자인이 특정 산업의 관행과 실질적인 맥락에 부합하도록 인터페이스를 구성해야 한다.
3. 사용자의 인구통계학적 특성을 반영한다.
- 사용자의 인구통계학적 특성은 매우 다양할 수 있기 때문에, 나이, 성별, 직업 등의 특성들을 잘 반영하여 효과적이고 맞춤형의 디자인을 만들 수 있어야 한다.
4. 사용자의 기술적 수준을 맞춰 설계한다.
- 사용자의 기술적 수준에 맞춰 인터페이스의 구성해야 한다.
ELEGANCE를 위한 58가지 규칙 - 레이아웃(Layout)
잘 기획된 레이아웃은 화면을 깔끔하게 구성해줄 뿐만 아니라, 시각적인 조화를 이루어 사용자로 하여금 시각적 만족감을 제공하여 계속해서 사용할 수 있도록 유도할 수 있다.
5. 여백의 미를 살린다.
- 여백(negative space)은 정돈된 인터페이스를 구성할 수 있도록 도와주어, 사용자가 디자인에서 진짜로 중요한 요소에 집중할 수 있게 해줄 뿐만 아니라 가독성을 높여준다.
6. 황금비(golden ratio)와 3등분의 법칙(rule of thirds)을 사용한다.
- 디자인에 자연스러운 균형감과 미적인 비율을 적용하는 것은 중요하다.
7. 크기, 색상, 간격을 기반으로 분명한 디자인 위계를 만든다.
- 시각적인 위계를 만들어 정보의 중요도에 맞게 사용자가 디자인을 읽어낼 수 있도록 유도해야 한다.
8. 격자(grid) 시스템을 활용한다.
- 격자식 구성은 디자인을 구조화하여 일관성을 부여하며, 응집성을 높여 디자인 요소간 조화될 수 있도록 도와준다.
9. 확실한 초점(focal point)을 만든다.
- 확실한 초점을 제공하면 사용자가 어떤 컨텐츠에 집중하여 상호작용 해야하는지 직관적으로 유도할 수 있다.
10. 집중도를 높이기 위해 디자인적 리듬을 구성한다.
- 반복되는 패턴이나 구조화된 레이아웃을 사용하여 시각적 리듬감을 조성하면 사용자의 이목을 자연스럽게 이끌 수 있는 인터페이스를 구성할 수 있다.
ELEGANCE를 위한 58가지 규칙 - 본질(Essentialism)
본질에 집중하여 단순한 디자인을 만든다는 것은 필수적이지 않은 구성요소를 제거하여 사용자에게 정말로 중요한 것들만 디자인에 남기는 것을 의미한다.
11. 신중한 제거(thoughtful reduction)를 통해 단순한 디자인을 만든다.
- 본질적인 컨텐츠와 기능에 집중하여, 디자인 내 기능들을 간소화시켜 사용자 친화적인 인터페이스를 구성해야 한다.
12. 구성요소가 많더라도 조직과 체계를 통해 적어보이게 할 수 있다.
- 직관적인 분류와 그룹화를 통해 정보들을 간단하게 보이게 만들 수 있다. 예를 들어, 드롭다운 메뉴, 탭형 컨텐츠와 같은 방법으로 구성하면 정보가 많더라도 난잡하지 않게 사용할 수 있는 인터페이스를 만들 수 있다.
13. 사용자가 생각을 하게 만들면 안 된다.
- 사용 흐름과 작업의 순서가 논리적이고 예상가능한 방식으로 전달되어야 한다. 사용자들이 일반적으로 기대하는 방식으로 디자인을 구성하여 인지적 부하(cognitive load)를 최소화할 수 있어야 한다.
14. 좋은 디자인은 최대한 덜어낸 디자인이다.
- 미니멀리즘의 방식을 차용하여 기능에 정말로 필요한 요소들로만 구성해야 한다. 과도한 색상, 폰트, 구성요소는 인터페이스에 집중할 수 없도록 만든다.
15. 크고 복잡한 작업은 작은 단계들로 쪼갠다.
- 한 화면에서 많은 항목을 기입하거나 너무 많은 단계를 거치게 되면 복잡한 사용 경험을 만들게 된다. 해당 작업들을 작은 부분들로 나누고 ,프로그레스 바(progress bar)나 브래드크럼(breadcrumb) 인터페이스를 제공하여 시각적으로 사용자가 어느 단계에 위치해 있는지 알려줘야 한다.
16. 디자인 경험에 사용되는 시간을 줄이는 것도 단순함을 늘리는 방법이다.
- 로딩 시간과 경험의 단계를 최적화하여 상호작용의 시간을 줄이는 것 또한 중요하다. 기본값(default), 자동 완성 기능 등을 활용하여 사용자가 디자인 경험에서 소모하는 인지적 에너지를 최소화시키는 것이 좋다.
ELEGANCE를 위한 58가지 규칙 - 유도(Guidance)
유도라는 것은 단순히 지시하는 행위가 아니다. 사용자가 편안하고 매력적으로 느낄 수 있는 전체적인 경험의 여정을 구축하는 것이 '유도'의 본 목적이다.
17. 매력적인 온보딩 경험을 구축한다.
- 온보딩은 사용자와의 상호작용을 제일 처음 수행하는 중요한 단계다. 효과적인 온보딩 경험은 사용자가 디자인 인터페이스를 이해할 수 있는 기반을 마련하여, 제품에 대해 효율적으로 학습할 수 있도록 이끌 수 있다.
18. 직관적인 사용 흐름을 만든다.
- 논리적이고 단계적인 사용 흐름은 사용자에게 자연스러운 느낌을 줄 수 있으며, 전체적인 사용 경험에 있어서 큰 노력을 하지 않을 수 있게 도와준다.
19. 맥락상 사용 방법을 사용자에게 제공한다.
- 툴팁(tool tip), 팝업(pop up), 작업 영역 내 지시사항(inline instruction)과 같은 방법을 통해 사용자가 디자인을 더 잘 경험하도록 도와주어 사용 경험에 어려움이 없도록 해야한다.
20. 단계적으로 정보를 전달(progressive disclosure)한다.
- 필수적인 정보들을 단계적으로 나눠 전략적으로 정보를 전달할 수 있게 설계함으로써 사용자가 각 작업과 사용 흐름에 집중할 수 있도록 해야한다.
21. 사용자의 행동을 유도하는 구성 요소를 만든다.
- 버튼, 아이콘, CTA(call-to-action)과 같은 디자인 요소를 만들어 사용자가 의도한 사용 흐름을 따라갈 수 있도록 디자인을 설계해야 한다.
22. 사용자의 행동에 대해 디자인적인 반응(feedback)을 제공한다.
- 사용자가 디자인 내에서 특정 행동을 하면 즉각적인 시각적, 청각적 반응을 제공하여 상호작용 상 혼란을 최소화한다.
ELEGANCE를 위한 58가지 규칙 - 아름다움(Aesthetics)
능숙하게 적용된 디자인 체계는 디자인이 눈에 띌 수 있게 해준다. 적절한 타이포그래피는 가독성과 미적 아름다움을 증진시켜 사용자를 매료시킬 수 있으며, 적절한 색상 선택은 사용자가 제품은 인지하고 상호작용하는 경험을 차별화할 수 있다. 더 나아가, 미적으로 잘 구성된 인터페이스는 사용자의 참여를 촉진시키며 감정적인 유대감까지도 만들어 준다.
23. 타이포그래피(typography)의 위계를 만든다.
- 폰트의 크기, 두께, 스타일의 위계를 만들면, 사용자가 중요한 정보를 직관적으로 인지할 수 있도록 도와줄 수 있다.
24. 가독성을 우선시해야한다.
- 다양한 기기와 화면에서 쉽게 읽힐 수 있는 폰트를 선정해야 한다. 특히, 본문 텍스트의 폰트가 가장 중요하다.
25. 브랜드의 분위기(mood)를 잘 반영해야 한다.
- 브랜드 성격에 맞는 폰트와 스타일을 선정하여 사용자에게 일관된 브랜드 경험을 제공해야 한다.
26. 폰트를 현명하게 짝지어야 한다.
- 여러가지 폰트를 조합해야 하는 경우에는, 서로 효과적으로 보완해줄 수 있는 폰트들을 함께 사용해야한다.
27. 폰트와 스타일의 변형 적용(variation)는 제한적이어야 한다.
- 너무 많은 변형은 인터페이스를 난잡하고 혼란스럽게 만든다. 몇 가지의 종류만 만들어 응집력있는 시각적 구성을 만들어야 한다.
28. 행간, 자간을 적절하게 조정한다.
- 행간과 자간은 가독성을 높여줄 수 있다. 여러가지 설정을 실험하여 최적의 폰트 설정을 만들어내는 것이 중요하다.
29. 타이포그래피에서 대조(contrast)는 중요할 역할을 한다.
- 배경과 텍스트간 충분한 대조는 가독성과 접근성을 높여준다.
30. 일관된 색상 팔레트(palette)를 사용한다.
- 브랜드의 성격과 맞는 색상 팔레트를 활용하여 시각적인 통일성을 유지할 수 있어야 한다.
31. 60-30-10 법칙을 활용해 색상간 균형감을 맞춰야 한다.
- 주요 색상(primary color)은 60%, 보조 색상(secondary color)은 30%, 강조 색상(accent color)은 10%를 사용하여 시각적인 균형감을 유지해야 한다.
32. 색상이 미치는 심리적, 문화적 영향을 이해해야 한다.
- 색상은 문화에 따라 다양한 감정과 의미를 지니고 있음을 인지하고, 목표 사용자에게 맞는 색상을 선택하여 적절한 경험을 제공할 수 있어야 한다.
33. 의미를 함축한 색상(semantic color)을 활용하여 상태를 나타낸다.
- 빨간색은 오류, 초록색은 성공을 의미하듯이, 맥락상 의미에 맞는 색상을 선택하여 사용자가 자연스럽게 디자인을 경험할 수 있도록 한다.
34. 특정 행동을 유도할 수 있는 색상을 활용한다.
- 특정 행동을 유도해야 하는 경우에는 색상을 전략적으로 활용하여 상호작용을 이끌어낼 수도 있다.
35. 과도하게 인터페이스를 꾸미기보다는 컨텐츠를 우선시해야 한다.
- 과하게 꾸며진 인터페이스는 사용자를 압도시킨다. 좋은 인터페이스는 장식들과 상관 없이 그 자체로 탁월한 효과를 낸다.
36. 디자인 내 시각적인 표현과 이미지들은 의도가 담겨야 한다.
- 이미지와 같은 시각적인 정보들은 디자인 내 컨텐츠와 연결되어 의미를 부각시키는 역할을 수행한다. 그렇기 때문에 브랜드의 성격과 메세지를 잘 반영할 수 있는 이미지를 신중하게 선정하여 사용해야 한다.
37. 직관적이고 간결한 텍스트의 활용은 큰 도움이 될 수 있다.
- 간결한 텍스트는 이미지와 같은 시각적인 정보를 더욱 효과적으로 전달하는 데에 도움이 된다. 만약, 컨텐츠가 길 수밖에 없다면, 글머리 기호(bullet point)를 활용하여 나눠 적는 것이 좋다.
38. 소소한 상호작용과 애니메이션은 사용자에게 기쁨을 줄 수 있다.
- 상호작용에 소소한 애니메이션을 덧붙이는 것은 컨텐츠에 방해되지 않는 선에서 사용자의 경험을 더욱 강화시켜줄 수 있다.
39. 동적인 스토리텔링이 필요하다면 동영상을 활용하는 것이 좋다.
- 복잡한 개념이나 많은 이야기를 전달해야할 경우에는 동영상을 활용하는 것이 효과적이다.
40. 고품질의 사진과 렌더링을 활용하는 것도 좋다.
- 이커머스와 같이 실제 제품을 판매해야 하는 기업의 인터페이스에서는 고품질의 사진이라 3D 렌더링 이미지를 제공하는 것이 좋다.
ELEGANCE를 위한 58가지 규칙 - 참신함(Novelty)
혁신적이고 차별화된 인터페이스는 잊을 수 없는 경험을 제공하여 사용자의 만족도를 극대화시킬 수 있다.
41. 독창적인 디자인을 만들기 위해 노력해야 한다.
- 독창적인 디자인은 치열한 경쟁 시장에서 제품을 두드러지게 만들 수 있는 핵심 요소다.
42. 최신 기술을 최대한 활용한다.
- 새롭게 떠오르는 기술들에 대한 소식을 계속 접하여, 이러한 기술들을 어떻게 디자인에 녹여낼지 지속적으로 고민하는 것이 필요하다.
43. 진보적이되, 수용가능해야 한다.
- 혁신이란 한계를 뛰어넘는 것이기도 하지만, 여전히 사용친화적이고 사용자들이 접근가능한 방식으로 구성되어야 한다.
44. 다른 산업군에서도 영감을 받아야 한다.
- 인터페이스 디자인이라고 해서 소프트웨어 디자인만 봐선 안 된다. 많은 분야의 예술, 건축, 자연을 보며 다양한 방식의 접근법을 알아가야 한다.
45. 트렌드에 민감해지되, 무작정 따라가선 안 된다.
- 디자인 트렌드를 계속해서 인지해야 하는 것은 맞지만, 트렌드는 유행하여 흔하게 사용된다는 것이니 신중하게 디자인에 적용시켜 차별화된 디자인을 만들어낼 수 있도록 심사숙고해야 한다.
46. 참신함이 사용자의 경험을 방해해선 안 된다.
- 참신함을 포함한 모든 디자인의 가치는 반드시 의도를 지니고 있어야 하며, 사용자의 경험을 증진시키는 방향으로 적용되어야 한다.
ELEGANCE를 위한 58가지 규칙 - 일관성(Consistency)
일관성은 사용자에게 디자인을 친숙하게 느끼게 해주어, 신뢰와 자신감을 심어줄 수 있다.
47. 종합적인 디자인 시스템을 구축한다.
- 디자인 시스템은 모든 디자인 요소에 대한 규칙과 체계를 제공하여 전반적인 인터페이스에 통일감을 만들어주는 데에 큰 역할을 수행한다.
48. 디자인 패턴(pattern)을 제한해야 한다.
- 디자인 패턴의 종류를 적당한 개수로 제한하여, 사용 경험이 예측 가능하고 친숙할 수 있도록 해야한다.
49. 디자인 구성 요소의 작동 방식이 예측 가능해야 한다.
- 인터페이스의 구성 요소는 반드시 적용에 있어서 일관적인 방식으로 작동하여 사용자가 혼란을 겪지 않도록 해야한다.
50. 표준화된 디자인 템플릿(template)을 활용한다.
- 자주 쓰이는 페이지나 구조는 템플릿화하여 사용자의 제품 사용 및 컨텐츠 이해를 도와야한다.
51. 기기간 일관성을 유지해야 한다.
- 다양한 기기를 사용하는 디자인의 경우 기기별로 사용자의 사용 경험을 증진시킬 수 있도록 접근성이 높은 방식으로 구성되어야 한다.
52. 컨텐츠 가이드라인을 표준화한다.
- 컨텐츠의 톤, 스타일, 유형에 대한 가이드라인을 만들면 인터페이스 전반에 걸쳐 통일성있는 내러티브(narrative)를 제공할 수 있다.
ELEGANCE를 위한 58가지 규칙 - 참여(Engagement)
사용자가 흥미를 느낄 수 있는 사용 경험은 사용자가 디자인에 흠뻑 빠지도록(immersive) 만든다.
53. 게임 요소(gamification)를 만든다.
- 포인트, 뱃지(badge), 순위판(leaderboard)과 같은 게임 요소들을 넣으면 사용자의 상호작용을 독려할 수 있다.
54. 개인화(personalization and customization)
- 사용자가 본인의 사용 경험을 맞춤 수정할 수 있도록 하면 인터페이스의 관련성(relevance)를 높여 참여를 유도할 수 있다.
55. 스토리텔링의 방식을 활용한다.
- 이야기를 풀어내는 방식으로 인터페이스를 구성하면 사용자가 더욱 집중할 수 있도록 할 수 있다.
56. 사용자의 진척사항을 시각적으로 표시해준다.
- 사용자가 현재 어느 단계에 있는지 표시해주는 것은 사용자에게 일종의 동기부여로 작용하여 작업을 끝내도록 도와줄 뿐만 아니라 성취감을 부여해준다.
57. 다양한 보상 메커니즘을 적용한다.
- 예상치 못한 방식으로 다양한 보상을 지급해주는 것은 사용자의 흥미를 유도하여 지속적으로 호기심을 갖고 참여하도록 할 수 있다.
58. 소셜 기능들을 적용한다.
- 공유시 보상을 지급하거나 친구들과의 경쟁을 독려하는 기능들은 일종의 소속감을 부여해줄 뿐만 아니라, 지속적인 제품 사용을 이끌어낼 수 있다.
