디자인 패턴을 사용하여 웹용으로 디자인하는 방법

디자인 패턴은 좋은 웹 사이트 사용성의 기초이며 웹 사이트가 구축되는 조각입니다. 좋은 사용자 경험을 보장하기 위해 웹 디자이너가 내리는 전략적 디자인 결정입니다. 디자이너의 임무는 일반적인 사용성 문제를 해결하고 가장 사용자에게 직관적인 솔루션을 만드는 것이며, 패턴은 예측 가능하고 직관적이며 최적화된 사용자 경험을 만듭니다. 디자인을 처음 접하는 사람이든 노련한 전문가이든 일반적인 UI 디자인 패턴을 계속 인식하고 패턴이 발전함에 따라 따라잡아야 합니다.

디자인 패턴의 예

구성 요소에 대해 들어 보셨을 것입니다. 버튼, 양식 필드, 검색 창 등과 같은 것들이 모두 그 예입니다. 이를 사용하려면 디자인에 패턴을 만들어 유용하게 사용할 수 있습니다.

한 가지 유의할 점은 "구성 요소"와 "디자인 패턴"이라는 용어가 같은 의미로 사용되는 경우가 있다는 것입니다. 이 문서의 목적에 따라 구성 요소는 웹 사이트의 빌딩 블록이며 패턴은 사용자가 작업을 수행하는 데 사용되는 확립된 방식입니다.

보시다시피 패턴은 단일 구성 요소보다 "더 큽니다". 패턴은 개별 구성 요소로 수행되는 작업을 최적화하는 방법입니다. 다음과 같은 많은 전통적인 디자인 패턴이 있습니다.

• 웹사이트 헤더에 홈페이지로 연결되는 로고
• 모바일 웹사이트의 햄버거 내비게이션
• "비밀번호 재설정" 링크가 있는 로그인 양식
• 사용자가 사이트에서 자신의 위치를 ​​추적할 수 있는 이동 경로
• 아이템 카운터가 있는 카트

디자이너가 디자인 패턴에 집중해야 하는 이유는 무엇입니까?

디자인 패턴을 사용하면 많은 이점이 있습니다. 패턴은 디자이너의 작업을 보다 효율적으로 만들어 줄 뿐만 아니라 더 중요한 것은 패턴을 통해 사용자의 경험이 더 쉬워진다는 것입니다.

디자인 패턴으로 신뢰 구축

사용자는 사이트에 도착하는 순간 빠른 가정을 합니다. 순식간에 콘텐츠와 상호 작용할 가치가 있는지 또는 다른 옵션을 찾아야 하는지 결정합니다.

귀하의 사이트는 탐색하기 쉬운가요? 사용자가 원하는 정보를 쉽게 찾을 수 있습니까? 클릭하고 문제를 해결할 인내심이 없습니다. 좋은 첫인상을 남기고 사용자와 신뢰를 구축하는 것이 절대적으로 중요합니다.

웹의 역사가 된 것에서 특정 패턴이 일반화되었습니다. 디자이너는 웹 사이트를 디자인하기 위해 이러한 확립된 사용자 인터페이스 요소에 의존해 왔으며 사용자는 이러한 디자인 패턴을 보는 데 익숙해졌습니다. 그들은 사이트 간의 공통점을 인식하고 익숙한 것을 신뢰합니다.

전자 상거래 사이트에서 확립된 디자인 패턴의 예를 들어 보겠습니다. 사용자는 그리드에서 작은 제품 미리보기를 본 다음 개별 항목에 대해 자세히 알아보기 위해 클릭하는 데 익숙합니다. 디자인에 확립된 패턴을 사용하고 사용하기 쉬운 경험을 생성함으로써 사용자와의 신뢰를 구축하고 있으며 사용자가 재방문자가 될 가능성이 높아집니다.

디자인 패턴은 직관적입니다

사용자가 사이트와 상호 작용함에 따라 예측 가능성 요소가 매우 중요해집니다. [twitter_link]예측 가능한 패턴은 가장 직관적인 경험을 가능하게 합니다.[/twitter_link] 익숙한 패턴을 갖는 것도 중요하지만 이러한 패턴을 일관되게 사용하는 것도 중요합니다.

일반적이고 예측 가능한 패턴 예제는 양식에서 찾을 수 있습니다. 특히 모든 양식은 유효성 검사 및 오류 메시지를 제공합니다. 사이트의 모든 양식이 이 작업을 일관되게 수행합니까? 모든 메시지가 같은 위치에 있습니까? 제출 버튼은 어떻습니까? 양식이 전송되었다는 메시지가 있습니까?

디자인 관점에서 사용자는 이전에 이러한 패턴을 여러 번 접했습니다. 유용한 메시징과 함께 양식 유효성 검사를 제공하면 문제가 있는 위치를 사용자에게 알릴 수 있으며 양식이 전송되었음을 나타내는 메시지를 갖는 것은 작업이 수행되었음을 나타내는 유용한 지표입니다.

좋은 사용자 경험을 위해서는 패턴과 예측 가능성이 필요하다는 말을 들으면 상식처럼 들릴 수 있습니다. 그러나 일반적인 패턴을 위반하여 불만이나 혼란을 야기할 수 있는 사이트를 발견하는 것은 그리 어렵지 않습니다. 이를 염두에 두고 유용한 UI 패턴으로 계속 디자인하세요. 사용자가 더 많이 알고 있을수록 예상되는 동작을 더 많이 알 수 있습니다. 패턴과 규칙은 사용자가 혼란스러워하지 않도록 하고 패턴을 고수하면 예측 가능한 경험을 생성합니다.

디자인 패턴은 디자이너 간의 공통 언어를 제공합니다.

[twitter_link]훌륭한 경험은 효과적인 디자인에서 시작됩니다.[/twitter_link]

많은 경우 디자이너는 팀으로 작업합니다. 디자인 패턴이 확립되어 있을 때 팀이 보다 효율적으로 작업하는 데 도움이 됩니다. 문제가 이미 해결된 경우 바퀴를 재발명할 필요가 없습니다.

하나의 중앙 프런트 엔드 스타일 가이드에 모든 패턴을 유지하는 것은 인벤토리를 유지하기에 좋은 장소입니다. 글로벌 리소스로서 모든 팀 구성원이 각 패턴의 사용 사례를 이해할 수 있는 빠른 가이드입니다. 혼자서 작업을 하더라도 자신이 사용하고 있는 디자인 패턴을 추적해 두면 보다 효율적으로 작업할 수 있고 훗날 그것들을 되돌아볼 수 있습니다.

계획 단계

디자인 패턴을 활용해야 하는 이유는 꽤 분명하지만 웹 디자이너가 웹용으로 디자인할 때 실제로 이를 어떻게 적용합니까? 다음은 디자인 프로세스를 더 쉽게 만드는 데 도움이 되는 몇 가지 팁입니다.

이미 알고 있는 것을 사용하여 시작하기

전체 재설계 또는 사이트 "확장"을 설계하는 경우 목록을 작성하고 이미 알고 있는 내용을 살펴보는 것이 좋습니다. 좋은 출발점을 찾는 것이 핵심입니다. 완전히 새로운 프로젝트인 경우 이러한 사항에 대해 생각하고 일부 질문이 처음에는 알려지지 않을 것이라고 예상하는 것이 중요합니다. 이러한 상황에서는 과거의 디자인 경험을 활용하여 시작하는 것이 좋은 첫 단계입니다. 이것은 그들이 다른 프로젝트에서 일했기 때문에 초기 결정을 알려줍니다.

연구 시작

연구는 강력한 프로젝트 기반의 핵심입니다. 잘 알고 계시듯이 사용자는 항상 웹사이트에서 특정 작업을 수행하는 가장 쉬운 방법을 찾습니다. 당면한 문제와 작업을 이해하면 올바른 것을 설계하고 있는지 확인할 수 있습니다. 시작하려면 다음 항목에 대해 생각해 보십시오.

• 현재 사용자는 누구입니까? (목표, 인구 통계 등)
• 이 사용자에 대해 더 알고 싶은 것은 무엇입니까?
• 그들은 어떤 패턴과 가장 많이 상호 작용합니까?
• 이러한 사용자에게 문제가 있는 패턴이 있습니까?
• 어떤 개선이 가능합니까?
• 어떤 새로운 기능이 설계되고 있습니까?
• 현재 설정된 패턴이 작동할 수 있습니까?

조사 단계는 웹사이트와 상호 작용할 때 사용자가 달성해야 하는 것을 식별하는 시간입니다. 예를 들면 콘텐츠 검색, 뉴스레터 가입, 구매 등이 있습니다. 익숙한 요소에 직면하면 사용자는 생각할 시간이 줄어들고 전환할 이유가 더 많아집니다. 사용자가 웹에서 경험한 기존 지식을 기반으로 사용자에게 친숙하게 느껴지는 방식으로 패턴을 만드는 데 디자인을 집중하세요.

설계 문제를 해결할 때 시간과 예산은 항상 중요한 요소이지만 가능한 한 많은 조사를 하십시오. 사용자의 주요 문제점을 발견하고 기존 디자인 패턴을 연구할 때입니다. 웹에서 흔히 볼 수 있는 것은 무엇입니까? 과거에 어떤 패턴을 성공적으로 활용했습니까? 해결해야 할 문제를 정의한 후에는 동일한 사용자 목표를 대상으로 하는 패턴이 있는 사이트를 탐색하십시오. 그것은 프로젝트에 좋은 영감을 줄 것입니다. 그것들을 "복사"할 필요는 없지만 거기에 무엇이 있는지 기록해 두는 것은 도움이 됩니다.

지금까지는 일관되고 예측 가능한 상태를 유지하는 것이 좋습니다. 기존 패턴을 수정할 수 있고 새로운 것을 수행하는 경우가 있을 수 있다는 점을 언급할 가치가 있습니다. 새 패턴을 도입하는 경우 사용자 데이터에 의해 정당화되고 잘 테스트되었는지 확인하십시오.

디자인 패턴으로 웹 디자인하기

프로토타입 및 테스트

연구 단계가 끝나면 배운 것을 잘 활용하기 시작할 때입니다. 프로토타이핑을 통해 디자인에 생명을 불어넣는 곳입니다. 프로세스에 따라 프로토타입은 단순한 저충실도 와이어프레임일 수도 있고 보다 복잡한 고충실도 디자인일 수도 있습니다.

연구의 기존 패턴을 기준으로 시작하십시오. 프로세스를 진행하면서 프로토타입이 필요한 모든 기능을 다루고 모든 사용자 목표를 설명하는지 확인하십시오. 좋은 출발점에 도달하려면 약간의 수정과 미세 조정이 필요할 수 있습니다.

프로토타입에 모든 요구 사항이 포함되어 있다는 확신이 들면 디자인의 유용성에 대한 통찰력을 얻기 위해 몇 가지 테스트를 수행할 때입니다. 전체 기능과 함께 디자인 패턴의 효율성을 검증하는 곳입니다.

프로토타입 단계에서 테스트가 매우 중요한 이유는 경우에 따라 클라이언트가 자신의 생각과 요구 사항을 명확하게 표현하거나 완전히 예측할 수 없기 때문입니다. 사용자 테스트를 통해 알려주는 대신 보여줄 수 있습니다. 참가자는 귀하가 그들의 행동을 관찰하고 배우는 동안 그들이 사이트를 실제로 사용하는 방법을 시연합니다. 이는 참가자와 디자이너 모두에게 유용합니다.

집중할 수 있도록 테스트에 들어갈 때 핵심 사용자 목표를 기록해 두는 것이 중요합니다. 테스트 참가자를 초대한 후 가능한 한 많은 사용자 앞에 디자인을 배치합니다. 시간 제약이 촉박한 경우 최소 5명의 사용자를 대상으로 테스트해야 합니다.

사용자 테스트의 주제는 그 자체로 전체 주제입니다. 시간과 예산에 따라 가장 적합한 방법을 선택하십시오. 항상 충분한 시간이 있으면 좋겠지만 항상 가능한 것은 아닙니다. 긴급 상황에서 "복도" 또는 "카페테리아 스타일" 사용성 테스트가 유용할 수 있습니다(제품을 테스트하기 위해 걸어다니는 사람들을 활용하여 유동 인구가 많은 지역에 설정한 사용성 테스트). 몇 명의 동료가 참여하더라도 테스트를 하지 않는 것보다 항상 낫습니다.

디자인 패턴이 처음부터 완벽하지 않을 가능성이 있습니다. 업데이트된 디자인을 검증하려면 변경이 필요하고 더 많은 테스트가 필요합니다. 그러나 각 테스트 단계에서 더 많은 통찰력을 얻을 수 있으며 학습한 내용을 통합하여 디자인이 최적화될 때까지 반복 및 테스트를 계속할 수 있습니다.

웹 디자인 패턴은 일관된 사용자 경험을 보장합니다. 다음은 시작하는 데 더 많은 정보를 제공하는 유용한 링크입니다.

• 사용자 테스트 종합 가이드
• Steve Krug의 로켓 수술이 쉬워졌습니다.
• 스타일 가이드 예시