chapter 02. 사용자 중심의 디자인

한빛미디어㈜ - 1 -

IT COOKBOOKIT COOKBOOK

academy.hanb.co.kr한빛미디어㈜ - 1 -


Chapter 02. 사용자 중심의 디자인





사용자 중심의 디자인이 중요한 이유를 이해한다 .-> 항상 사용자 중심이 되어야 한다 !!

웹 사이트에서 유용성이란 무엇인지 이해한다 .인터랙션과 인터페이스 디자인의 정의를 알아본다 .자주 접하는 사이트 중 유용성을 고려하여 설계된 인터페이스 사례를 알아본다 .

학습목표




IT COOKBOOKIT COOKBOOKSection 1: 사용자 중심의 디자인

웹에서의 사용자 중심의 디자인 (User Centered Design) 사용자 중심의 디자인이란 ?

사이트 구축 시 가장 중점을 두어야 할 부분은 바로 사용자이다 . 사용자를 항상 마음속에 생각하고 사용자 중심의 디자인을 하도록 노력해야 한다 . 사이트는 파워유저나 초보자를 제외한 일반사람들을 중심으로 구축되어야 하며 , 또한 그들 개개인은 다르다는 점을 항상 염두에 두어야 한다 .

먼저 타켓을 설정해야 - > 어떻게 하면 이 타켓이 쉽게 접근할 수 있을까 등으로 좁혀가야 ,,





웹에서의 사용자 중심의 디자인 (User Centered Design) 유용성 (Usability) 이란 ?

유용성이란 특정한 사용환경에서 특정그룹의 사용자가 특정한 목적을 달성하기 위해 효과적이고 , 효율적이며 만족스럽게 사이트를 이용하는 범위이다 .

사용자 중심의 사이트는 인터뷰 , 테스트 , 디자인의 반복적인 과정을 통해서 계속적인 보완작업이 이루어져야 한다 .

유용한 사이트의 명확한 요건을 없다 . 유용성은 사이트 사용자에 따라 다양하다 .

어떤 것을 추구해야 하는가 .. 정의가 모호





웹에서의 사용자 중심의 디자인 (User Centered Design) 제이콥 닐슨 (Jakob Nielsen) 의 유용성 판단 기준

습득가능성 (Learnability) 기억가능성 (Rememberability) 웹사이트를 얼마나 잘 기억할 수 있는가 효율성 (Efficiency of use) 사용하기 쉽게 신뢰성 (Reliability in use) 특히 금융권에서 중시됨 사용자 만족도 (User satisfaction)

외울필요없음





연습문제

각자 유용한 사이트 사례를 제시해 보고 그 이유를 설명해 보자 .

=> 할 필요없음





인터페이스 디자인에서의 유용성 사용자 인터페이스 (User Interface) 란 인터페이스 개념 중요

이 버튼을 누르면 이게 나옵니다 같은 거

사용자가 시스템에 입력하는 것과 시스템이 사용자에게 보여주는 출력화면을 합쳐서 사용자 인터페이스 라고 한다 .

인터페이스 디자인은 디지털 형태로 구성되어 있는 정보를 인간이 수월하게 인지하도록 하기 위하여 시 지각 원리에 입각한 분석과 적용이 필요한 분야이다 .

시각디자인의 기본원리에 기초하고 있으며 그 위에 디지털 매체의 특성과 네트워크 시스템의 특성을 고려한 최적화된 디자인 방법론이 사용되어야 할 것이다

인터랙션 (Interaction) 이란 사용자와 시스템이 상호작용 하는 것을 의미한다 .





인터페이스 디자인에서의 유용성 보다 효율적인 사용자 - 인터페이스 디자인을 위해서는 ,

특정 제품과 관련해서 사용자의 실제 사용행동을 다양한 방법으로 분석하고 , ex) 엔터키는 보통 왼쪽 중앙에 있다 .

이러한 분석 데이터를 토대로 사용자의 심성모형 (Mental Model) 을 정확히 파악하고 ,

사용자의 정신모형 및 인지능력과 일치 하지 않는 디자인의 문제점을 파악하여 개선안을 제안하고 ,

이렇게 제안된 디자인요소를 반영하여 Prototype 을 제작하여 , 실제 응답자를 대상으로 하는 시뮬레이션에 의한 사용성 평가 실험과정을

통해 사용 편의성 및 사용자의 의견을 평가한 후 , 다시 수정하여야 할 것이 있으면 보완하도록 한다 .





인터페이스 디자인에서의 유용성 유용성을 위한 웹 인터페이스

사용자 측면에서의 필요성이 웹 인터페이스상에서 구현된 예이며 무엇보다도 중요한 웹 사이트 설계 조건이 된다 .

현재 페이지의 위치를 표시해 주는 간단한 네비게이션 표시자 (Indicator)

기능

네비게이션 상에서 사용자의 현재 위치를 알 수 있는 시각적 표시 같은 기능

한빛미디어㈜ - 10 -




유용성을 위해 만들어진 웹 인터페이스 사례

[ 그림 7-1] http://www.interpark.com

인터파크의 현재 페이지의 위치를 표시해 주는 네비게이션 표시자

한빛미디어㈜ - 11 -





[ 그림 7-2] http://www.chosun.com

조선 .com 의 사용자의 현재 위치를 알 수 있는 시각적 표시

한빛미디어㈜ - 12 -





[ 그림 7-3] http://www.interpark.com

인터파크의 네비게이션 상에서 사용자의 현재 위치를 알 수 있는 시각적 표시

한빛미디어㈜ - 13 -





[ 그림 7-4] http://www.kbstar.com

국민은행의 네비게이션 상에서 사용자의 현재 위치를 알 수 있는 시각적 표시

한빛미디어㈜ - 14 -




유용성을 위해 만들어진 웹 인터페이스 사례 고속버스 예약 및 구매 사이트 사례

[ 그림 7-5] http://www.kobus.co.kr

전국 고속버스운송사업조합 사이트이다 .

초기화면에 예약하는 기능이 눈에 잘 띄는 곳에 노출되어 있다 .시간예약과 구매를 동시에 할 수 있고 동선이 계속 이어져 있어 사용자들에게 편의성을 제공하고 있다 . 회원 가입을 하지 않아도 구매를 할 수 있어 비회원도 편하게 사용 할 수 있다 .

한빛미디어㈜ - 15 -




유용성을 위해 만들어진 웹 인터페이스 사례 쇼핑몰 사이트의 히스토리 기능사례

[ 그림 7-6] http://www.daum.net

D&Shop 의 사례

쇼핑몰에서 이전에 보았던 상품들을 어려움 없이 바로 다시 볼 수 있도록 링크를 걸어두어 사용자들에게 편의성을 제공하고 있다 .

한빛미디어㈜ - 16 -




유용성을 위해 만들어진 웹 인터페이스 사례 쇼핑몰 사이트의 히스토리 기능사례

[ 그림 7-7] http://www.gmarket.co.kr

G 마켓의 사례

오늘 본 상품 수와 목록들을 어려움 없이 바로 다시 볼 수 있도록 링크를 걸어두어 사용자들에게 편의성을 제공하고 있다 .

한빛미디어㈜ - 17 -




유용성을 위해 만들어진 웹 인터페이스 사례 쇼핑몰의 관심상품 등록하기 사례

[ 그림 7-8] http://www.gmarket.co.kr

G 마켓의 사례

카테고리를 직접 생성 하여 상품을 분류할 수 있도록 구성 되어 있어 관심 상품을 관리하기 편리하게 되어 있다 .

한빛미디어㈜ - 18 -




연습문제

자주 사용하는 사이트에서 유용성을 고려하여 설계된 사례가 있으면 소개해 보자 . -> 지금 찾아서 이클래스에 올려라

자주 사용하는 사이트에서 사용하기 불편하여 재 설계가 요구되는 기능이 있으면 무엇인지 알아 보자 . 그리고 어떻게 재 설계해야 유용한 사이트가 만들어 질지 논의해 보자 .

둘 중 하나 ..

한빛미디어㈜ - 19 -




Thank you

ehanbit.net

chapter 02. 사용자 중심의 디자인

Documents