Card-Sorting

 

1. Card-Sorting ?

Card-Sorting 은 정보구조를 알 수 있는 가장 단순하면서도 효과적인 방법중의 하나.

정렬되지 않은 아이디어 리스트에 숨어 있는 구조를 발견하는 방법.

 

Card-Sorting 은 웹사이트를 위한 사용자 정보 그룹핑을 수반 하는 방법이다. Card-Sorting의 각 Session 마다 참여자들은 웹사이트그에 대한 정보나서비스 기능들을 각 카테고리에 따라서 Grouping 함으로 Information Architecture 전반에 대한Review가 가능하다.

 

Card-Sorting 은 사용자의 관점에서 정보 공간과 각각의 아이템에 대해 그들이 어떻게 생각하고 반응하는지에 대해 알고자 할 때매우 유용하다당신이 사용자에게서 어떠한 정보가 구조화되어야 하는지알아야 할 때사용되는 최고의 방법이다그러나 구조적인 해결방법 전에 Card-Sorting 이 선행 수단이 되어야 한다.

 

Card-Sorting 은 대개 제품의 목적이 정립된 후나 그 특징이 확립되었을 때주로 사용된다그러나 Information Architecture전이나 디자인이 발전된 후에 디자인프로세스의 중간에 놓인다. Card-Sorting 은 ‘Contextual Inquiry(정황조사)’ 그리고 ‘Task Analysis’이 발전단계의 처음에 위치한다는 측면에서 두 가지 방법과 구별 된다.

 






 

2 . Card-Sorting 의 이점

l  Card-Sorting 은 사용자가 컨텐츠와 만들려고 하는 웹사이트의 정보들을 어떻게 구조화시키는지 배우는데 도움을 준다.

 

l  Card-Sorting 은 웹사이트를 구조를 만드는데홈페이지에 무엇이 놓여질지 결정하게 하며그리고 홈페이지 카테고리에 레이블에 대해서 도움을 준다.

 

l  Card-Sorting 은 만들고자 하는 사이트에 대해서 사용자를 통한 논리적인 방법으로써 정보를 구조화하는데 도움을 준다.

 

 

3. Card-Sorting 방법 분류

l  Open Card-Sorting

사용자에게 특정의 카드(리스트)가 제공되고사용자들은 주어진 리스트에 대해 그룹화한 후그룹화된 것들에 대해 이름을 부여하는 것만일 토픽의 크기(리스트의 양)가 크다면 다른 그룹에게 요청하거나다른 단계의 서브그룹으로 나누고 그 나누어진 모든 그룹에 대해 이름을 부여하는 방법.

 

l  Close Card-Sorting

사용자에게 미리 정의된 카테고리 구조 안에서 분류하는 것. open card sort 와는 반대 개념.

기존의 카테고리 구조에 추가하는 방법.

 

 

 

 

Card-Sorting Process

 

1. Card-Sorting 준비

1) User Recruiting

① Card-Sorting 의 목표는 User(사용자)가 제안된 웹사이트의 정보 공간이나 기능서비스들을 어떻게 구조적으로 이해하는지 예상하는 것이다.

② User  4명에서 10명 정도 정보구조에 대해 좋은 예상(답변)을 해줄 수 있는 User 로 섭외한다. (일반적으로 프로젝트의 성향에 맞는 User Profile 을 작성하고 그 범위 내에서 가장 조건에 근접한 참가자를 섭외한다.)

 

2) Schedule & Testing-Room

① 일정은 개인별로 각각 진행하도록 하고Participant 이 경쟁을 통한 압박 느끼지 않도록 정한다,

② 만약 Participant  조용하게 앉을 수 있고 질문에 대답할 수 있는 설비를 갖추었다면, Facilitator(진행

)는 몇 몇의 사용자와 함께 진행할 수 있다.

(적어도 한 사람에 한대의 모니터를 사용할 수 있도록 그리고 매 15분마다 참여자 개인별로 방법에 대한 소개할 수 있도록 일정을 시차를 둔다.)

③ Card-Sorting 에 대해서 Facilitator 는 적어도 한 시간 이상 충분하게 학습한 후진행하도록 한다.

 

 

2. Card-Sorting Process

실험에 참여하고 있는 동안에는 큰소리로 이야기할 것을 참여자에게 요청하며, (이러한 방법은

Usability Testing 마찬가지로 적용 된다.) 실험을 진행하면서 참여자가 말하는 것이나 손짓행동 등을

관찰함으로써 참여자가 어떠한 사고를 가지고 실험을 하는지 알기 위해 노력해야 한다.

 

이러한 과정에서 당신은 참여자의 사고와 원리에 대해서 알아가는 것이 매우 중요하다Participant 

Card Structuring 할 때일반적인 그룹과 각각의 카테고리 이름에는 구분을 위해서 컬러가 있는 카드

를 사용하는 것이 효과적이다.

 

실험 중에 Participant의 요청이나, Facilitator에 의해 10분 정도 실험 진행을 멈추고 Break time를 가

질 수도 있지만Participant  Think Aloud 할 수 있도록 동기를 부여해 주어야 한다.

마지막으로 당신이 Participant 에게 감사를 표시하고 만약 사전에 답례를 약속했다면 Payment를 지급

해주도록 한다.

 

Card-Sorting 당신의 생각했던서비스나기능정보 등의 목적을 가지고 준비된 리스트를 카드에 반영

하는 것이다리스트에 있는 모든 요소들이 카드에 나타내어지는 것은 아니며당신이 사이트에서 사용

되어지고 있는 모든 카드에 그래픽이 들어갈 필요는 없다.

 

가장 많이 사용되는 것은 Index Card로 그 이유는 카드를 통해 리스트나 Keywords 를 나누고 구조화

시키는데 다른 카드에 비해 상대적으로 장점을 가지고 있기 때문이다.

각각의 카드는 숫자와 마찬가지로 리스트의 이름을 적게 되는데 이는 후반부에 데이터를 분석할 목적으로 사용된다.

 

각각의 카드는 만들고자 하는 웹사이트로부터 도출된 한 가지 Keywords 을 가지고 있어야 한다

 

 

Step 1.  List & Index Card 만들기

1) 리스트 만들기

① 당신이 만들고자 했던 사이트(새로운 사이트)나 리스트 중의 가장 중요하거나 최신 사이트의 인

기 있는 콘텐츠의 성향이나 이슈와 동일하게 콘텐츠의 Keywords 나 정보의 형식을 리스트 한다.

② List를 만들 때에는콘텐츠 목록에 대한 List를 만들고 Review 과정을 거치는 것이 유용하다.

③ 다음으로 가장 중요한 것이나 가장 빈번하게 사용 되어진 콘텐츠를 정리 한다..

리스트를 만들 경우에는명사나 동명사의 형태로 일관된 단어로 만들 수 있도록 한다.

 

2) Index Card 준비와 적기

① Index Card에 각각의 Keywords 를 적기

각각의 Keywords 을 나뉘어진 Index Card에 적는다카드는 알기 쉽고 일관되게 한다또한컴퓨터를

통해 사후 분석 과정으로 Keywords를 리스트 할 수도 있다.

Blank Card 준비

Blank Card 는 참여자들이 생각했던 것에 대한 Keywords을 추가 시키거나 Card Sorting 했을 때만들

어진 것에 Title 을 붙이는 등참여자들이 분류한 각각의 상황에 따라 폭 넓게 활용 될 수 있다.

(카드 모서리 밑이나뒷장에 숫자를 적는다이것은 Facilitator 가 카드 분석을 시작 하려 할 때

움이 된다.)

 

* Card-Sorting 에 사용되는 카드 종류

-  Index Card

-  Post-It,

-  Paper (A4)

-  PC (Excel 을 통한 사용)

 

중요 : 너무 적은 수나 많은 수의 ,Item을 가지고 있을 경우엔 제대로 된 Card-Sorting 을 진행하기

어렵다따라서카드는 100 장이하로 준비하고일반적으로 Card-Sorting 방법에서는 40~50개가 적당

하다.

 

 

Step 2. 카드 분류하기

1) 카드 분류하기

① Participant 에게 그들이 느끼는 방법대로 카드를 그룹으로 분류를 요청한다,

② Participant 은 첫 번째 카드를 테이블에 놓고 두 번째 카드를 올려 놓게 되는데카드가 같은 그룹

에 속하지 않거나정해진 카테고리라 할지라도 자신이 중요하다고 생각되는 카드이라면각각의 위치

를 다시 정하기 시작한다.

 

*  대략 각 세션 마다 1시간으로 진행하고 만약에 카드가 좀 더 있다면 이 이상도 가능하다실행

공간은 참여자가 테이블 위에 카드를 펼칠만한 공간이 적당하고Observer를 통해 Participant 의 Task

와 Think-Aloud 시 특이점을 적도록 진행한다.,

 

 

Step 3. Grouping & Structuring 하기

1) Grouping & Structuring 하기

① Participant 가 Card Grouping 후에당신은 각 그룹에 대한 이름이나 Labels(레이블)을 요청한다.

(사용자들이 관련이 있는 카드끼리 Grouping 하게 하는 방법을 사용함으로써그룹에 대한 구조를 파

악할 수 있다.)

 

② 참가자들에게 정리된 카드를 보여주고당신은 이러한 과정이 정보의 어떤 카테고리 즉사이트의

홈페이지와 카테고리들을 무엇이라고 부를지 발견하는데 도움이 됨으로 이러한 과정을 진행 하는 것 임을 설명해 준다.

 

③ 마지막 단계에 참여자가 홈페이지에 대해 너무 많은 Group을 만들었다면일부 Group은 다시 다른

 Group과 Grouping 하도록 참여자에게 요청 한다.

 

 

Step 4. 데이터 분석

User 를 통해 얻어진 데이터를 분석할 수 있다잘된 결과는 평소에 각각의 파일에 분류되었던 카드를

합칠 수 있고전체적인 이름을 부여 해 줄 수 도 있다따라서자료의 결과는 사용자들이 기대하는

아이디어나 컨셉정보 등의 구조화로 반영 되어질 수 있다.

 

Participant 이 무엇을 했는지 빠르게 기록하기 위해 카드에 숫자를 적은 후참여자가 각 Grouping

에 적어 두었던참여자 이름이 포함된 카드에 이름을 적는다.

(그리고당신은 다음 Session 을 위해서 카드들을 다시 개편(전환)할 수 있다.)

1) 데이터 분석

① 엑셀 파일의 Spreadsheet 안에 모든 데이터를 모은 다음 데이터 사이에 패턴을 찾아낸다.

② 개인적인 테스트에 의해 함께 그룹 지어진 것으로부터 Insight를 도출한다이러한 Insight들은 같은 그룹의 대개 최종적으로 구조화 된 부분에서 나타난다.

③ Participant(참가자)가 Grouping 하고 남은 것에서도 Insight 를 도출한다각기 다른 사용자에 의해서 Keyword 들은 매우 다르게 그룹화되기도 한다.

④ 카드 그룹으로 할당 되어진 이름들에서 공통점과 다른 점을 찾는다.

⑤ 당신이 원한다면각각의 사용자에 의해 만들어진 세밀한 Site Map 에 대해서 컴퓨터 파일을 통해

 각 섹션을 만들 수도 있다.

(초기의 Keyword List 로부터 각 참여자가 만든 Grouping과 그에 대한 이름을 각각의 Keyword 안에서

다시 만들 수도 있다,)

 

 

 

 

Limitation of Card-Sorting

Card-Sorting 이 Information Architecture  Structuring Information 에 최적의 방법이긴 하지만분명

한 한계점도 있다.  

 

l  Task를 수행할만한 많은 고려사항은 해결하기 어렵다,

l  Card-Sorting 을 분석하여결과를 얻는데 매우 많은 시간이 소요된다.

l  Card-Sorting은 사용자가 어떻게 아이템을 그룹화 시키고 분류 하느냐가 매우 개인적인 것이기 때문에 극단적으로는 구조를 보편적으로 이해하고 도달하는데 어려 울 수도 있다,

 

 

용어 정리

l  Index Card진행자가 의도적으로 카드에 숫자나 기호로 그 코드를 표시해 둔 카드.

l  Facilitator (moderator)- Card-Sorting 등의 방법 등의 실험을 주관하는 진행자.

l  Observer- Card-Sorting 등 실험을 관찰하는 관찰자.

(주로 사이트를 기획디자인한 기획자나 디자이너)

l  Participant(User)- Card-Sorting 등의 실험 대상으로 실험 진행에 직접적으로 참여하는 사용자

 

 

주의점 및 특이사항

l  Participant의 연령이 너무 높거나 낮은 경우Participant 독립적으로 실험진행이 어려울 경우에는 각각의 두 명의Participant(참가자)가 함께 과업을 수행할 수 있도록 Index Card 를 준비.

 

l  선택된 Participant가 카드 분류과정을 마친 후에분류된 각 카드의 레벨이 동일하지 않을 경우다른 사용자 그룹으로부터 그려진 카드의 레벨에 맞추어 한 줄로 다시 정렬하여 나타낸다

 

 

Reference

-  Website

l  http://www.usability.gov/design/cardsort.html

-  Book

l  The Usability KIT by Gerry Gaffney & Daniel Szuc/ sitepoint

l  Observing the User Experience by Kuniavsky, Mike. Elsevier Science Ltd

Tool

l  Card-Sorting Software http://www.optimalsort.com/pages/tour.html

l  Websort(web-based)  www.websort.net/

l  CardZort  www.cardzort.com/cardzort/index.htm

l  Classified www.infodesign.com.au/usabilityresources/classified/

l  WebCat  http://zing.ncsl.nist.gov/WebTools/WebCAT/overview.html

 

Daum UXT Lab

l  http://uxtlab.tistory.com/

저작자 표시
신고
Posted by suny imoo



A bad mobile app can make or break a company’s image and revenues. In fact, Google reports that 79% of surveyed respondents indicated they would turn to a competitor’s app after a bad mobile experience.

Mobile commerce is steadily increasing with some brands such as JackThreads reporting50% of sales from mobile. Brands that are excelling at m-commerce have done so by implementing UX that creates engagement, increases conversion rates, and decreases user frustration.

In this post, we’ll take a look at what design decisions and best practices are responsible for the most successful mobile commerce apps.

1: Strive for Visual Clarity

Use Clear High Quality Images
One of the most frustrating aspects of shopping on a smartphone is the inability to get adequate details about products. The best way to present this information is often through the use of high resolution, clear images. Both Android and iOS platforms now encourage developers to use the whole screen as much as possible.

Eliminate Clutter
Pictures are great, but when there’s too much of everything else going on, it can make it hard for users to focus. To decrease possible frustrations eliminate excess wording and opt for a simple and uncluttered design.

Eliminate Clutter

Implement Key Colors
The use of a key color can help guide users through their shopping experience, indicating which actions should be taken next and which information is most important.

Implement Key Colors

Clarify Product Options
Lastly, and as equally as important as the other points mentioned, is the way you present product information to users. It should be clear what size and color options are available and easy to input desired specifications. Usually, if not too cluttered, you’ll want to include all options on the product screen.

Clarify Product Options

Using a pull-down menu can sometimes reduce clutter. The JackThreads app opted for the use of a spinner (pulldown menu) allowing for a neater and less cluttered looking screen.

Using a pull-down menu can sometimes reduce clutter

2: Create Intuitive Search and Browsing Filter

Encourage Browsing
Browsing should not be a chore. Instead the browsing pattern should nurture discovery and make it easy for users to drill down to their desired category. One way ModCloth eliminates frustration when browsing a site with numerous categories and subcategories is through reductive navigation. Here it is in action:

If the traditional expanding design for Android had been used – that is where tapping shows all children categories until tapped again – you would end up with dozens of items shown at once. This many options at once can cause the user to lose context of where they are. The reductive solution hides the parent’s siblings, so that the users ends up with a sort of visual breadcrumb trail showing where they are in the category tree.

Searching for Items
Let’s just go ahead and put this out there – you want to let users search for items. Now that we’ve established that, how can you go the extra step when helping them find an item? The use of auto-complete can make the process quicker, a plus when shopping on the go. Another option is the use of popular searches. This reminds people of items they might not have thought of initially.

Searching for Items

Use Product Carousels
Product carousels are a great way to show off a collection of items without a user having to leave the current screen. Carousels are especially useful on the homepage for special collections or on a product page for similar suggestions.

3: Encourage Social Interaction and Favorites

“We want people to want to take their mobile out of their pocket hourly just to see what’s hot on Fab right now. We believe that if people enjoy browsing and discovering on Fab, plenty of sales will happen over time.” – CEO of Fab.com

Create a Community
Fostering a community that is eager to share their favorites with others is perhaps the most important aspect of a commerce app. Although Fab.com has traditionally been a flash sale company, they have done an exceptional job at getting users to browse when they have a few minutes to spare. How have they done so? By including something as simple as a popular tab.

Fostering a community that is eager to share their favorites
Fab iPhone: Popular Feed

ModCloth reports mobile users doubling this year alone due to “the integration of the style gallery, and full sharing capabilities with other social networks“. The style gallery is a great feature that encourages customers to upload pictures of themselves wearing ModCloth garb. User photos help shoppers imagine the item in a real context. If you consider taking a route similar to ModCloth’s style gallery, go the extra step and make it easy for users to take a photo by integrating the camera in the app.

Fostering a community that is eager to share their favorites
ModCloth iPhone: Style Gallery

A common theme you’ll see in the most successful mobile apps is a feed with large high quality images and a one click ability to favorite items. This allows users to quickly scroll through items and save favorites to look at later.

Include Reviews
One of the biggest hurdles to overcome when purchasing an item online is not knowing how an item will fit or appear in person. A great way to remedy uncertainty is by encouraging customers to review purchased items. At the very least, be sure to let users access reviews. If you want to go the extra step, let them write reviews from within the app.

Include Reviews
ModCloth Android: Indepth Reviews Help Users Pick the Right Size and Item

4: Personalize the Experience

An experience is more powerful when a user feels like they have control over the situation. And with the mass amount of information they are GIVING you, why not do something useful with it? Here are some nifty examples of how mobile savvy brands are going the extra step:

ModCloth:
ModCloth recently introduced Fit for Me in their iPhone app. Fit for Me allows users to find items that customers with similar measurements rated highly.

Include Reviews

Amazon also does a great job at sharing recommendations based off of past searches and purchases. They facilitate these recommendations through the use of a recommended for you list easily found by clicking the more tab.


Amazon.com iPhone

5: Streamline the Checkout Process

Perhaps the most important component of a mobile app is the checkout process. In fact according to Jumio “66% of shoppers have abandoned a mobile purchase at checkout, and 47% reported they failed to complete a transaction because the checkout process was too difficult”. What can be done from a design standpoint to eliminate this abandonment?

Make Shopping Cart Accessible From Anywhere
Users should be able to access their cart from virtually any screen in the app.

Save Important Information
Users should be able to store information such as shipping addresses and credit card numbers. This allows them to make a simple purchase with as few clicks as possible. Another option is integrating credit card scanning abilities. This takes out the burdensome step of manually entering in credit card information (check out card.io).

Also check out Braintree which enables one touch payment in apps ranging from Fab to Airbnb.

Concluding

Next time you start designing a commerce app keep these five key goals in mind:

  1. Visual clarity
  2. Intuitive search and browsing
  3. Encouraged social interaction
  4. A personalized experience
  5. A streamlined checkout process.

Remember, all of the apps included in this piece come from companies experiencing a high percentage of revenue from mobile sales. Needless to say, there’s a lot to be learned from their success.

저작자 표시
신고
Posted by suny imoo



본문은 99 Designs의 Peter Vukovic가 작성한 '7 unbreakable laws of user interface design'을 원작자의 동의하에 번역 및 게시한 글입니다.


당신은 웹 디자이너인가요? 만약 그러하다면 당신은 UI 디자이너라는 말이기도 합니다. 그리고 미래에는 오히려 그 UI 디자이너라는 호칭이 웹 디자이너라는 이름보다 더욱 중요해질지도 모릅니다.

오늘날의 웹페이지들이 네비게이션과 메뉴 정도 만을 남긴 간단한 인터페이스라면, 기술의 발전으로 인해 우리가 앞으로 겪게 될 인터페이스는 아마 지금보다 더 유동적이고 개인에 최적화된 것들을 요구하게 될 것입니다. 피할 수 없이 받아들여야만 하는 이 흐름은, 우리가 UI 작업을 더욱더 세밀하게 해야 한다는 것을 의미합니다. 자, 그럼 우리가 정확히 어떤 것들을 기억해야 하는지 살펴보도록 하겠습니다.



1. 명확성의 법칙(Law of clarity)

유저는 확실한 의미전달이 되지 않는다면 그 인터페이스를 사용하려 하지 않습니다.

혹시 지메일(Gmail)을 사용하고 계신가요? 저는 사용한지 좀 되었는데요. 최근 업데이트 이전까지만 하더라도 페이지 상단에 굉장히 명확한 텍스트 형식의 네비게이션 바를 달았었죠. 구글 캘린더, 드라이브, 시트 등 여러 구글 서비스들을 버튼 클릭 한번으로 사용 할 수 있게 되어 있었습니다.

그런데 구글은 갑자기 애매모호한 아이콘 하나로 모든 것을 ‘단순화’ 하고자 하였습니다. 결과적으로는 대부분의 사람들이 그 아이콘을 알아보지 못했고, 지메일은 결국 유저들의 원성을 들어야만 했죠.

사람들은 자신들이 이해하지 못하는 것들은 대부분 바로 지나쳐버립니다. 그건 인간의 자연적인 본능이죠. 어떤 기능인지 추측할 수 없는 인터페이스는 피하세요. 다들 그게 무엇인지 굳이 알고 싶어하지 않을 겁니다.



2. 우선순위의 법칙(Law of preferred action)

작업의 우선순위가 무엇인지 알 수 있다면 유저로서는 훨씬 더 수월해집니다.

위의 트위터(Twitter) 화면을 보세요. 새로운 유저가 이 화면을 본다면 무엇부터 해야 한다고 생각할까요?

물론 순서대로라면 트위터에 글부터 써야 하겠죠. 하지만 오른쪽 상단에 ‘새 트위터 작성하기’ 버튼은 상당히 명확하지 않습니다(1번 명확성의 법칙을 보세요). 그리고 왼쪽 사이드바에 있는 ‘새 글 입력창’은 또렷하게 드러나지 않고 배경색에 묻혀 버리기까지 하죠.

온전히 디자인적 시각으로만 바라보았을 때, 트위터에서는 아무래도 유저들이 검색을 하기를 바라거나 왼쪽 상단의 네비게이션 메뉴를 사용하기를 바라는 것 같습니다. 저 요소들이 가장 유명하니까요.

유저들로 하여금 다음에 무엇을 해야 할지 고민하게 만들어서는 안 됩니다. 우선순위는 반드시 확실해야만 합니다.



3. 문맥의 법칙(Law of context)

유저는 자신이 수정하고 싶은 내용의 설정 인터페이스(버튼)가 문맥상 그 내용 가까이에 있기를 원합니다.

여러분은 페이스북(Facebook)에서 이름을 어떻게 수정하시나요? 오른쪽 상단의 설정에 들어간 후, 계정 설정에 들어가서, 이름을 찾아서 클릭하고, 수정 버튼을 누를 겁니다. 링크드인(LinkedIn)에서는 어떻게 이름을 수정할 까요? 이름 옆에 연필 모양 버튼을 클릭하면 끝입니다.

유저들은 항상 인터페이스가 자신들이 수정하고 싶은 내용 옆에 있기를 원합니다. 이것은 실생활에서도 마찬가지로 적용되죠. 옥수수로 팝콘을 해먹고 싶다면, 전자레인지로 가서 전자레인지에 달려있는 버튼을 누르겠죠.

만약 전자레인지가 당신에게 계단을 내려가서, 지하실 문을 열고, 전기통을 열어서, 그 안에 있는 G-35버튼을 클릭하여 팝콘 프로그램을 가동해야 한다고 한다면(페이스북의 이름 바꾸는 작업과 비슷하다고 할 수 있죠) 상당히 편리하지 않을 겁니다.

유저들을 위해 간단하게 배치하세요. 무언가가 수정, 변경, 혹은 설정이 가능한 요소라면 그 설정 버튼을 문맥상 바로 그 옆에다가 둘 수 있도록 하세요.



4. 기본 설정의 법칙(Law of defaults)

유저는 거의 대부분 기본설정을 바꾸지 않을 겁니다.

)

이 전화 벨소리에 익숙하신가요? 당연히 익숙하실 겁니다. 한때 지구상에서 가장 유명했던 벨소리이니까요. 왜냐구요? 그건 이 벨소리가 핸드폰에 기본으로 설정된 벨소리였고 대부분의 사람들이 바꾸지 않았기 때문이죠.

기본 설정이 얼마나 강력한지는 아래 예시만 보아도 알 수 있습니다.

- 대부분의 사람들은 기본으로 설정된 배경화면과 벨소리를 그대로 사용한다.

- 대부분의 사람들은(당신을 포함하여) 집 TV 세트의 기본설정을 수정하여 사용하지 않는다.

- 대부분의 사람들은 기본 설정된 냉장고 온도를 바꾸지 않는다.

기본 설정은 눈에 크게 띄지는 않지만 이미 우리 세상을 지배하고 있습니다. 그러니 반드시 기본 설정이 최대한 간편하고 효율적일 수 있도록 해주세요. 아마 대부분의 사람들은 그것을 바꾸지 않을 테니까요.



5. 유도의 법칙(Law of guided action)

유저는 당신이 어떠한 행동을 유도한다면 아마 그렇게 할 겁니다.

유저가 무언가 하기를 ‘기대’하는 것과 실제로 그것을 ‘요청’하는 것은 다릅니다.

예를 들어 처음 링크드인에서 추천(endorsement) 기능을 만들었을 때, 이 기능이 무엇인지에 대해서 유저들 스스로 알아내기를 바라지는 않았습니다.

대신 그들은 눈에 명확하게 띄는 추천 배너를 오른쪽 상단에 나타나도록 하였죠. 여기에 ‘사람은 기본적으로 서로 추천하는 것을 좋아한다’는 사실이 더해져서 결국 이 기능을 큰 성공으로 이끌었습니다.

여기서 우리가 배울 수 있는 것은, 만약 유저가 무엇인가를 하기를 바란다면 주저하지 않고 ‘물어봐야 한다’는 것입니다.



6. 피드백의 법칙(Law of feedback)

유저는 당신이 명확하고 지속적인 피드백을 줄 때 더욱 확신을 가지게 됩니다.

이것은 아주 간단한 규칙입니다. 인터페이스가 유저에게 더 지속적으로 커뮤니케이션 할 수록, 유저는 더욱 확신을 가질 수 있습니다.

지메일은 좋은 피드백 기능을 가진 서비스의 훌륭한 예입니다. 여러분이 하는 모든 행위에서 지속적인 피드백을 받을 수 있습니다. 더 알아보기(Learn more), 되돌리기(undo), 기능을 통해서는 더 깊이 배울 수도 있죠. 이것은 유저 자기 자신이 인터페이스를 통제하고 있다는 느낌을 주고 더불어 제품을 다시 사용하고 싶다는 확신을 줍니다.



7. 간편함의 법칙(Law of easing)

유저는 복잡한 과제라 하더라도 단계별로 나누어 간편하게 주어진다면 그것을 실행 할 확률이 높습니다.

왼쪽과 오른쪽의 양식을 비교해보세요. 둘 다 비슷한 양의 항목이 있지만 오른쪽이 훨씬 더 작성하기가 편하죠.

우리 모두는 길고 복잡한 형태의 양식은 지겹고 번거롭기 때문에 싫어합니다. 하지만 그것을 상단의 메뉴에 둘로 나누어 놓는다면, 훨씬 더 관리하기가 쉬워지죠.

이것이 바로 간편함의 법칙입니다. 사람들은 차라리 하나의 큰 과제보다는 10개의 작은 과제를 해결하려 합니다. 작은 과제들은 우리가 힘들다고 느끼지 않게 해 줄 뿐더러, 과제를 해결 할 때마다 성취감을 주기도 하죠.



과연 이것들은 ‘유의사항’일까요, 아니면 반드시 지켜야 할 ‘법칙’일까요?

제가 위에서 단호하게 ‘법칙’이라는 단어를 사용한 이유가 있습니다. 이 법칙들을 위반 했을 시 단 한번도 좋은 결과가 나오는 것을 보지 못했기 때문이죠.

반 농담이지만, 이 법칙들을 어길 시에는 항상 나쁜 결과가 따릅니다. 그것은 주로 이 불쾌한 인터페이스에 대해 성난 유저들이죠.

UI 디자인은 아주 세밀하고 책임이 막중한 작업입니다. 위의 법칙들은 그 역할을 수행하는데 있어 조금이라도 도움이 될 겁니다.

만약 이 7가지 UI 디자인 법칙들을 어기고자 한다면, 반드시 그에 합당한 이유가 있기를 바랍니다.




원문: 7 unbreakable laws of user interface design by Peter Vukovic

저작자 표시
신고
Posted by suny imoo



2013 was an exciting year for UX/UI design with one of the key changes being a marked move from skeumorphic to flat design. However, beware of thinking this approach is merely a move towards a minimalist style. The real point behind this change is that it is a shift of focus onto content and functionality, while doing away with superfluous elements. It is important to note that it is not merely about removing as many elements as possible in an attempt to reduce clutter. It is about deciding what to remove in order to make the product easier to understand while still maintaining a clear hierarchy of elements.

With input from designers the world over, we feel 2014 is going to be an extremely exciting year for UX/UI design. In the coming year, we will be seeing a number of impressive changes in design. We feel confident that the trends we have put forward will enrich our growing usage of mobile devices, as well as making the experience even more intuitive overall.

  • Increased sense of depth and layered information

Despite moving towards a cleaner design, by using layered interfaces the experience will be richer, giving a real sense of 3D, as well as clarifying the relationship between elements and interaction.

  • Simplifying structures

Developing a cleaner UI design also means removing any unnecessary elements. Creativity will certainly come into play with the separation of content, not through lines and dividers, but through the clever use of navigation elements and content such as images, icons as well as buttons, colors and spacing.

  • Improving interaction

Touching and gesture capabilities, as well as more gesture-based actions will become the norm. By learning a simple gesture, the user will not only simplify their experience, but will also enjoy a quicker and more comfortable interaction with the interface.

  • Thumb-focused interactions

The days of complex gestures are quickly disappearing. With mobile device use spreading to every location and occasion, it is frequently the case that the user is only able to use one hand to both hold and use the device. More thumb-focused interactions will solve this problem.

  • Using color as a tool

A visual and clear way of highlighting a call to action is the use of simple color schemes. By using a neutral palette for the general scheme, the contrast with a more vibrant color will define the call to action.

  • Improving communication with iconography

We predict a huge rise in the use of icons using a stroke & fill design pattern. Making the recognition of active tabs, toolbars and controls easier, it will also give better contrast between active and inactive sections.

  • Improving interactive feedback

Due to the specs and technical capabilities of new mobile devices, complex animations enriching the user experience can be created with more ease. It’s a great way to really engage the user, but best not to overdo it. Try to use animations only when you have a clear reason for doing so as the excessive use of animated effects can be detrimental to the experience.

  • Typeface

Typography does not escape the move towards simplicity and we foresee more focus on varying weights and dimensions of the same font, rather than using different typefaces. The objective is increasing clarity in functionality and usability.

  • Clarifying hierarchy further

We predict blur effects will be used with even more frequency in the coming year. It allows for a clear understanding of the mobile solution’s flow and hierarchy without dominating the overall design. A subtle touch in a world doing away with the excessive.

  • Phablets

Somewhere between a phone and a tablet, we think Phablets are going to be growing in popularity in 2014. With Samsung’s Galaxy Note 3, it won’t be long before Apple and Windows follow suit and release their own devices. It will open up the possibility of UX solutions which perhaps had previously only been considered for tablets.





저작자 표시
신고
Posted by suny imoo

지난 1월 16일, 바이널의 크리에이티브 디렉터로 재직 중이신 한광영님의 45번째 pxd talk가 있었습니다. ‘비즈니스를 이해하고 사용자 경험 설계를 창조하는 서비스 디자이너’라는 주제로 강연을 해주셨는데요. 이 글에서는 강의 내용을 두 가지로 나누어, 좋은 사용자 경험을 설계하기 위한 ‘비즈니스의 이해’와 ‘8가지 크리에이티브 전략’ 순으로 소개하려 합니다.





1. 비즈니스의 이해

비즈니스를 잘 이해하는 것도 디자이너의 주된 업무입니다. 디자이너의 비즈니스 영역에서 먼저 아웃소싱과 인하우스 그리고 브랜드와 관련된 용어들을 알아보겠습니다. 

*아웃소싱(outsourcing) : 기업의 내부 프로젝트나 제품의 생산, 유통, 용역 등을 외부의 제3자에게 위탁, 처리하는 것을 말한다. 기업은 핵심 사업에만 집중하고 나머지 부수적인 부문은 외주에 의존함으로써 생산성 향상을 극대화할 수 있다. [출처-위키백과]
*인하우스(In-house) : 쉽게 말해 내부에서 직접 수행하는 것을 의미합니다. 특별한 기술, 노하우의 보존과 발전이 중요하거나, 경쟁력이 있어 차별화를 꾀할 수 있는 부문은 직접 수행하여 유지 발전을 할 수 있습니다. 

아웃소싱 VS 인하우스
아웃소싱 디자이너들은 크리에이티브를 우선적으로 생각하고 인터랙션과 그래픽을 화려하게 하려는 경향이 있습니다. 반면에 인하우스 디자이너들은 안정적이고 작은 변화에 민감합니다. 인하우스를 예로 들면 카페의 시초인 Daum 카페의 초창기 모습과 지금 카페의 모습은 크게 다르지 않습니다. 기능적으로는 많은 발전이 있을진 모르겠지만 레이아웃 메뉴 구조 등은 크게 달라지지 않은 것을 알 수 있습니다. 이러한 구조에서 자칫 트렌드를 반영하려고 하면 내부적으로 많은 변화가 있어야 하겠지요. 그래서 인하우스에서는 안정성을 추구할 수 밖에 없습니다.


하나의 서비스를 만들 때는 제품의 아이덴티티가 얼마나 유지되고, 콘텐츠가 사람들과 얼마나 공감을 할 수 있는지가 가장 중요합니다. 그렇기 때문에 매번 트렌드에 맞추어 변화를 꾀하기는 사실 어려운 부분이 있을 수 있습니다. 하지만 트렌드를 역행하면 그 서비스는 본질을 잃게 됩니다. 작년 초까지만 해도 ‘스큐어모피즘(skeuomorphism)’이라는 디자인을 많이 볼 수 있었는데요. 이제는 ‘플랫(flat)’ 디자인으로 트렌드가 바뀌면서 많은 서비스들이 개편을 하곤 했습니다. 만약 계속 스큐어모피즘 디자인을 서비스에 반영했다면 사용자들은 서비스의 질이 다소 떨어진다고 느낄 수 있습니다. 왜냐하면 트렌드를 반영하지 못했기 때문이죠. 이렇게 트렌드를 반영하며 크리에이티브적인 생각을 꾸준히 가지려고 아웃소싱 기업들은 꾸준히 노력을 합니다. 그래서 많은 기업들은 여전히 아웃소싱 기업에 의지를 하게 되는 것입니다. 

좋은 서비스를 디자인하는 방법
그렇다면 어떻게 하면 좋은 서비스를 디자인할 수 있을까요? 결론부터 말하자면 뛰어난 디자인도, 높은 수준의 기술도 아닌 ‘공감대를 형성할 수 있는 디자인’을 만들어야 한다는 것입니다.

“사람들은 보는 것을 믿을까? 믿는 것을 볼까?”

어려운 질문처럼 들릴 수도 있지만 ‘종교’를 쉽게 예로 들면 많은 사람들은 종교를 가지고 있고 또 보이지 않는 것을 믿고 있습니다. 이렇듯 브랜드도 같은 맥락으로 이해한다면 보이지 않는 이미지를 연상할 수 있고 결국 제품의 구매까지 이어지게 됩니다. 기업이 소비자에게 떠올리게 하고 싶은 이미지를 Brand Identity라고 하고, 소비자들이 생각하는 기업의 이미지를 Brand Image라고 합니다. 이 두 영역이 일치할때 비로소 소비자는 브랜드에 공감을 하게 됩니다. 그리고 이 영역을 넓히는 활동을 Brand Management라고 합니다. 이러한 브랜드는 소비자에게 브랜드의 확고한 연상을 심어주어 소비자들의 꾸준한 충성도를 확보할 수 있습니다. 


Brand - 드는 생각, 떠오르는 연상
Brand Identity - 기업이 소비자에게 떠올리게 하고 싶은 이미지
Brand Image - 소비자들이 생각하는 기업의 이미지
Brand Management - 브랜드 아이덴티티와 브랜드 이미지가 겹치는 영역을 넓히는 활동 -> 소비자와 공감대 형성 


2. 좋은 경험을 하기 위한 8가지 크리에이티브 전략

앞서 비즈니스에 대한 전반적인 이야기를 들어보았습니다. 그렇다면 본격적으로 좋은 사용자 경험을 만들기 위한 8가지 법칙에 대해 알아보겠습니다. 

1) observation / 관찰 방법을 따라하지 말고 문맥을 이해하라
많은 디자이너들은 어떻게 리서치를 하지? 어떻게 디자인을 하지? 라는 질문을 많이 합니다. 정량조사, 정성조사 등과 같이 사용자를 알기 위해서는 다양한 조사 방법이 있습니다. 하지만 조사는 단지 하나의 방식일 뿐입니다. 흔히들 디자이너들은 설문지 문항을 만들기에 급급해 본질적으로 알고자 하는 키포인트를 놓칠 때가 많습니다. 클라이언트가 요구하는 것, 클라이언트만을 만족시키는 것에 초점을 두지 말고 제품에 대해 본질적인 관찰에서부터 문맥을 이해하고 디자인하는 것이 중요합니다. 



첫 번째 예시 사진을 보시면 우산에 작은 홈을 주어 쉽게 짐을 걸 수 있도록 하였습니다. 우산과 짐을 함께 들고 다니는 점이 불편한 부분에 착안하여 작은 홈 하나로 이런 재미있는 발상이 나온 것입니다. 또 장바구니를 신발 모양으로 하여 장바구니가 쓰러지지 않도록 만든 것도 독특한 발상입니다. 마지막 사진은 어린이가 칫솔을 쥘 때 세게 쥐는 사용성을 고려하여 손잡이부분을 두껍게 한 오랄비의 어린이용 칫솔입니다. 모두 제품을 사용하는 앞뒤 문맥에 집중하여 아이디어를 얻어낸 예시들입니다.


2) brand essence / 서비스 또는 제품의 신념을 설계하라
브랜드 플랫폼(Brand Platform)이 짜이면 사용자와 소통되면서 만나는 접점의 공간을 서비스의 영역이라고 합니다. 통합 커뮤니케이션을 하기 위해서는 서비스 마케팅 전략, 브랜드 전략, 서비스 전략, 서비스 디자인 전략 등이 같은 선상에서 일관성 있게 브랜드 플랫폼과 함께 가야 합니다. 그러면 충분히 사용자에게 공감을 끌어낼 수 있습니다



브랜드 플랫폼 설계 4단계가 있습니다. 1단계는 ‘연상’으로 쉽게 말해 핵심적으로 떠오르게 하는 연상입니다. 2단계는 ‘브랜드 아이덴티티’로 소비자에게 떠올리게 싶게 하고 싶은 것입니다. 이 단계에서는 진정성이 갖추어져 있어야, 보다 소비자에게 자신의 브랜드 아이덴티티에 공감을 얻을 수 있습니다. 3단계는 ‘브랜드 성격’으로 사람의 성격을 만들듯이 브랜드도 추구하고자 하는 바를 성격으로 나타내어야 합니다. 4단계는 ‘브랜드 비전과 미션’입니다. 서비스 또는 제품을 사용하는 사람들에게 어떠한 비전과 미션을 줄 것인가, 어떠한 가치를 부여할 것인가를 말합니다.

이러한 브랜드 4가지 단계는 오감의 경험이 일치할 때 더 좋은 경험을 만들어 냅니다. 예로 우리가 자주 가는 스타벅스는 단순히 커피를 파는 것이 아닌 편안한 공간과 분위기를 제공합니다. 다른 예로는 애플의 혁신, 나이키의 승리, 루이비통의 파리의 예술 등을 들 수 있겠습니다. 


3) storytelling / 누가 더 대단한 이야기를 가지고 있냐의 싸움이다


브랜드가 시장을 이끌어가는 리더가 되기 위해서는 초기 개척자로서의 역사성과 전통성을 인정 받아야 합니다. 진입 후에는 다양한 이야기 거리를 만들어 소비자와 정서적으로 공감하여 유대감을 만드는 스토리텔링 기법이 필요합니다. 웹이나 모바일에서도 충분히 스토리텔링 기법을 녹일 수 있습니다. 또한 초기 개척자는 스토리텔링이 거의 필요가 없습니다. 왜냐하면 이미 많은 히스토리를 가지고 있고 그 히스토리들이 스토리를 만들어 내어 쉽게 가치가 떨어지지 않기 때문입니다.

흔히 영화를 볼 때, 간접적으로는 브랜드 로고가 나오거나 직접적으로는 브랜드 제품과 함께 이야기 거리를 보여줍니다. 영화의 스토리에 모두가 알고 있는 브랜드를 얘기하며 영화에서도 몰입도가 높아지고 그 브랜드의 인지도 또한 높아지게 됩니다. 큰 돈을 들이지 않고도 브랜드는 자연스레 대중들에게 스토리텔링이 되고 있는 셈이지요. 휴대폰을 소재로 한 '셀룰러(Cellular)'라는 영화는 납치된 여성이 경찰의 도움과 훌륭한 휴대폰 덕택에 우여곡절 끝에 풀려난다는 내용입니다. 그 위대한 휴대폰의 정체가 엔딩 크레디트에서 밝혀지는데 알고 보니 노키아 제품으로 당시 불안한 상황의 노키아 브랜드 이미지를 끌어올리기 위해 PPL 마케팅을 활용한 것입니다. 


4) positioning / 시장의 흐름을 따라가지 말고 카테고리를 만들어라


그렇다면 어떻게 초기 개척자로서 기업의 이야기를 들려줄 수 있을까요? 1등이 될 수는 없지만 1등으로 기억될 수는 있습니다. 대형, 중형, 소형으로 나뉘었던 자동차에 준중형이라는 새로운 카테고리를 만들든가 카테고리를 세분화하여 서브 카테고리를 만들어서 1등이 되는 것이죠. 택배회사인 Fedex는 ‘빠른 배송’이라는 서브 카테고리를 만들어 인상깊은 광고를 많이 만들기도 했습니다. 




5) usability / 목적없는 무의미한 사용성을 설계하지 말자

'우리의 타깃이 누구이고 어떻게 이끌어 갈 것인가?' 에 대한 고민이 필요합니다. 브랜드와 서비스의 관념을 더해 만약 처음 서비스를 오픈했을 때의 상황을 생각해 볼 때, twitter의 ‘새로고침’ 기능이 만약 작은 회사에서 만들어졌었다면 과연 지금과 같이 보편적으로 사용되어 퍼져나갈 수 있었을까요? 처음 디자인되어 나온 새로운 서비스에 대한 혁신은 브랜드의 시도에서 나오게 됩니다. 얼리어답터들이 끌어온 트위터에서는 많은 시도가 있을 수 있지만 그렇지 않다면 새로운 시도들이 잘 통용되지 않을 수 있습니다. 



또 다른 예로 facebook과 pinterest의 검색 버튼 위치에 대한 차이점을 살펴보겠습니다. 각 서비스의 목적과 본질에 따라 같은 기능이라도 다르게 구성되어 있습니다. 이렇게 각 서비스의 본질을 이해하고 동선을 유도하여 서비스가 강조해야 하는 것 위주로 구성되어야 합니다. 이외 다른 서비스에서도 검색 버튼의 위치를 찾아보면서 서비스의 목적에 대해 파악해보는 것도 재미있는 공부가 될 수 있겠습니다. 


6) prototype&shape / Shape과 Style을 사용하라


작은 화면에 많은 양의 정보를 담은 기획서가 많이 있습니다. 이런 복잡한 정보를 시각적으로 잘 전달하기 위한 기본적인 방법으로 포토샵의 Shape과 Style 툴입니다. 이런 툴을 활용하게 되면 무엇이든 간단하게 그릴 수 있고, 그래픽적으로 보다 수월하게 표현할 수 있습니다. 


7) competition / 경쟁을 바라보는 시각을 바꿔라


우리는 무한 경쟁 시대에 살고 있습니다. 하지만 꼭 누구를 밟고 올라서서 경쟁에서 이기고 살아남는다는 것은 보기에도 좋지 않고 밟고 올라가야 하는 이에게도 부담스럽습니다. 그러한 소모식 경쟁은 정말 무의미하다고 느껴집니다. 진정한 경쟁이란 내가 노래를 부를 때 많은 사람들이 와서 환호해주는 것이 진정한 경쟁이라고 생각합니다. 


8) why? / 왜?라고 끊임없이 탐구하고 감성을 더하라


커뮤니케이션의 구조 - Why? How? What?

대부분의 사람들은 What에서 대화가 끝납니다. ‘너 무슨 일해?’, ’응, 나 디자인해!’ 한번 더 나아가 How로 대화를 하게 되면 ‘디자인은 뭐 하는 거야?’까지 이어질 수 있습니다. 이렇게 What과 How의 대화만 한다면 서로 공감대를 형성할 수 없습니다. 하지만 Why까지 대화를 하게 되면 ‘디자인은 왜 해?’로 대화를 할 수 있습니다. 왜 그 일을 하는지 알아야 그 사람에게 공감하게 되는 것입니다. 만약 애플이 ‘우리는 훌륭한 컴퓨터를 만듭니다. 그것은 아름다운 디자인이고 편리합니다’라고 했을 때, 크게 감동을 받지 않습니다. 하지만 ‘우리가 하는 모든 것들과 우리는 기존 현상에 도전하고 다르게 생각한다는 것을 믿습니다. 기존 현상에 도전하는 우리의 방식은 제품을 아름답게 디자인하며 간단하게 사용할 수 있고, 편리하게 만드는 것입니다.’라고 애플은 말하고 있습니다. 이러한 애플의 커뮤니케이션은 소비자에게 애플의 혁신을 끊임없이 이야기하며 공감대를 형성합니다. 


글을 마치며


비즈니스의 전반적인 이해와 함께 사용자 경험 설계를 기초하여 한광영님만의 크리에이티브 전략 8가지에 대해 들어 보았습니다. 한광영님께서는 깔끔한 장표와 많은 예시로 강연을 해주셔서 보다 쉽게 들을 수 있었습니다. 특히 서비스를 디자인하는데에 무엇보다도 ‘공감할 수 있는 디자인’을 많이 강조를 해주셨습니다. 서비스를 대하는 디자이너만의 철학도 함께 엿볼 수 있었습니다. 그 외 궁금하신 점이 있으시면 한광영님의 블로그에도 많은 강의자료가 수록되어있습니다. 2014년 첫 pxd talk에 좋은 강연을 해주신 한광영님께 감사드리면서 이번 포스팅을 마치겠습니다.

[본 포스팅에 사용된 이미지는 한광영님의 발표자료 중 일부를 발췌했습니다]

저작자 표시
신고
Posted by suny imoo

플랫디자인,

요즘 디자인 커뮤니티에서 끊이지 않는 화두입니다. 많은 디자이너가 플랫디자인에 대해 굉장히 싫어하거나 부정적이기 때문입니다. 좋은 디자인은 편의성에 중점을 두고 만들어집니다. 플랫디자인은 특히, 이 편의성에 중점을 둔 덕분에 유행되었다고 보지만 모든 프로젝트에서 적용되지 않기 때문에 꼭 적용할 필요는 없습니다. 이런 플랫디자인에는 차별화된 5가지 특징들이 있습니다. 그럼 차별화된 5가지 특징을 어떻게 적용하는지 요소별로 살펴보겠습니다.

1. 적은 효과

flat-design-02
flat-design-03

플랫디자인은 이름처럼 간단하고 편평한 모습의 2D 디자인입니다. 이는 화려한 효과를 뺀 콘셉트입니다. 그래서 이미지 프레임이나 아이콘 등 모든 요소에 그림자와 엠보싱, 그라데이션을 통한 깊이감 등의 효과를 크게 쓰지 않았습니다.
현실감 있어 보이게 하는 요소나 3D처럼 보이는 스큐모픽디자인(Skeuomorphicdesign 역주: 그동안 애플의 디자인 철학과도 같이 사용된 디자인)도 추가되지 않습니다.

플랫디자인은 뚜렷한 특징의 외관을 가지고 있으므로 별다른 효과를 주지 않습니다. 그래야 사용자의 쉬운 이해와 상호작용이 따르는 게 되며, 직관적인 설계 및 사이트 구조의 명확한 감각에 중점을 둠으로써 성공적인 플랫디자인 프로젝트를 이끌게 됩니다. 많은 웹사이트에서 플랫디자인의 스타일을 사용하고 있지만, 웹사이트보다 에플리케이션이나 모바일 디자인에서 더 인기가 있습니다. 작은 화면에서 작은 버튼이나 옵션을 쉽고 직관적으로 사용할 수 있게 만들어주기 때문입니다.

2. 심플한 요소

flat-design-04

flat-design-05

flat-design-06

flat-design-07

플랫디자인은 버튼 및 아이콘과 같은 간단한 UI에 많이 사용됩니다. 디자이너는 원이나 사각형과 같은 간단한 모양을 활용하고 도형의 모서리는 각이 지거나, 일정한 곡률의 라운드를 주기도 합니다.

각 UI 요소는 이용하기 쉽게 할 수 있어야 합니다. 디자인의 설명이 적고 사용자에게 직관적이어야 상호작용이 잘 될 수 있기 때문입니다. 콘텐츠는 심플한 스타일링뿐만 아니라, 이용 촉진을 위해 클릭하고 싶어지도록 버튼의 색상을 대담하게 씁니다. 하지만 간단한 요소와 심플한 디자인을 혼동하지 마십시오. 플랫디자인의 디자인 자체가 심플해 보일 뿐이지 다른 유형과 마찬가지로 디자인 개념과 기획이 간단하지는 않습니다.

3. 타이포그래피

 flat-design-08
 
flat-design-09
 flat-design-10

심플한 특성을 가진 플랫디자인에서 타이포그라피는 매우 중요합니다. 글씨체는 심플한 디자인과 일치해야 합니다. 화려한 폰트는 매우 심플한 디자인에서는 이상하게 보일 수 있습니다. 하나의 디자인 콘셉트는 비주얼과 폰트의 일정한 스타일을 가지고 있기 때문에, 최종 결과물에는 대담하고 간단하게 효과적인 폰트가 표현될 수 있어야 합니다.

플랫디자인을 사용할 때에 사이트의 기본 타이포그래피를 위해 변화와 굵기가 다양한 산세리프형 폰트군(역주: 자획 끝 부분에 돌출 선이 없는 글자나 숫자)을 참고하면 좋습니다. 예술적 요소로 참신한 글꼴로 특수서체의 사용은 무게 중심이 치우칠 수 있으므로 주의해야 합니다.

4. 컬러

flat-design-11

  flat-design-12
flat-design-13

색상은 플랫디자인에서 가장 큰 비중을 차지합니다. 다른 디자인 보다 색을 과감하게 사용해서 더 밝고 화려하기 때문입니다. 게다가 대부분 두 세가지 색을 사용해서 단순함을 주는 반면 플랫디자인은 6~8가지 색까지 사용하고 있는데 채도가 높은 색상은 활기차 보이기 때문에 기본 및 보조 색으로도 많이 활용합니다. 특히 예전에 유행했던 색상들, 자몽색을 포함해 보라색, 녹색 및 파랑색의 인기가 높습니다.

5. 미니멀한 접근

 flat-design-14
  
flat-design-15
flat-design-16
플랫디자인은 본질적으로 간단하고 심플할 때 더 잘 표현 됩니다.

디자인에 전체에 많은 이야기를 담는 것 보다는 간단한 색상 및 텍스트로 하는 것이 좋고 시각적인 면을 강조하고 싶으면 사진을 이용하는 편이 더 낫습니다.

플랫디자인을 이용한 svpply와 같은 일부 사이트에서는 간단한 배경에 콘텐츠를 배치하여 표현했습니다.

마치며…

flat-design-17
flat-design-18
flat-design-19
flat-design-20 flat-design-21

플랫디자인은 편평한 스타일의 기본 테마가 사용되지만 일부 효과를 넣기도 합니다. 예를 들어 아이콘에 그라데이션을 넣거나 그림자를 넣기도 합니다. 이렇게 디자인 할 때 한 효과를 해당 콘텐츠에 적용할 수 있기 때문에 더 다양하게 작업할 수 있습니다. 디자이너들은 이렇게 추가된 부분이 깊이가 있고 짜임새가 있기 때문에 호의적이고, 사용자 또한 이런 스타일이 덜 날카로워 보이고, 적절한 상호작용을 유도하는데 도움이 되어 호의적인 반응을 보인다고 생각합니다.

 출처: Principles of Flat Design


저작자 표시
신고
Posted by suny imoo


근래 몇년 간, 사용자 경험 디자인(User Experience Design)은 웹 디자인 커뮤니티 사이에서 여러 성공 사례들을 토대로 큰 이슈로 떠올랐습니다.


quotient.net


웹사이트에서의 UX 디자인이란? 사용자가 한 사이트에서 경험할 수 있는 모든 것들을 통틀어서 말하는데요, 다른 말로 하자면 사이트의 비주얼 레이아웃이라든지, 정보를 더 쉽게 접할 수 있는 정보 구조, 유용성과 편리함, 그래픽, UI 등 모든 것을 커버 한다고 말할 수 있습니다. 또한, UI 디자인과, HCI(Human Computer Interaction : 인간-컴퓨터간의 상호대화)도 UX 디자인에 속해 있습니다.


www.mogensense.com


UX 디자인의 유래는 1940년대 후반, 기계들이 조금 더 복잡하고, 일상생활에서 쓸 정도로 일반적이지 않았을 시절로 거슬러 올라갑니다. 하지만 UX 디자인이라는 명칭이 생기고, 컴퓨터 사용에 관한 디자인 이라는 대략의 콘셉트가 잡힌 것은 1990년도 즈음이었습니다.

UX 디자인은 하나로 설명할 수 없는 종합적인 디자인 필드로써, 사회학적인 측면과 심리학적인 측면도 생각하며, 산업디자인과 인지과학적인 측면까지도 모두 커버하고 있는 디자인 필드입니다. 


UX 디자인에 좋은 시점 (A good time for UX)

왜 지금이 UX 디자이너가 되기 적합한 시기인가에 대한 가장 큰 이유는, 많은 기업이 UX 디자인을 점점 더 강조하고 있기 때문입니다.

여러분 주위에 가까이 있는 애플매장이야말로 다른 곳을 들여다볼 필요도 없을 만큼 좋은 UX 디자인을 가장 잘 실현해 놓은 장소라고 말해드릴 수 있는데요, 정말 세심한 디테일 부터 하나하나 신경을 쓴, 그 어떤 것도 “우연히", “그냥" 거기에 놓았다고 말하게 할 수 없는 좋은 UX 디자인을 보여주고 있습니다.

여러분이 만약 애플매장을 한 번이라도 들어가 보셨다면, 매장에 들어선 순간의 그 기분을 아실 거라 생각됩니다. 뭔가 안전한 기분, 좋은 기분. 최고 성능의 기술들이 여러분을 둘러 싸고 있고,  도움이 필요하다면 바로 도움을 요청할 수 있으며, 많은 사람들이 이야기하던 기기들을 직접 만지며 놀고, 느껴볼 수도 있고, 심지어 물건을 사고 싶다면 길게 줄을 서서 기다리지 않아도 됩니다.

엄격히 말하자면 이것이야말로 효과가 있는 판매를 위한 디자인 (Retail Experience Design)이라고 말할수 있습니다. 그러나 결과적으로 그 원칙은 같습니다.

그 어느 누구가 반짝반짝하고 예쁜 애플매장에서 새 컴퓨터를 사는 것보다 월마트나 베스트 바이 같은 매장에서 사는 것이 더 좋다고 말할 수 있을까요?

UX 디자인의 온라인 성공사례를 들여다보자면, 아마존(Amazon)의 원클릭 구매(1-Click Checkout) 방식은 아마존의 전환율(Conversion rate)을 아주 크게 상승시켰습니다.

유저들의 구매 경험은 향상 되었고, 아마존은 많은 상들을 싹쓸이해갔죠.

이러한 성공 사례들은 다른 기업들로써 자사의 유저 익스퍼리언스, 즉 사용자 경험 퀄리티를 향상 시키기 위해 더 많은 UX 디자이너들을 채용하거나 컨설팅 등을 받게끔 하였습니다.

사용자 경험(User Experience)이란? 여러분의 고객들이 여러분의 제품을 사용할 때 최고의 경험을 할 수 있게끔 만들어 주는 것, 그리고 그 고객들이 무엇을 찾고 있던지 고객의 입맛에 맞게끔, 그것이 다른 어떤 특별한 것이라든지, 아니면 평상시에 봐왔던 것처럼 편안하고 익숙한 것들 이라든지 등을 적절하게 제공하게 해줄 수 있는 것입니다.


uxmyths.com


왜 지금? (Why now?)

그렇다면 어째서 기업들은 5년 전이 아닌 지금 더 UX 디자인 분야에 투자를 하는 걸까요?

그 이유는 간단합니다. 지금 이 순간, 더욱 더 많은 기업들이 똑같은 시장에 비슷한 제품들을 개발해 내고 있기 때문이고, 기업들은 그것에 대항할 뾰족한 대안이 필요했던 것입니다.

다시 한번 애플을 들여다보겠습니다. 삼성, HTC 그리고 다른 기업들은, 애플사의 아이폰에 대항할 각기 다른 레벨의 스마트폰들을 개발해 내었습니다. 이 때문에 애플은, 그들보다 조금 더 앞서나갈 방도가 필요했고, 그들은 그렇게 해내었습니다. 애플은 인터페이스, 애플리케이션과 iTunes store, 오프라인 매장 등을 모두 포함시킨 그들의 UX에 집중하였습니다.

고객들은 그들의 디테일에 조금씩 주목하기 시작했고, 좋은 폰을 사는 것도 좋지만 그보다 더 한 것들을 요구하기 시작했습니다. 그들은 구매를 즐길 수 있길 원했습니다. 특히, 가격대가 높은 제품들을 구매할 때 말이죠.

더욱 더 많은 기업들이 UX에 투자하기 시작한 또 다른 간단한 이유가 있습니다. 이득이 되기 때문이죠. UX 디자인에 특별하게 주의를 기울인 다른 기업들이 성공하는 사례들을 보며, 기업들은 서로서로 더 많은 변화를 주기 위해 이 분야에 돈을 쓰기 시작한 것입니다.

규모가 커다란 디자인 회사들은 정규직 UX 디자이너들을 채용하거나, 아예 CXO(Chief Experience Officer, UX 디자인 총 책임자)를 앉힌 부서를 새로 만들기도 하지만 규모가 작은 디자인 회사들은 회사가 필요로 할 때마다 UX 디자인에 능통한 컨설턴트들을 채용합니다.

이처럼 각 기업의 규모를 떠나 UX 디자인은 각 기업들의 브랜딩 전략에 아주 중요한 역할을 차지합니다.


견고한 UX는 곧 혁신이다. (Solid UX means innovation)

좋은 UX 디자인이란, 단순히 고객을 즐겁게 한다는 의미뿐만 아니라, 다른 사람들이 생각지도 못한 새로운 것을 시작한다는 중요한 의미로서도 생각 할 수 있습니다.

아마존은 그 어떤 누구도 생각지 못한 원클릭 주문방식 (1-Click checkout process)를 생각해 내었고, 애플사의 첫 번째 아이폰이 나오기 전까지, 단순 모바일 인터페이스라는 것은 존재하지 않았습니다. 태블릿 PC들은 애플사의 아이패드가 나오기 전에도 존재했었지만, 애플은 고객들에게 태블릿 PC를 왜 구매해야 하는지에 대한 동기를 부여해 주었습니다.

애플이 세계에서 가장 혁신적이고, 최고의 UX 디자인을 구현하는 기업중에 하나로 꼽히는 것은 절대 우연이라고 할 수 없습니다. 그리고 다른 큰 유명 기업들의 UX 디자인 콘셉트가 성공 한 것 또한 우연이라고 할 수 없습니다.

이러한 사례들은, 작은 디테일에도 얼마나 주의를 기울이냐에 따라 다른 결과를 초래 할 수 있다는 것을 잘 보여주고 있습니다.

지금 현재, UX 디자인에 일찍이 신경을 썻던 기업들은 그때의 위험과 비용 등을 감수하여 얻은 이득을 톡톡히 누리고 있습니다.


어떻게 도움이 되는가? (How is this good for you?)

여러분이 굳이 이 일을 하기 위해 천재가 될 필요는 없습니다. 현재 UX 디자이너들의 수요가 많기 때문이죠. 잘 알려진 구직 사이트나 프리랜서 사이트들에서 UX 관련 일들을 잠시만 검색해 보아도 수백 개의 UX 디자인 관련 정보들을 보실 수 있으실 겁니다.

또 하나 기억해야 할 점은, 주로 팀으로 구성되어 진행하던 UX 디자인 관련 일들이 줄어 들음에 따라, 개인에게 요구하는 스킬들이 늘어나고 있는 추세라는 것입니다.

처음 듣기엔 굉장히 부정적으로 들릴지 모르지만 다른 시각으로 보자면 UX 디자이너가 되기 위해선 여러분은 우선 미리 그래픽이나 웹, 멀티미디어 디자이너이어야 한다는 것 입니다. 다시 말해 여러분은 하루 아침에 아무런 경험도 없이 UX 디자이너라는 직업을 가질 수 없습니다.

여러분이 UX 분야를 전문적으로 다루기 위해선, 디자인 필드에서의 폭넓은 경험이 필요 합니다. 다른 말로, 좋은 UX 디자이너들은 “한 가지 스킬” 만을 가지고 있지 않습니다.

다행히도, UX 디자이너를 구하는 구인광고 들에는 항상 여러 스킬을 구현 할 수 있는 디자이너를 찾는다는 점을 분명히 해 놓고 있습니다.

요즘은 약간의 코딩을 할수 있는 그래픽 디자이너와, 백엔드(Back-end) 개발을 조금이라도 구현할 수 있는 웹 디자이너들을 요구 하고 있습니다.

이 말은, 더 많은 스킬들을 가지고 있을수록 일을 구할 전망이 좋아진다는 뜻이 됩니다. 거기에 UX 디자인을 스킬로 더 추가 할 수 있다면 여러분이 일을 구할 수 있는 더욱 더 큰 가능성이 생기게 될 것입니다.


blog.uxpin.com



이야기의 핵심을 정리하면서...

지금 이 시점, UX 디자인 시장의 수요가 커지고 있다고 하지만 그만큼 경쟁도 치열해지고 있습니다. 좋은 UX 디자이너가 되는 것은 결코 쉬운 선택이 아니지만 그만큼의 큰 보상이 뒤따릅니다. 이유는 UX 디자인이라는 필드가 다른 여러 디자인 필드들을 아우르는 것이고, 또 그만큼 각기 다른 스킬들을 요구하는 프로젝트들이 있기 때문입니다. 그리고 여러분이 가지고 있는 개인의 스킬들, 코딩이나 그래픽 디자인 등은 언제나 그것들을 필요로 하는 시기에 그 빛을 발휘하게 될 것입니다.

만약 여러분이 아직 UX 디자인에 뛰어들 준비가 되지 않았다면, 어쩌면 지금이 시작해야 할 때인지도 모릅니다. UX적인 시각에서 여러분의 포트폴리오를 들여다 보며 지금이라도 사용자 경험, UX를 중심을 생각하며 작업해 보십시오. 어느 순간 UX 디자인에 한 걸음 더 다가간 자기 자신을 발견하게 될 것입니다.




원문 링크) Why now is the right time to become a UX designer


<번역>

Staff Editor : Jihae Lee | http://www.facebook.com/jihae.lee.129


※ 본 기사는 웹진 '디자인로그(designlog.org)' 독자와 페이스북 'Design' 페이지 팬들이 디자인 인사이트를 넓히는데 도움을 드리기 위해 해외 디자인 트렌드 매거진과 블로그 기사를 바탕으로 세 분의 Staff Editor가 한국어로 번역하여 제공되고 있습니다.

콘텐츠의 모든 저작권은 원문 링크의 해당 블로그에 있음을 밝혀 둡니다.    



원문: http://www.designlog.org/m/2512435



저작자 표시
신고
Posted by suny imoo

원문: http://www.slideshare.net/yan117/ui-ixd-connected-car-trend
저작자 표시
신고
Posted by suny imoo


랭키닷컴 보고서 "인터넷 쇼핑, 모바일 소셜커머스 적합"

(서울=연합뉴스) 고상민 기자 = 국내에서 모바일 소셜커머스 앱에 접속하는 이용자 수가 최근 포털 시장점유율 2위인 다음을 앞지른 것으로 나타났다.

시장조사 기업 랭키닷컴은 1월 첫째 주(5∼11일) 쿠팡, 위메프, 티몬의 모바일 앱 이용자 수가 각각 각 802만, 673만, 641만 명으로 집계돼 모두 포털 다음(615만)을 추월했다고 27일 밝혔다.

1월 2주째에도 소셜커머스 3사의 상승세는 이어졌다. 쿠팡의 이용자 수는 포털 네이트의 약 3배인 911만 명으로 훌쩍 뛰었다.

랭키닷컴이 최근 발표한 '2013 e-Commerce 분석보고서'에 따르면 소셜커머스 3사의 모바일 앱 월평균 이용자 수는 오픈마켓의 1.9배로 나타났다. 

월평균 신규 설치자 수도 오픈마켓이나 종합쇼핑몰을 크게 앞서고 있어 향후 경쟁구도에서 유리할 것으로 전망된다고 랭키닷컴은 분석했다.

랭키닷컴 최청선 팀장은 "소셜커머스 성장의 핵심은 아무 곳도 거치지 않고 일단 방문하고서 구매를 결정하는 이용패턴에 있다"며 "가격비교 사이트 방문 → 최저가 검색→쇼핑몰 선택→구매로 이어지는 쇼핑패턴이 아직 기존의 모바일 쇼핑몰에서 자리 잡지 못했기 때문에 소셜커머스 사용이 증가하는 것으로 보인다"고 말했다.



원문: http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&oid=001&aid=0006723106&sid1=001



저작자 표시
신고
Posted by suny imoo


Touch interactions


Windows 8.1 provides a concise set of touch interactions that are used throughout the system. Applying this touch language consistently makes your app feel familiar to what users already know. This increases user confidence by making your app easier to learn and use. For information on touch language implementation, see Gestures, manipulations, and interactions.

 

User interacting with tablet by using touch

 

In this article:

Design principles for touch

Provide immediate feedback

Increase user confidence by providing immediate visual feedback whenever the screen is touched. Interactive elements should react by changing color, changing size, or by moving. Items that are not interactive should show system touch visuals only when the screen is touched.

Content follows finger

Elements that can be moved or dragged by a user, such as a canvas or a slider, should follow the user's finger when moving. Buttons and other elements that do not move should return to their default state when the user slides or lifts their finger off the element.

Keep interactions reversible

If you pick up a book, you can put it back down where you found it. Touch interactions should behave in a similar way—they should be reversible. Provide visual feedback to indicate what will happen when the user lifts their finger. This will make your app safe to explore using touch.

Allow any number of fingers

People often touch with more than one finger and don’t even realize it. That's why touch interactions shouldn’t change radically based on the number of fingers touching the screen. Just like the real world, sliding something with one or three fingers shouldn't make a difference.

Touch language

Press and hold to learn

This touch interaction causes detailed information or teaching visuals (for example, a tooltip or context menu) to be displayed without a commitment to an action. Anything displayed this way should not prevent users from panning if they begin sliding their finger.

Important  Press and hold can be used for selection in cases where both horizontal and vertical panning is enabled.

Tap for primary action

Tapping on an element invokes its primary action, for instance launching an app or executing a command.

Slide to pan

Slide is used primarily for panning interactions but can also be used for moving (where panning is constrained to one direction), drawing, or writing. Slide can also be used to target small, densely packed elements by scrubbing (sliding the finger over related objects such as radio buttons).

Swipe to select, command, and move

Sliding the finger a short distance, perpendicular to the panning direction (where panning is constrained to one direction), selects objects in a list or grid. Display the app bar with relevant commands when objects are selected.

Pinch and stretch to zoom

While the pinch and stretch gestures are commonly used for resizing, they also enable jumping to the beginning, end, or anywhere within the content with semantic zoom. Semantic zoom provides a zoomed out view for showing groups of items and quick ways to dive back into them.

Turn to rotate

Rotating with two or more fingers causes an object to rotate. Rotate the device itself to rotate the entire screen.

Swipe from edge for app commands

App commands are revealed by swiping from the bottom or top edge of the screen. Use the app bar to display app commands.

Swipe from edge for system commands

Swiping from the right edge of the screen reveals the charms that expose system commands.

Swiping from the left edge cycles through currently running apps.

Sliding from the top edge toward the bottom edge of the screen closes the current app.

Sliding from the top edge down and to the left or right edge places the current app on that side of the screen.

Note  Users can perform direct manipulations like the slide-to-pan, pinch-to-zoom, and turn-to-rotate interactions simultaneously and with any number of touch points.

Touch targets

Size vs. efficiency: Target size influences error rate

Chart that shows how touch errors decrease for larger targets.

There's no perfect size for touch targets. Different sizes work for different situations. Actions with severe consequences (such as delete and close) or frequently used actions should use large touch targets. Infrequently used actions with minor consequences can use small targets.

Target size guidelines

7x7 recommended minimum size

7x7 mm: Recommended minimum size

7x7 mm is a good minimum size if touching the wrong target can be corrected in one or two gestures or within five seconds. Padding between targets is just as important as target size.

9x9 recommended size for accuracy

When accuracy matters

Close, delete, and other actions with severe consequences can’t afford accidental taps. Use 9x9 mm targets if touching the wrong target requires more than two gestures, five seconds, or a major context change to correct.

5x5 minimum size

When it just won't fit

If you find yourself cramming things to fit, it’s okay to use 5x5 mm targets as long as touching the wrong target can be corrected with one gesture. Using 2 mm of padding between targets is extremely important in this case.

 

Accessibility

As you plan the UI and the interactions supported by your app, keep in mind the wide range of abilities, disabilities, and preferences of your users. Follow accessible design principles from the beginning to help make your app accessible to the widest possible audience. For more info on planning for accessibility, see Guidelines for accessibility.

Fingers sizes

People often blame themselves for having "fat fingers." But even baby fingers are wider than most touch targets.

The image on the left shows the width of the average adult finger is about 11 millimeters (mm) wide, while a baby's is 8 mm, and some basketball players have fingers wider than 19 mm!

Chart that shows the wide variation in finger widths

Posture and grip

Designing for touch is more than designing what’s displayed on the screen. It requires designing for how the device will be held (grip).

Typically, different people have a few favorite grips when holding a tablet.

The current task and how it’s presented usually determines which grip is used. However, the immediate environment and physical comfort also affect how long a grip is used and how often it’s changed.

Try optimizing your app for different kinds of grips. But if an interaction naturally lends itself to a specific grip, optimize for that.

Interaction areas

Because slates are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.

Interaction areas

Reading areas

Content in the top half of the screen is easier to see than content in the bottom half, which is often blocked by the hands or ignored.

Reading areas

Common grips

GripGrip and interactionDesign considerations
Grip with one hand and interact with the otherOne hand holding, one hand interacting with light to medium interaction
  • Right or bottom edges offer quick interaction.
  • Lower right corner might be occluded by hand and wrist.
  • Limited reaching makes touching more accurate.
  • Reading, browsing, email, and light typing.
Grip with both hands and interact with thumbsTwo hands holding, thumbs interacting with light to medium interaction
  • Lower left and right corners offer quick interaction.
  • Anchored thumbs increase touching accuracy.
  • Anything in the middle of the screen is difficult to reach.
  • Touching middle of screen requires changing posture.
  • Reading, browsing, light typing, gaming.
Both hands interactingDevice rests on table or legs, two hands interacting with light to heavy interaction
  • Bottom of the screen offers quick interaction.
  • Lower corners might be occluded by hands and wrists.
  • Reduced need for reaching makes touching more accurate.
  • Reading, browsing, email, heavy typing.
Passive interaction with no gripDevice rests on table or stand, with or without interaction
  • Bottom of screen offers quick interaction.
  • Touching top of the screen occludes content.
  • Touching top of screen might knock a docked device off balance.
  • Interaction at a distance reduces readability and accuracy.
  • Increase target size to improve readability and precision.
  • Watching a movie, listening to music.

 

Related topics


저작자 표시
신고
Posted by suny imoo
블로그 이미지
UX Designer facebook.com/jsy.1005

카테고리

imoo (190)
숨통 (0)
In Lens (56)
Design (124)
레시피스크랩 (8)

Back to top