“이것만은 제발 참아주세요” 나쁜 UI 디자인에서 흔히 보이는 실수 10가지
웹 마스터와 웹 디자이너가 조심해야 할 UI 디자인 실수
우리는 살면서 수많은 사용자 인터페이스(UI) 디자인을 마주합니다. PC 환경의 웹페이지나 게임은 물론, 심지어 매일 같이 접하는 스마트폰의 모바일 앱까지 모든 서비스에 UI 디자인이 적용돼 있습니다. 하지만 언제나 그렇듯 이러한 제품 서비스의 UI 디자인이 모두 완벽한 것은 아닙니다.
오히려 우리는 각종 비즈니스적인 복잡한 이해 관계나 웹 마스터, 디자이너의 실수로 인해 적지 않은 수의 나쁜 UI를 많이 접하게 됩니다. 그렇다면 이렇게 나쁜 UI 디자인에서 보이는 대표적인 실수는 과연 무엇일까요?
이번 글에서는 사이트맵을 통해 체계적인 웹 디자인을 돕는 UI·UX 전문 기업 Flowmapp이 이야기하는 나쁜 디자인에 대해 다뤄봅니다.
1. 색상이 있는 배경에 회색 글자는 쓰지 마세요
우리 모두가 직사광선 아래의 개방된 야외에서 휴대폰으로 앱을 사용해보거나 웹사이트에 방문한 경험이 있을 겁니다. 그리고 보통 사람은 글자와 배경의 대비를 통해 단어와 숫자를 인식합니다.
하지만 몇몇 웹 디자이너는 이러한 글자 인식 원리를 잊어버립니다. 그리곤 흰색이나 검은색 글자 대신 회색의 글자를 사용하죠. 결국 모바일 사용자는 상황에 대처하기 위해 손으로 화면을 가려 그림자를 만들거나, 주변 그림자 안으로 들어가야 합니다. 회색 글자를 사용할 때는 부디 다시 한 번 더 생각해보세요.
2. 화면을 전부 채우려고 하지 마세요
과유불급. 때로는 적은 것이 나쁜 것을 의미하지 않을 때가 있습니다. 중요한 것은 콘텐츠를 고르게 배치하는 것입니다.
몇몇 디자이너는 공간이 남는 것을 경계하고, 더 큰 폰트를 사용하거나 배너와 이미지의 숫자와 크기를 늘려서 공간을 어수선하게 만들기도 합니다. 이는 우스꽝스러운 행동 중 하나이며, 콘텐츠가 적은 경우 약간의 공간을 남겨두는 것도 좋은 판단입니다.
3. 사용자가 업로드한 콘텐츠를 사용하지 마세요
사용자가 자유롭게 직접 공개적인 웹 페이지에 그래픽 이미지 파일을 업로드하도록 허용하거나, 사용자가 업로드한 콘텐츠를 무턱대고 사용하는 것은 좋은 생각이 아닙니다. 이미지의 낮은 해상도부터 시작해 콘텐츠의 부적절성까지 여러가지 이유가 있습니다. 이 옵션을 허용해야만 한다면 웹 사이트의 타깃 고객층을 잘 생각해 알고리즘을 설정하세요.
4. 너무 많은 규칙과 스타일 사용은 피하세요
이미 위에서 웹 페이지의 요소 과잉 사용에 대해 많이 언급했죠. 특히나 새롭게 구축한 실험적인 웹사이트 디자인의 경우, “적을수록 좋다”라는 규칙의 중요성은 수없이 강조해도 모자랍니다. 너무 많은 규칙과 스타일에 매몰되는 것은 심미적으로 보기 좋지 않을 뿐더러 여러 사용자에게 혼란을 줄 수 있음을 기억하세요.
5 폰트 가지고 실험하지 마세요
일부 웹 디자이너와 웹 마스터는 자신의 창작물의 독창성을 강조하기 위해 실험적인 폰트를 사용하기도 합니다. 그런 실험적인 글꼴의 첫 번째 특징은 비표준 크기의 폰트는 사용자 기기에 적합하지 않다는 것입니다.
둘째로는 독특한 폰트 사용을 강행할 경우, 폰트를 위해 원치 않게 다른 사람의 디자인을 복사 붙여넣기 할 위험이 있습니다. 이 모든 것은 작품을 글꼴로 인식되기 때문입니다. 그러므로 폰트를 선택할 때는 최대한 대중적이고 중립적인 것을 선택하는 것이 좋습니다.
6 CTA 문구를 무작정 줄이지 마세요
또 자주 볼 수 있는 흔한 문제는 웹 디자이너와 웹 마스터가 맹목적으로 버튼과 기타 작은 형식 요소인 CTA의 구성 문구를 최소화하려는 경향입니다. CTA 문구가 필요 이상으로 줄어든다면 결과적으로 CTA의 클릭 유도 문구가 낚시성 광고 링크처럼 보이거나, 더 나아가 사이트에 쓰여진 모든 요소가 사용자에게 매력적이지 않게 보일 수도 있습니다.
그렇기 때문에 웹 디자이너와 웹 마스터는 CTA 문구를 작성할 때 약간의 공백을 가지면서도 현명하게 문구를 작성해야 합니다.
? CTA란?
CTA(Call to Action)는 웹사이트나 앱에서 사용자의 주목을 끌고, 특정 동작을 유도하는 역할을 하는 버튼이나 배너 등의 요소를 말합니다. 쉽게 말하면 클릭할 수 있는 버튼입니다!
7. 사회적 조사자료를 무시하지 마세요
많은 사람은 제품을 선택할 때 일종의 연구 자료나 사회적 증거인 ‘고객 리뷰’를 접하게 됩니다. 만약 여러분이 무언가를 판매하는 웹사이트를 디자인한다면, 이러한 사실을 무시해선 안됩니다. 이러한 자료는 잠재적 구매자에게 자신의 구매 선택이 올바른 선택이었다는 자신감을 더해줄 것입니다.
8 텍스트를 너무 많이 쓰지 마세요
텍스트로 가득 찬 웹사이트 디자인은 인터넷 초창기였던 90년대 후반에나 유행한 트렌드 중 하나입니다. 결과적으로 현대의 인포그래픽은 사용자에게 불편을 끼치지 않도록 접근 가능성 높고 이해하기 쉬운 방식을 선택해 과거의 트렌드를 대체했습니다. 유능한 디자이너는 사용자에게 많은 글자를 강요하기보다 유익한 이미지를 보여줍니다
9. 정보 탐색을 복잡하게 만들지 마세요
정보 탐색이 어렵다는 것은 일부 아시아 웹 사이트의 공통적인 단점입니다. 솔직히 저희도 왜 그 웹 사이트가 이렇게 사용자를 혼란스럽게 만드는 건지 모르겠습니다. 좋은 디자인의 웹사이트는 현지 언어를 모르는 사람들도 구글 번역의 도움 없이 무엇을 해야 할지 알 수 있는 기능을 적절하게 갖춰야 합니다.
10. UI 요소의 간격을 줄이지 마세요
마지막으로 가장 최악의 실수이자, 가장 큰 문제는 웹 디자이너가 UI 요소 사이의 적절한 간격과 거리 조절에 신경 쓰지 않는 것입니다. 이런 문제는 최악의 경우, 소형 기기에서 텍스트 콘텐츠가 너무 작아 확대하지 않으면 읽을 수 없기 때문에 적응형 및 반응형 레이아웃조차 사용하지 못하게 될 수 있습니다.
마무리
물론 상술한 목록이 사용자가 제품 서비스 UI에서 직면하는 흔한 디자인 실수를 모두 나열한 것이 아닙니다. 하지만 이 목록이 사용자를 짜증나는 상황으로부터 구해주고, 웹 디자이너에게는 새로운 영감을 줘 한 차원 더 높은 디자인을 할 수 있게 이끌어주길 바랍니다!
? 원문 링크: Bad Bad UI: 10 Common Mistakes in User Interfaces
뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
- 에디터김동욱 (jkkims@ditoday.com)
