나쁜 디자인과 좋은 디자인: 5 가지 비교 사례에서 설계 경험을 얻습니다

나쁜 디자인과 그에 상응하는 좋은 디자인을 비교하는 것은 매우 재미있다. 디자이너는 그로부터 중요한 경험을 얻을 수 있다. 이러한 비교는 설계에서 피해야 할 함정을 강조하면서, 설계 이론을 실생활의 해결책으로 바꾸는 방법을 알려 줍니다. 미국 작가, 연구원, 가용성 전문가인 Jared Spool 은 "좋은 디자인은 잘 작동할 때 보이지 않는다" 고 말했다. 효과가 좋지 않은 경우에만 알아차릴 수 있다. " 따라서, 다섯 가지 명백한 나쁜 디자인을 보여줌으로써, 우리는 좋은 디자인이 어떻게 더 잘 작동하는지 비교하고, 몇 가지 경험을 추출하여, 사용자를 위해 좋은 보이지 않는 경험을 만들 수 있습니다.

1, 정보 과부하

나쁜 디자인: 로스 앤젤레스의 주차 표시

로스앤젤레스의 주차 표지판은 최근 10 년 동안의 정보 과부하의 전형적인 대표라고 할 수 있다. 교통규칙이 복잡하기 때문에 많은 정보를 작은 지역 내에서 전달해야 한다는 것은 이해하기 어려운 것으로 유명하다. (윌리엄 셰익스피어, 교통규칙, 교통규칙, 교통규칙, 교통규칙, 교통규칙, 교통규칙, 교통규칙, 교통규칙 등)

이 표지판들은 얼마나 혼란스러운가? 일반적으로 20 10 으로 시작하는 일반적인 스타일은 다음과 같습니다.

화요일 아침 9 시에 차를 몰고 이 길을 지나간다고 상상해보세요. 그럼, 당신은 여기에 주차할 수 있습니까? 이렇게 간단한 질문에 대답하려면 대량의 인지자원이 필요하다!

디자이너로서, 우리는 종종 작은 지역 내에서 대량의 정보를 전달해야 하는 설계 문제에 직면한다. LA 의 주차 카드는 가장 극단적인 예 중 하나일 수 있지만 모바일 애플리케이션 설계에서도 같은 문제가 발생하는 경우가 많습니다. 그럼 주차 표지판과 비슷한 디자인 문제를 해결할 수 있는 일반적인 방법이 있나요?

좋은 디자인: Nikki Sylianteng 의 주차 지시 디자인입니다.

모든 정보를 표시하고 쉽게 이해할 수 있는 로고를 설계하는 것은 불가능한 임무처럼 들린다. 하지만 이것이 바로 브루클린의 디자이너 니키 실린텐이 한 일입니다.

Nikki 의 디자인이 효과적인 이유 중 하나는 사용자 중심이기 때문이다. Nikki 는 운전자들이 지금 여기에 주차할 수 있는지 알고 싶어 한다는 것을 깨달았다. (빌 게이츠, Northern Exposure (미국 TV 드라마), 스포츠명언) 예 또는 아니오, 이것은 모든 운전자들이 필요로 하는 것이기 때문에 표지판은 이 정보만 표시하면 됩니다.

그녀의 디자인에서, 그녀는 문자보다는 시각으로 메시지를 전달했다. 그 결과 디자인은 매우 직관적입니다. 녹색은 주차할 수 있고 빨간색은 안 된다는 뜻입니다. 또한 이 설계에서는 색맹 문제도 고려되어 가동 중지 시간 없는 시간대에 대각선을 사용했습니다.

지금 이 표지판을 보면 화요일 오전 9 시에 주차할 수 없다는 것을 알 수 있습니다. 이런 표지판은 한눈에 알아볼 수 있다.

배운 모범 사례:

-사용자에게 필요한 것을 알고 그에 따라 디자인하십시오. 이를 통해 정보 로드를 줄일 수 있습니다.

-사용자에게 전달할 정보가 많습니까? 텍스트 대신 시각적 요소를 사용해 봅니다. 데이터 시각화에 대한 자세한 내용을 보려면 아래 링크를 클릭하십시오.

2? 신비한 고기 내비게이션

나쁜 디자인: LazorOffice.com

Vincent Flanders 가 1998 에서 만든 웹 페이지인 The Suck 에 따르면, MMN 은 사용자가 링크를 클릭하거나 링크 위에 마우스를 놓아야 대상을 알 수 있는 디자인을 가리키는 데 사용됩니다. 신비한 고기' 라는 단어는 미국 공립학교 식당에서 공급하는 고기에서 유래한 것으로 과도하게 처리되어 전혀 분간할 수 없다.

MMN 은 탐색 요소의 가시성을 낮추기 때문에 좋지 않습니다. 사용자가 탐색의 목적지를 "추측" 하거나 클릭해야 하기 때문에 사용자의 인지 부하가 증가합니다.

현재, MMN 은 구식 웹 디자인에서도 여전히 볼 수 있지만, 현대 웹 디자인에서는 더 이상 볼 수 없다. 우리는 활동 판실을 제공하는 디자인 회사 사이트인 Lazor Office 를 예로 들었다.

그들의 홈페이지 맨 아래에 축소판 한 세트가 조용히 놓여 있다. 클릭할 수 있을까요? 예, 클릭할 수 있습니다. 이러한 그림 위로 마우스를 이동하면 포인터의 모양이 변경됩니다. 하지만 클릭했을 때 어떤 일이 일어날까요?

"클릭 보기" 는 좋은 사용자 경험 솔루션이 아닙니다. 이러한 설계의 변화는 사용자가 이러한 탐색을 포기하고 경쟁사로부터 대체 솔루션을 얻을 수 있다는 것입니다.

좋은 디자인: 대화 형 디자인 기본 웹 코스 카드

다행히도 MMN 문제는 쉽게 해결할 수 있습니다. 핵심은 링크를 명확하게 표시해야 한다는 것을 깨달아야 한다는 것이다. 마우스를 올려 놓을 때 "항목 보기" 팝업 프롬프트를 추가하여 Lazor Office 홈 페이지의 가용성을 높일 수 있습니다.

인터랙티브 디자인 파운데이션의 코스 카드는 각 카드 아래쪽에 "코스 보기" 항목이 있을 뿐만 아니라 카드 위에 마우스를 올려놓으면 "코스 입력" 이라는 힌트도 팝업한다. (윌리엄 셰익스피어, 템플릿, 코스, 코스, 코스, 코스, 코스, 코스, 코스, 코스, 코스, 코스) 많은 웹사이트들이 같은 규칙을 따르므로, 당신도 그것을 따라야 합니다. 즉, 사이트의 가용성을 극대화해야 합니다.

배운 모범 사례:

링크의 방향을 명확하게 표시해야 합니다! 신비한 고기를 먹는 것을 좋아하지 않습니다. 마찬가지로, 사용자도 알 수 없는 링크를 클릭하는 것을 좋아하지 않습니다.

3, 사용자 작업의 어려움을 증가시킵니다.

나쁜 디자인: iFly50.com

디자이너로서, 사용자들을 더 어렵게 만드는 디자인을 경계해야 한다. 단, 사용자가 이런 행동을 하지 않도록 설득하는 것이 목적이 아니다. (알버트 아인슈타인, 디자이너명언) 그러나 때때로 우리는 무심코 (주로 심미나 신기한 수요) 사용자의 운영난을 증가시켜 사용자 체험이 좋지 않을 때가 있다.

한 가지 예는 iFly 50 입니다. 이것은' iFly' 잡지 기념일을 위해 만든 웹사이트입니다. IFly 는 50 개의 여행지를 표시하는 수직으로 스크롤되는 홈페이지입니다. 일부 대상 (아래 그림 참조) 에서는 사용자가 몇 초 동안 "클릭 및 누르기" 하여 더 많은 그림을 볼 수 있는 버튼이 그림 아래쪽에 나타납니다.

이러한 각 동작마다 몇 초씩 증가하는 어려운 행동은 매우 나쁜 체험으로 이어질 수 있다. 해당 페이지의 결과를 즉시 로드하는 대신 브라우저의 각 링크를 몇 초 동안 클릭하고 누르고 있어야 한다고 상상해 보십시오. 그러면 몇 번의 "클릭 및 누르기" 동작으로 인터넷 전체를 탐색하는 것을 포기할 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 인터넷명언)

많은 경우 우리 디자이너들은 최신 상호 작용 스타일이나 조작을 적용하는 경향이 있지만, 디자인을 경계하면 사용자의 운영이 어려워질 수 있습니다. 대부분의 경우 간단한 클릭이나 슬라이딩과 같은 일반적인 작업을 사용하고 테스트하는 것이 좋습니다.

좋은 디자인: iOS 의 유연한 롤링

흥미롭게도 잘 설계된 조작의 난점은 위대한 디자인이 될 수 있다. 애플이 모바일 운영 체제 iOS 에서 가장 많이 사용하는 동작은 유연한 스크롤이며, 페이지 하단과 같은 일부 경우에는 매우 어려워집니다.

보시다시피 사용자가 마지막 페이지로 스크롤할 때 스크롤이 더 어려워집니다. 여기서는 더 이상 아래로 스크롤할 수 없다는 것을 사용자에게 상기시켜 주는 작업의 난이도가 증가하여 직관적인 경험을 만들어 냅니다.

배운 모범 사례:

가능한 한 사용자의 조작에 어떠한 난이도도 더하지 않도록 하라. 더 좋은 방안이 없을 때 이 난이도를 최대한 높여라. (존 F. 케네디, 노력명언)

4. "총명하지만 가용성을 무시하는 디자인

나쁜 디자인: 볼든. nl

때로는 스마트 디자인으로 인해 사용자 경험에 큰 손실이 발생할 수 있습니다. 이 실수를 더욱 위험하게 만드는 것은 디자이너가 스마트한 디자인을 좋아한다는 것이다. 이 작은 그래픽 놀라움이 우리 디자이너를 웃게 할 수 있기 때문이다. 하지만 슬프게도, 대부분의 인간은 디자이너가 아닙니다. 더욱 슬프게도, 모든 지능형 디자인이 좋은 것은 아닙니다. 특히 액세스 가능성, 가시성 또는 사용 불가 문제를 야기하는 경우에는 더욱 그렇습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)

네덜란드 전략 디자인 및 개발 스튜디오 볼든의 웹사이트를 예로 들어보죠.

이는 사용자가 아닌 디자이너를 위한 전형적인 사례다. 사이트 디자이너는 참신한 디자인 스타일을 보여주기 위해 제목의 선명도를 크게 낮췄다. 누가 이 페이지를 설계했든 간에, 그는 사용자에게 마우스를 구석으로 옮겨 제목을 볼 것을 지시하는 것을 잊었다. 즉, 제목은 마음대로 볼 수 있다는 것이다. 또한 제목이 현재 보이는 경우에도 텍스트와 배경 사이의 대비가 부족해도 겹치는 문자가 표시됩니다. 이 모든 것이 사용자에게 불친절한 웹사이트를 만들었다.

좋은 디자인: CultivatedWit.com.

CultivatedWit 의 웹 사이트는 가용성을 저하시키지 않고 지능형 디자인을 사용하는 방법을 보여 주는 나쁜 디자인의 반례입니다.

마우스가 부엉이 삽화 위에 있을 때 부엉이는 눈을 깜빡인다.

위의 나쁜 디자인과 가장 큰 차이점은 CultivatedWit 웹 사이트의 부엉이 윙크하는 것이 전체 웹 디자인의 핵심이 아니기 때문에 사용자가 이 교묘한 디자인을 알아차리지 못하더라도 가용성에 영향을 주지 않는다는 것입니다.

그리고 페이지에 뚜렷한 아래쪽 슬라이드 화살표가 있고 아래에 정보가 있습니다. 다음 페이지로 슬라이딩하면 다음을 볼 수 있습니다.

문안 (명확하고 대비가 양호함) 은 볼던이 시도한 것과는 달리 웹 사이트의 사용자 경험을 약화시키지 않는 슬기로움을 만들어 냈다. 여기서 유일한 문제는' 우리 메일 클럽에 가입하라' 는 입력 상자의 힌트가 더 명확해야 한다는 것이다. 하지만 전반적으로, Cultivated Wit 의 사이트 예는 똑똑한 디자인이 항상 나쁜 사용자 경험을 초래하는 것은 아니라는 것을 잘 보여 준다.

배운 모범 사례:

지능형 설계는 가능한 한 오류 및/또는 실제 사용자에서 테스트해야 합니다. 때때로, 똑똑한 디자인은 역효과를 내고 가용성을 손상시킬 수 있다.

5, 중복 동적 효과

나쁜 디자인: Dribbble 의 PayPal 영수증의 개념 디자인

동적 효과는 상호 작용 디자인의 중요한 요소이지만 동적 효과의 설계는 목적에 따라야 합니다. 동적 효과를 위해 동적 효과를 만들어서는 안 된다. 불행히도, 디자이너는 역학을 즐겨 사용합니다. 부분적으로는 역학이 재미있기 때문입니다. 하지만 우리는 언제 멈춰야 할지 모릅니다.

Vladyslav Tyzun 이 Dribbble 에 전시한 PayPal 영수증 개념의 설계는 동적 효과를 오용한 사례다.

이 문제의 위험은 디자이너가 항상 역동적인 효과가 부족하다고 느끼는 것 같다는 것이다. 20 16 년 내내 Vladyslav 의 동적 효과는 500 개 이상의 짱, 8000 개 이상의 조회수를 받았습니다. 이로 인해 디자이너가 동적 효과를 위해 동적 효과를 설계해야 한다는 잘못된 인식이 생길 수 있습니다. 현재의 디자인 트렌드가 좀 더 직접적인 표현 형태라는 것을 깨닫고, 설계 효율을 높이기 전에 효율을 높이는 경향이 있다는 것을 깨닫는다면 많은 시간을 절약하고 골치 아픈 일을 피할 수 있을 것이다. 사용자가 웹 사이트에 오는 것은 목적이 있다는 것을 기억하십시오. 우리는 짧은 간격과 시간 후에 사용자에게 내용을 보여 줄 필요가 있습니다. 큰 동그라미를 두르는 것이 아니라 사용자에게 보여 줄 필요가 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 스포츠명언)

좋은 디자인: Strip 지불 효과

목표 기반 동적 효과를 사용할 때 효과가 좋습니다. 다음은 사용자가 인증 코드를 받았을 때입니다.

스트릭의 지불 효과.

W3C 웹 동적 전문가인 레이첼 나버스 (Rachel Nabors) 가 동적 효과를 사용할 때 명심해야 할 다섯 가지 원칙을 제시했습니다.

배운 모범 사례:

항상 목적에 맞게 동적 효과 디자인: 동적 효과가 너무 많으면 제품의 사용자 환경에 해를 끼칠 수 있습니다. 심미의 분량을 줄여 기능성이 더 강하다.

결론:

이런 엉터리 디자인의 예를 보면 재미있나요? 동시에, 그들은 또한 교육적 가치를 가지고 있다. 다음은 이 다섯 가지 나쁜 디자인과 좋은 디자인의 비교에서 얻은 교훈입니다.

1- 사용자 요구 사항을 이해하고 적절한 정보를 제공합니다.

2- 전달할 정보가 너무 많으면 문자 대신 그래픽 정보를 사용해 보세요.

3- 링크에 태그를 지정해야 합니다! 사용자는 알 수 없는 링크를 가리키는 것을 좋아하지 않습니다!

4- 사용자가 이러한 동작을 조작하지 못하도록 하기 위한 것이 아니라면 사용자의 행에 어려움을 가중시키지 않도록 합니다.

스마트 디자인을 테스트하고 조심해서 사용하세요.

6- 동적 효과는 저주입니다. 만약 네가 그것을 과도하게 사용한다면, 너는 그것의 모든 기능을 잃게 될 것이다.

다음에 나쁜 디자인의 예를 볼 때, 잠시 멈추어 생각해 보십시오. 설계가 실패한 이유를 찾아내고, 그에 따라 잘 만들어진 디자인 사례를 찾고, 그로부터 얻은 경험을 적어 보십시오. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 그리고 우리의 토론 커뮤니티에 와서 당신의 수확을 나누세요.

번역 주소: https://www.interaction-design.org/literature/article/bad-design-vs-good-