brunch

라이킷 151 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김규리 Mar 28. 2017

UI패턴 마스터하기

Human eye를 위한 웹 UI 디자인

번역) UX Pin의 허락을 받고 기재하는 포스팅입니다. Special Thanks to Joey !

인터렉션 디자인에 있어 시각적 일관성에 대한 논의는 항상 UI패턴으로 향합니다.

UI 패턴은 일반적인 사용성 문제에 대한 해결책으로, 그 효과는 관심과 인기에 직결됩니다. 성공적인 패턴은 경험이없는 사용자조차도 편하게 사용하고 더 많은 사이트와 앱이 재사용됨에 따라 자급 자족하는 사이클을 생성합니다.

Source: Web UI Kit

이번 챕터에서는, UI 패턴의 구조에 대해 알아보고 사용성에 좋은 패턴을 선택하는 방법에 대해 배우게 될 것입니다.

행동유도성과 기호표현: UI패턴의 기초

행동유도성이란, 프로덕트가 할 수 있는 것을 말합니다. 기호표현은 어떤 기능인지에 대한 시각적 단서를 말하죠. 아주 디테일한 레벨에서, 모든 UI패턴은 인터페이스의 행동유도성에 대한 기호표현으로 구성되어집니다.

예를들어, 이메일 서비스란 온라인을 통해 메세지를 주고받는 것을 말하죠. 그런데 사용자들은 메일 서비스 라는 것을 어떻게 알까요?

행동유도성은 인터페이스 객체가 실제로 작동 할 수도 있다고 사용자가 생각하게 하는 것이며, 실제 작동해야합니다. 이 프로덕트가 어떻게 작동하는지는 기호표현으로 판단합니다.

Source: “Subscribe to The Propagandist Email Alerts.” Jonathon Narvey. Creative Commons.

만약에 봉투모양의 로고(기호표현)을 본다면 사람들은 이 사이트가 이메일 서비스를 제공한다고 생각할 것입니다(행동유도성). 만약에 사이트가 봉투처럼 생긴 로고를 사용하는 은행이라면, 인식된 유도성과 실제 유도성은 일치하지 않는 것이죠. 기호표현이 적절히 사용되어질때, 프로덕트는 직관적이고 친숙하게 느껴집니다. 사용자들은 이미 이것이 어떻게 기능할 지 아는것이죠. 기호표현은 이것이 의미하는 어떠한 것(문자, 도형, 컬러, 무브먼트)이라도 가능합니다.

기호표현의 중요한 이점은, 다른 사이트나 앱에서 일관적으로 사용된 기호표현은 굳이 설명을 달지 않아도 된다는 것이죠.

패턴 분류

패턴은 다양한 형태로 제공되며 다양한 용도로 사용됩니다. 첫 번째 단계로 핵심 사이트 기능 (훌륭한 사이트 UI 패턴에서 실제로 볼 수있는)을 기반으로 여섯 가지 주요 카테고리로 분류하는 것이 좋습니다.

Input, Output: 이 패턴은 사용자가 사이트와 상호 작용하거나 입력을 제출하는 방식과 사이트가 응답하는 방식 또는 피드백을 제출하는 방식을 처리합니다.

Navigating: 이 도움말은 사이트를 둘러싼 사용자의 올바른 방향을 확인하고 잃어버린 길을 찾는 방법을 알려줍니다.

콘텐츠 구조: 콘텐츠가 접근하기 쉽고 용이한가요? 논리적이고 단계적으로 콘텐츠를 분류하는 것을 돕습니다.

마찰 감소: 사이트가 마찰이나 인지의 부하 없이 어떻게 콘텐츠를 나타내나요? 이 패턴은 사용자가 편안한 속도로 사이트를 안내하도록 도와줍니다.

인센티브화: 이는 progress bar 또는 기타 게임 방법과 같이 사용자가 상호 작용하도록 유도하는 패턴입니다.이러한 디자인 패턴은 두뇌의 습관을 이용하여 사용자를 제품에 연결합니다.

소셜공유: 이는 사람들이 선호하는 모든 소셜 미디어 장소에서 당신의 사이트의 공유를 허용, 홍보 및 촉진하는 패턴입니다. 또한 사회 보장 패턴을 사용하여 사용자와의 신뢰를 높일 수 있습니다.

물론, 디자인 패턴은 창의성을 위한 청사진(도면)일 뿐입니다. 인기있는 인터렉션 디자인 모범 사례를 대표하기 때문에, UI패턴으로 시작하면 사용자들도 편하게 사용할 수 있죠.

UI 패턴 구현하기

패턴들은 사이트에 어떻게 사용되는지에 따라 분류됩니다. 아래에 논의 할 것인데, 어떤 것들은 아주 정확하게 한가지 방법으로 실행되는 반면 몇몇 패턴들은 다른 방식으로 사용되고 해석될 수 있습니다. 우리는 UI패턴 피라미드에 기초하여 패턴들을 전술적이고 전략적으로 분명하게 말할 것입니다.

1. 전술

전술적인 패턴은 가장 직접적이고 엄격한 패턴이며 흑과 백(이거 아니면 저거)인 경향이 있습니다: 로고는 모든 사이트의 왼쪽 상단에 위치하고, 모든 링크가 달린 폰트는 블루로 표시된다던지..

전술의 적용은 외부적, 내부적 일관성 모두에 달려있습니다. 패턴으로써 외부적인 것은 다른 사이트에서 온 경험에 오기 때문이고 내부적으로는 당신의 사이트 내에 모든 페이지 마다 같게 적용되어야 하기 때문입니다.

예를들어, 거의 대부분의 사이트가 그러하듯이 검색 창을 오른쪽 상단에 위치시키고(외부적 일관성). 한 페이지에서 이렇게 했다면 모든 페이지에도 이렇게 적용하도록 패턴으로 지정합니다(내부적 일관성).

Source: Yelp Style Guide

프론트엔드 스타일 가이드는 대부분 구현 패턴을 문서화합니다. 이러한 세부 정보는 개발자가 디자인을 코드화하는 방법과 디자인을 사이트 전체에서 재현하는 방법에 영향을주기 때문에 중요합니다.

2. 전략

전술 패턴 위의 단계는 UX 전략의 일부로 선택된 패턴입니다. 이 단계에서 패턴은 더욱 발전되고, 사용자가 사이트를 통해 목표를 달성하는 데 어떻게 도움을 주는지에 관심이 있습니다.

사용자가 추가 콘텐츠에 접근 할 수 있도록 하려면 Jump-To 또는 Sticky Navigation 중 어떤게 더 좋을까요? 사용자와 웹 사이트 유형을 감안할 때 사용자를 압도하지 않고 유도하는 가장 좋은 방법은 무엇입니까?

전략적 선택은 나중에 전술적 선택으로 이어집니다.

예를들어, 패턴의 전략적 구현을 하고 싶기 때문에 탭이나 여러 페이지 대신 원페이지를 선택할 것입니다. 일단 결정을 내리면, 어떤 종류의 스크롤 바를 사용할지, 어떻게 텍스트를 나누는 지 등과 같은 일련의 전술적 결정을 내려야합니다.

Spotify 와 Pinterest의 예시를 통해 동일한 패턴, 숨겨진 컨트롤이 두 가지 전략적 구현을 어떻게 할 수 있는지를 살펴보겠습니다.

두 사이트 다 사용자들이 너무 많은 선택으로 부담되지 않게 하면서도 추가적인 옵션이나 액션에 빠르게 접근하는 것이 필요합니다. UI패턴의 숨겨진 컨트롤은 확장할 수 있는 메뉴에서 추가적인 옵션을 집어 넣는것에 대한 해결책입니다.

Source: Spotify

Source: Pinterest

하지만 차이는 '무엇'이 아니라 '방법'에 있습니다. Sportify는 선택항목 위에 나타나는 short-and-sweet 메뉴를 가지고 있고 Pinterest에는 햄버거 아이콘 (다른 패턴 자체)의 내부에 숨겨져있는 포괄적인 메뉴가 있습니다.

전략적인 패턴은 외부적 일관성에 영향을 미칩니다. 오버플로우 메뉴는 좋은 UI 패턴이 아니라는 예시를 볼 수 있습니다. 대부분의 디자이너들은 패턴을 따를 것이고 패턴을 사이트 룩앤필에 일관되게 하기 위해 다른 시각적 또는 인터렉티브 요소를 적용합니다.

3. 명확한, 구체적인 사이트

몇 패턴들은 오직 특정한 사이트의 타입에만 작동하거나 사이트에 따라 다른 버전을 가집니다. 이러한 차이들은 전략과 전술이 결정되기 전에 가장 먼저 만들어집니다.

예를 들어, 디자인 에이전시를 위한 사이트를 구축한다고 해봅시다. 포트폴리오, 갤러리, 바이오그래픽, 추천서, 소셜 고리들의 페이지를 만들어야 한다는 것을 알겠죠. 이러한 페이지들을 포함해야한다는 것은 사용자들이 보통 겪었던 디자인 에이전시 사이트들의 일반적인 요소임을 알기 때문입니다. 이후에야 구현 전략을 결정한 다음 전술을 결정합니다.

물론 E커머스 사이트를 만들면 사용자들은 포트폴리오 사이트가 필요 없겠죠. 대신 카드 패턴을 통해 판매하는 제품의 이미지를 보여주는 것이 더 용이할 것입니다.

Source: Virgin America

버진 아메리카는 항공사 서비스이기 때문에 예약 형식의 UI패턴을 요구합니다. 사용자들은 이 사이트에서 넷플릭스나 CNN같은 사이트의 패턴을 기대하진 않겠죠.

사용자가 특정 유형의 사이트에서 특정 기능을 기대하기 때문에 사이트 특정 패턴은 외부 일관성에 따라 순전히 영향을받습니다.

4. 종합하여

당신이 포토그래퍼라고 가정해볼까요? 그럼 포트폴리오 사이트를 만들고 싶을거에요. 대충 다음과 같은 패턴들을 선택할 것입니다.

1. 당신의 사용자들이 기대하는 사이트를 만들고자 할 것입니다. 포토그래퍼이기 때문에 여러 샘플들을 보여주겠죠.

2. 그것들을 어떻게 보여줄것인가 - 전략에 관한 질문입니다.구식 그리드 뷰를 사용할 수 있지만 대신 이미지 회전식 슬라이드를 선택하세요.

3. 마지막으로 이미지 회전식에 사용할 기법을 결정합니다. 맨 아래의 도트 탐지기를 앞뒤로 보지 않으면 양 끝에 매우 기본적인 두 개의 화살표 만있는 미니멀리스트 방식을 취하게 됩니다. 마지막으로 이 패턴을 전체 사이트에서 일관되게 구현합니다.

당신을 위한 올바른 UI패턴 선택

매일매일 업로드되는 수천개의 패턴들이 있지만 그 모든 것이 당신의 작업물에 적합하지는 않죠.

Source: UXPorn

그중에서도 잘 선택하기 위해 4가지 스텝으로 분류할 수 있습니다.

1. 해결해야 할 문제점은 무엇일까요?

2. 같은 문제를 다른 사이트에서는 어떻게 해결했는지 찾아보세요.

3. 다른 사이트에서 솔루션의 사용을 검사하세요.

4. 올바른 사용법을 벤치마킹하여 다시 만들 수 있습니다.

몇가지 예시를 통해 과정을 살펴보겠습니다.

1. 해결해야 할 문제점은 무엇일까요?

사용자들은 여전히 당신의 사이트에 접속하고 오랫동안 머무르는데, 그 시간을 줄여주기 위해 로그인 및 가입 프로세스를 단순화하면 되겠죠. 사용자들이 그것을 신경쓰지 않도록요.

2. 같은 문제를 다른 사이트에서는 어떻게 해결했는지 찾아보세요.

당신의 사이트랑 유사하고 유명한 사이트를 디테일하게 조사해보세요. 몇몇은 Lazy signup을 사용하겠지만 그것은 해결책이 되지 않죠. 추가 기능이나 더 많은 콘텐츠와 같은 인센티브로 가입을 유도하기도 하지만 이런 방법도 모든 사이트에 맞지는 않죠.

또 다른 사이트를 둘러보다가 소셜로그인을 사용하는 것을 발견했습니다. 이게 좋은 솔루션이 될 것 같네요.

Source: Jukely

(Lazy signup, 회원가입시 인센티브, 소셜로그인은 다 다른 패턴입니다. 그중에서 당신의 사이트에 알맞게 사용하는 것이 중요하겠죠)

3. 다른 사이트에서 솔루션의 사용을 검사하세요. Spotify, Pinterest, Wunderlist와 같은 유명한 사이트들을 자세히 살펴보시고 그들이 소셜로그인을 어떻게 활용하는지도 보세요. 그 외에도 패턴을 사용하는 방법들을 봐두면 도움이 될겁니다.

Source: Wunderlist

4. 올바른 사용법을 벤치마킹하여 다시 만들 수 있습니다. 사이트마다 상황에 맞게 트위터, 구글, 링크드인을 사용하는 것을 아실겁니다. 하지만 모든 사이트가 페이스북을 포함하고 있죠. 가끔 소셜미디어의 아이콘을 사용하는 대신, Sign up with Facebook 이라는 텍스트로 표현하기도 합니다.

소셜 로그인이 인기있는 패턴이므로 사용자가 소셜 미디어 계정으로 로그인 할 수 있다는 것을 알 수 있습니다. 페이스북, 트위터, 구글은 가장 빈번히 사용하기 때문에 이것들을 포함하되, 가장 인기있는 페이스북 버튼을 제일 상단에 위치시키세요.

효과적인 UI 패턴을 발견하더라도 너무 갖다 붙이려하지마세요. UI 패턴은 일관성을 유지하는데 적합하지만 로컬 최대치에 머물고 싶지는 않습니다.

바이럴 콘텐츠 사이트를 디자인하고 무한 스크롤이 모든 콘텐츠에 액세스 할 수있는 최선의 방법이라고 판단 할 수 있습니다. 하지만, 무한스크롤이 더 좋은 경험을 제공하지만 최고의 솔루션은 아닐겁니다. 다른 방법은 브레인스토밍, 와이어프레이밍, 포로토타이핑, 테스트를 통해 결정할 수 있습니다.

UI 패턴을 일관성을위한 "안전 영역"으로 간주 한 다음 한 번에 한 단계 씩 창의적으로 시도하세요.

패턴을 알고 패턴을 존중하지만 매번 새로운 시각으로 디자인을 한다면, 디자인은 익숙해 지지만 새로운 무언가가 생겨날 여지가 있습니다.