지금 이 시간에도 많은 디자이너가 디자인 작업물을 만들어내고 있고, 디자인 업계의 트렌드는 나날이 발전해나가고 있습니다. 하지만 종종 시각적으로는 아름다워 보이지만 실제로 사용하기에는 불편하거나 번거로운 디자인이 보입니다.

하지만 UI·UX 디자인 기술은 사용자가 좋아하는 제품이나 서비스를 만들 수 있는 가장 좋은 방법입니다. 시각적으로 만족스러운 인터페이스와 뛰어난 사용자 경험은 사용자에게 편리함을 넘어 즐거움과 감동을 제공할 수도 있습니다.

이번에는 전문 UI·UX 디자인 교육 업체 UXPEAK이 이야기하는 웹·앱을 포함한 디지털 제품 디자인 개선을 위한 UI·UX 팁과 요령에 다룹니다.

1. 카드 디자인은 사용자 친화적으로 만드세요

카드 디자인에 있어 사용자가 필요한 정보를 빠르게 찾게 하려면 시각적인 차별화 작업이 필수적입니다. 대표적으로 아이콘을 사용하거나, 텍스트에 볼드처리를 하거나, 폰트의 크기를 서로 다르게 하거나, 기타 고유한 시각적인 단서를 제공하는 방법 등으로 요소를 차별화해 사용자가 필요한 정보를 바로 찾을 수 있도록 하세요.

이러한 UI·UX 디자인 전략을 사용해 만들어진 카드 콘텐츠는 사용자가 필요한 정보를 즉시 식별할 수 있어 귀중한 시간과 노력을 절약할 수 있습니다.

2. 버튼 배치 순서를 유의해주세요

시각 심리학적으로 일반적인 사용자는 왼쪽부터 시작해 오른쪽으로 읽어나갑니다. 잘못된 위 사진의 잘못된 디자인 예시엔 사용자의 눈길이 먼저 ‘삭제’ 버튼에 끌린 다음 ‘취소’ 버튼으로 이동하고 다시 삭제 버튼으로 돌아갑니다.

반대로 만들어진 디자인 예시에서는 사용자의 시선이 ‘취소’에서 ‘삭제’로 순차적으로 이동합니다. 사용자의 불필요한 시선 이동과 혼란을 사전에 방지하고 있는 겁니다. 예시에서는 취소와 삭제를 들었지만, 보통 우측 버튼은 ‘진행’을 의미하며, 좌측 버튼은 ‘취소’나 이전으로 ‘돌아가기’를 의미하는 버튼이 들어갑니다.

3. 양식은 심플한 디자인을 유지하세요

수많은 시선 추적 연구 사례에서는 기입란(Input Filed)을 레이블(Labels)과 수평으로 배치하면 수직으로 배치하는 것보다 더 많은 시선 이동이 발생하며, 사용자에게 더 높은 인지 능력을 요구하거나, 혼란을 야기할 수 있다는 결과를 내놓았습니다.

따라서 일반적으로 기입란은 레이블 아래에 수직으로 배치하는 것이 훨씬 더 사용자 친화적이라 볼 수 있는 것이죠. 만약 이 조언을 무시하고 반드시 입력창 왼쪽에 레이블을 배치해야 할 상황에는 레이블과 기입란을 우측에 정렬하는 걸 추천합니다.

4. 일관된 아이콘을 사용하세요

디자인에 아이콘을 사용하는 것은 앞서 말한 것처럼 특정 요소를 강조해 사용자가 더 쉽게 정보를 파악할 수 있게 해줍니다. 그렇지만 아이콘을 사용할 때에는 일관성을 유지하는 것도 중요합니다. 다양한 스타일의 아이콘을 혼합해 사용하지 마세요.

예시로 들자면 심플한 스타일의 아이콘을 사용할 때 복잡한 스타일의 아이콘과 같이 사용하지 마세요. 윤곽선으로만 이루어진 아이콘을 사용할 때 내부가 채워진 아이콘과 혼합해 사용하는 것도 금물입니다.

이 일관성을 유지하면 사용성이 높아지는 것은 물론, 디자인이 더욱 전문적이고 심미적으로도 아름답게 보입니다. 

5. 텍스트 스타일을 사용해보세요

제목과 단락의 모양새는 가독성과 긴밀하게 연결돼 있습니다. 그렇기 때문에 가독성을 향상시키기 위해 여러가지 텍스트 스타일을 사용하는 것을 추천합니다. 여백, 크기, 줄 높이, 두께, 문자 간격 등을 조정해 매력적인 디자인을 만들어보세요.

가장 중요한 것은 제목과 본문 텍스트 사이의 뚜렷한 대비를 설정하는 겁니다. 예시처럼 본문 텍스트보다 제목을 더 굵고 크게 만들어 가독성을 향상시키는 방법이 대표적입니다.

하지만 자칫 시각적 감각을 중시해 필요 이상의 너무 많은 스타일을 넣으면 글이 복잡하게 보이게 될 우려가 있습니다. 시각적 감각보다는 가독성을, 더 나아가 사용성을 우선시하세요.

👉 원문 링크: Top 5 UX/UI tips & tricks to improve your designs

글 : 김동욱 기자 

출처 : 디지털인사이트 ditoday.com

원문 : ditoday.com/%EB%B3%B4%EA%B8%B0%EC%97%94-%EC%A2%8B%EC%9D%80%EB%8D%B0-%EC%93%B0%EA%B8%B0%EC%97%94-%EB%B6%88%ED%8E%B8%ED%95%B4-%EB%8B%B9%EC%8B%A0%EC%9D%98-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84/