UI & UX Micro-Tips: The Ultimate Collection - 4

이전 글

2021.06.17 - [디자인] - UI & UX Micro-Tips: The Ultimate Collection - 3

UI & UX Micro-Tips: The Ultimate Collection - 3

 

 

---

 

31. For Download Indicators, try to be as informative as possible.

For Download Indicators, try to be as informative as possible.

 

 // Download Indicators 경우 다운로드하는 정보 제공 하기

 // 다운로드 진행상황을 알 수 있는 백분율 수치, 다운로드를 취소할 수 있는 아이콘 등

 

---

32. If you can keep your titles short, and concise… ‘Just do it’.

If you can keep your titles short, and concise… ‘Just do it’.

 // 제목을 짧고 간결하게 줄일 수 있음 줄여보자

 // 짧고 간결한 제목은 정보에 관해 빠르게 습득가능 하다

 

---

33. Choose the right Typeface to give the correct ‘voice’ to your design.

Choose the right Typeface to give the correct ‘voice’ to your design.

 // 올바른 서체를 이용하여 디자인에 올바른 음성을 입혀라?

 // 각서체에는 고유한 음성이 있다. (크거나, 친절하거나, 부드럽거나, 격식을 차리거나, 재미있거나..)

 // 우리나라에선 진지할 때 궁서체를 사용하지

우리 같이 진지해볼까?

 

---

34. Choose a suitable Line Length for your body text, and improve Readability.

Choose a suitable Line Length for your body text, and improve Readability

 // 본문 콘텐츠에 적합한 줄 길이를 지정할 것 

 // 45 ~ 75자는 단일 열 페이지에 적합한 줄 길이로 널리 간주

 // 66자 줄 (문자와 공백 모두 포함)이 sweet-spot

 // sweet-spot https://stonebc.com/archives/5907

콘텐츠에서 'Sweet Spot'의 중요성 - 스톤브랜드커뮤니케이션즈

 

---

35. It’s OK to use purely decorative elements from time to time, but keep things accessible.

It’s OK to use purely decorative elements from time to time, but keep things accessible.

 // 장식용 텍스트를 사용하는 것도 좋다

 // 순전히 시각적이고 사용자 경험에 중요하지 않은 장식 요소로 사용할 때는

개발 단계에서 aria-hidden =“true”와 같은 ARIA 역할을 호출

 // aria-hidden

콘텐츠 숨기기 및 업데이트  |  Web  |  Google Developers

 

---

36. Make elements in your UIs distinguishable from one another.

Make elements in your UIs distinguishable from one another.

 // 각각의  UI 요소들은 서로 구별할 수 있도록 해야 한다.

 // 버튼. 알림. UI에 있는 두 개의 별개이지만 필수적인 요소이다.

가능하다면 사이트 나 앱을 스캔할 때 사용자가 빠르고 쉽게 구분할 수 있도록 항상 노력할 것

 

---

37. Just subtle amounts of shadow are all you need.

Just subtle amounts of shadow are all you need.

 // 그림자는 너무 과하게 주지 말 것

 // 현실에 그림자도 대부분의 경우 눈에 띄지 않으므로 UI에서도 이런 동작을 모방하여

무겁고 어두운 그림자를 배치하고, 불투명도를 낮추어 배치하는 것이 좋다

 

---

38. Using All Caps? Choose a font suitable to achieve optical clarity.

Using All Caps? Choose a font suitable to achieve optical clarity.

 // 대문자 사용 시 시각적 선명도에 따른 글꼴을 사용할 것

 // 사용자에게 시각적 선명도를 제공할 수 있도록 x 높이가 크고 글꼴 두께가 더 두꺼운 적절한 서체를 선택할 것

 

---

39. Make Breadcrumbs stand out and easy to interpret for the user.

Make Breadcrumbs stand out and easy to interpret for the user.

 // 사용자가 Breadcrumbs를 눈에 띄고 해석하기 쉽게 만들기

 // Breadcrumbs - 사이트 이동경로

브레드크럼 Breadcrumbs UX 원칙

 // 최소한의 조정만으로 사용자가 사이트 내 위치와 이동해야 할 다른 위치를 신속하게 파악할 수 있도록 할 것 

 // 검색을 사용하여 사이트의 깊숙한 곳으로 이동한 경우 특히 유용

 

---

40. Using highly saturated colours? Try and tone things down with a Tint or Shade.

Using highly saturated colours? Try and tone things down with a Tint or Shade.

 // 채도가 높은 색은 특히 텍스트가 많은 콘텐츠와 함께 사용할 경우 사용자의 눈을 피로하게 할 수 있다.

 // 채도를 낮추고 명도를 조절해서 사용하는 것이 좋다.

 // 물론 색상을 선택할 때 가독성과 접근성이 최우선 순위 여야 한다는 점 - 색상대비 검사기

색상 대비 및 색상 인식 접근성 검사기

 

 

 

 

 

 

참조링크

https://uxdesign.cc/ui-ux-micro-tips-the-ultimate-collection-a07d56c9e98

UI & UX Micro-Tips: The Ultimate Collection

 

 

 

5부로 이어집니다... coming soon 😊