10 가지 고통스러운 UI 실패 (그리고 그로부터 배울 수있는 것)

콘텐츠

• 01. 120 개의 계란을 원하십니까?
• 02. 서비스 이용을위한 전화 번호 변경
• 03. 중국어로‘언어 전환’을 어떻게 말해요?
• 04. 설명이 모호한 경우
• 05. 여기에 다른 것을 넣을 수 있습니까?
• 06. 드롭 다운에 의한 죽음
• 07. 주변 대기
• 08. 뭐라고 요?
• 09. 콘텐츠 희석
• 10. 수치심!

좋은 사용자 인터페이스 디자인은 전반적인 사용자 경험을 향상시킵니다. 사용자와 앱 또는 사이트의 상호 작용을 간단하고 직관적이며 효율적이고 유동적으로 만들어서 잘 작동 할 때 사용자가 그 위치를 알아 차리지 못할 수도 있습니다.

많은 팀이 파이프 라인을 관리하기위한 Trello 목록의 단순함을 높이 평가하고, 판타지 스포츠 팬은 ESPN Fantasy Sports 앱에서 방대한 양의 정보를 쉽게 소화 할 수 있음을 증명할 수 있으며, Artsy의 매끄러운 선과 색상 팔레트는 소형 핸드 헬드 장치는 쉽게 보입니다.

그러나 그것이 잘못되면 사람들이 정말로 알아 차릴 때입니다. 잘못된 UI는 사용자가 경험을 계속하지 못하도록 설득하거나 직접적으로 방해 할 수 있습니다. 아래에있는 10 가지 멍청이, 일부는 코믹하고, 일부는 그냥 짜증나는 것들이 우리에게 무엇인가를 가르쳐 줄 수 있습니다. 심지어 피해야 할 일이기도합니다.

또한 잘못된 UI는 종종 테스트 부족과 관련이 있습니다. 가장 선호하는 테스트 도구에 대한 최고의 사용자 테스트 소프트웨어 목록을 참조하십시오.

• 더 스마트하게 작업하는 데 도움이되는 34 가지 웹 디자인 도구

01. 120 개의 계란을 원하십니까?

UI 디자인의 기본은 작업에 적합한 도구를 선택하는 것입니다. 이는 일반적으로 기존 규칙을 준수하고 사용자가 이미 익숙한 방식으로 제어 요소를 사용하는 것을 의미해야합니다. 그래서 아마도 당신은 Rocky Balboa처럼 훈련하고 있고 정말로 당신의 주문에 엄청난 수의 계란을 추가하고 싶지만 체크 박스? 전설에 따르면 달걀 120 개 주문을 금지하는 것 같습니다. 당연히 말도 안되는 일이긴하지만 그들이 그렇게 말해야했던 사실은 아마도 잘못된 도구가 사용되었음을 보여줍니다.

이 UI를 디자인하는 더 좋은 방법이 있다고 말하면 어떻게 되나요? pic.twitter.com/tvxeluJF9N2019 년 5 월 13 일

체크 박스는 둘 이상의 옵션을 표시 할 수있는 경우에 사용되며 라디오 버튼은 하나의 선택 만 허용되는 경우에 사용됩니다. 여기에서는 플러스 및 마이너스 버튼이 더 잘 작동했을 수도 있습니다. 어느 쪽이든, 우리는 달걀 15 개를 주문할 때 할인이 없다는 것에 더욱 실망합니다.

02. 서비스 이용을위한 전화 번호 변경

고유 한 형식 지정 규칙을 사용하여 한 지역의 사용자에게만 제공하려는 경우가 있지만 여러 국제 공항에서 운항하는 항공사의 웹 사이트는 그중 하나가 아닐 수 있습니다. 캐나다 Flair Airlines의이 예에서 전화 번호가 10 자리 이하인 국가의 경우 잘못된 번호를 입력 할 수밖에 없습니다. 하지만 국가 코드 필드가 없기 때문에 전화를 걸 수 없습니다.

여러 지역에서 사용자를 확보하거나 확보 할 수있는 모든 것에 대한 UI를 디자인 할 때 사용이 로컬 이름 지정 및 번호 지정 규칙에 의해 제한되지 않는지 확인하십시오. 사용자가 인터페이스에 적응하도록 강요하지 말고 사용자에게 적응하십시오.

03. 중국어로‘언어 전환’을 어떻게 말해요?

그래서 당신은 해외 여행 중에 인터넷에 접속하면 이와 같은 인사를받습니다. 어디를 먼저 보십니까? 맨 위 오른쪽? 거기에 아무것도 없습니다. 왼쪽 상단? 아니. 세 번째 추측은 드롭 다운 메뉴처럼 보이는 모든 항목을 검색 할 때 맨 아래까지 스크롤하도록 할 수 있습니다.이 경우 여기에서 언어 옵션을 찾을 수 있습니다. 하지만 언어를 변경하는 것이 읽을 수없는 사이트에 도달하면 가장 먼저하고 싶은 일이라는 점을 고려하면 해당 옵션을 가능한 한 찾기 쉽고 이상적으로는 선택할 수 있도록 만드는 것이 좋습니다. 로그인과 같은 다른 작업을 수행하기 전에

Farhat Datta가 디자인 한 지구본 아이콘 또는 언어 아이콘은 사람들이 옵션을 찾는 데 도움이 될 수 있습니다. 당신이 무엇을하든, 많은 사람들을 화나게하고 싶지 않다면 언어를 나타내는 데 플래그를 사용하지 마세요.

04. 설명이 모호한 경우

@Homeburger 이것은 내 두뇌를 파괴하고 있습니다; 상추를 제거하려면 상추를 선택 취소하십시오. 그래서 상추 없음은 상추를 의미합니까? pic.twitter.com/1Z3vt8lR1UM2019 년 3 월 12 일

우리는 모두 항목을 추가하기 위해 체크 박스를 표시하는 데 완벽하게 익숙합니다. 체크 박스를 클릭하여 항목을 원하지 않는다고 말하는 것은 결코 우리를 넘어서는 것이 아니기 때문에이를 엉망으로 만들 여지가 많지 않아야합니다. 하지만 여기서 홈 버거가 그 과정을 설명하려는 시도는 우리를 당황하게합니다. 원하지 않는 것을받지 않으려면 선택을 취소해야합니까? 모호함을 조심하되 상황을 더 복잡하게 만드는 모호함을 피하려는 시도도 조심하십시오.

05. 여기에 다른 것을 넣을 수 있습니까?

사용자가 처음부터 고통스러운 경험을하고 있다고 느끼게하는 복잡한 인터페이스 같은 것은 없으며, 안타깝게도 지나치게 바쁜 UI 디자인으로 눈을 아프게하고 탐색하는 데 너무 오래 걸리는 대형 플레이어의 예가 부족하지 않습니다. .

애플 아이튠스의 죽음을 애도하는 사람은 거의없는 반면, 아마존을 포함한 많은 유명 온라인 스토어는 계속해서 모든 것을 제공하고 주방은 탐색을 거의 용이하게하지 않는 방식으로 매장 전면에 가라 앉는다. 색상 이론을 적용하고 대비를 현명하게 사용하더라도 지나치게 어수선한 UI를 더 매력적으로 보이게하는 데는 거의 도움이되지 않으므로 다시 줄여야합니다. 하지만 너무 멀리 가지 마세요. 절대적인 미니멀리즘의 다른 극단으로가는 것도 위험합니다. 옵션은 여전히 ​​찾을 수 있어야합니다.

06. 드롭 다운에 의한 죽음

모든 사람이 드롭 다운을 싫어하므로 일부 UI 디자이너가 여전히이를 인식하지 못한 것이 이상 할 것입니다. 온라인 양식을 작성할 때 목록 하단에있는 국가를 찾거나 단순히 입력하는 것보다 출생 연도를 선택해야하는 것보다 더 실망스러운 일이 거의 없습니다. 젊은이나 노인을위한 고문, 그리고 누군가가 실수를 저지르는 것을 더 이상 막지 못할 것입니다.

Boden의이 예는 멋진 제목이없는 사람에게 약간의 부담을 줄 수 있다면 적어도 재미있을 것입니다. Mx 옵션은 없습니다. 이 예에서 더 넓은 교훈은 때때로 멈추고 물어봐야한다는 것입니다. 이것이 필요한가요? 목록의 맨 아래까지 스크롤해야하는 모든 윙 사령관을 유감스럽게 생각합니다.

양식 디자인에 대한 자세한 내용은 6 가지 양식 패턴과 사용시기에 대한 게시물을 참조하십시오.

07. 주변 대기

애니메이션과 참신한 상호 작용 방식이 즐거운 경험을 만드는 방법으로 예고되었지만 디자이너가 과시 할 수있는 변명이되지 않도록합시다. 모양과 느낌이 중요하지만 훌륭한 UI의 핵심은 기능입니다. Twitter의 '좋아요'버튼 애니메이션처럼 순진한 것조차도 성 가시고 유치한 것으로 악의를 얻었으며 장난기 가득한 로딩 아이콘은 처음에는 미소를 지을 수 있습니다. , 너무 자주 봐야한다면 싫어하는 사람들이있을 것입니다.

UI 사용에 마찰을 일으키는 불필요한 상호 작용은 마찬가지로 성 가실 수 있습니다. 50 개의 여행 목적지를 보여주는 KLM의 iFly50.com 쇼케이스에는 멋진 이미지가 있지만 더 많은 정보를보고 싶을 때마다 버튼을 몇 초 동안 누르고있는 사람이 있습니까? 사용자가 작업을 수행하는 것을 방해하는 것이 아니라면 마찰을 추가하지 마십시오.

08. 뭐라고 요?

안녕하세요 @teamweek 귀하의 새 민트 색상은 멋져 보이지만 흰색 레이블로 버튼을 읽을 수 없게 만듭니다. UI 수정이 필요합니다! #usability pic.twitter.com/ih1n8no7s72018 년 1 월 10 일

밝고 형광색도 UI에서 약간의 트렌드가되었으며 콘텐츠를 선명하고 돋보이게 만드는 데 매우 효과적 일 수 있지만 텍스트를 읽을 수 있어야한다는 점을 기억하십시오. Teamweek의 민트 그린은 대접처럼 보이지만 민트 그린 버튼에있는 흰색 텍스트를 읽기는 쉽지 않습니다.

색상이 가독성의 유일한 원인은 아닙니다. 낮은 대비를 향한 추세는 눈에 편한 것을 목표로 할 수 있지만 문자를 읽기 위해 긴장해야하는 경우에는 도움이되지 않으며 미세한 글꼴과 응답하지 않는 사이트도 사용자의 눈을 손상시킬 수 있습니다. 확인 텍스트는 읽기 쉽고 다른 장치에서 읽을 수 있는지 확인합니다.

꿈꾸는 글꼴을 찾고 있다면 무료 글꼴 목록을 놓치지 마세요.

09. 콘텐츠 희석

누군가가 정말로 '우리에 대해', '우리의 가치', '우리의 사명'에 별도로 들어가기를 원할까요? 이것은 회사의 눈에는 별개의 개념 일 수 있지만 사용자가 그중 하나에 구체적으로 들어가고 싶지 않을 것 같으며 사용자가 전체 스토리를 얻기 위해 5 번의 클릭을 거치게하는 이유는 무엇입니까? The Grit의이 예제는 즉시 병합하는 것이 더 좋은 얇은 콘텐츠처럼 보입니다. 그렇지 않으면 사용자가 읽을 수 없습니다.

10. 수치심!

확인 수치심은 크지 않고 영리하지도 않습니다. Paleo Flourish의이 예는 웹 사이트 모달을 부끄럽게 만드는 경향에서 더 공격적인 사례 중 하나입니다. 때로는 유머러스 한 방식으로 할 수 있지만 일반적으로 대상 청중이 '그때 계속하세요'또는 '아니요, 슬프고, 외롭고, 패배자로 남는 것을 선호합니다. 라운드를이기려면