universal design & web

28
UNIVERSAL DESIGN & WEB 스마트미디어그룹 박천수 그룹장

Upload: seonyoung-park

Post on 14-Dec-2014

408 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Universal design & web

UNIVERSAL DESIGN & WEB����������� ������������������  

스마트미디어그룹����������� ������������������   박천수����������� ������������������  그룹장����������� ������������������  

Page 2: Universal design & web

플립커뮤니케이션즈는����������� ������������������  IT가����������� ������������������  우리����������� ������������������  삶에����������� ������������������  조화롭게����������� ������������������  스며들어����������� ������������������  우리의����������� ������������������  삶을����������� ������������������  윤택하게����������� ������������������  하는����������� ������������������  것을����������� ������������������   기업의����������� ������������������  최우선����������� ������������������  목표로����������� ������������������  하고����������� ������������������  있습니다. We exist for the purpose of connecting and harmonizing internet technology with the world we live in.

OVERVIEW

PULLING a TIP 플립커뮤니케이션즈는Pulling a tip을����������� ������������������  블렌딧����������� ������������������  한����������� ������������������  합성어로, 고객의����������� ������������������  니즈를����������� ������������������  넘어����������� ������������������  원츠를����������� ������������������  생각하고����������� ������������������  제시하는����������� ������������������  기업이라는����������� ������������������  뜻을����������� ������������������  담고����������� ������������������  있습니다.����������� ������������������  

㈜플립커뮤니케이션즈����������� ������������������  ����������� ������������������  ( PULIP COMMUNICATIONS Co.,Ltd ) ����������� ������������������  

e-비즈니스����������� ������������������  전략컨설팅, UX 컨설팅, 웹서비스����������� ������������������  구축����������� ������������������  및����������� ������������������  운영, 스마트미디어����������� ������������������  서비스����������� ������������������  구축����������� ������������������  및����������� ������������������  운영, 오픈����������� ������������������  웹����������� ������������������  서비스����������� ������������������  구축, 온라인����������� ������������������  광고/마케팅����������� ������������������  

160명����������� ������������������  ����������� ������������������  

서울시����������� ������������������  강남구����������� ������������������  논현동����������� ������������������  7-5 효진빌딩����������� ������������������  2~3F Tel : 02-541-4642 www.pulipinc.com / [email protected]����������� ������������������  

BLEND it����������� ������������������  

Page 3: Universal design & web

UNIVERSAL DESIGN 이란����������� ������������������  무엇인가요����������� ������������������  ? 웹����������� ������������������  접근성과����������� ������������������  어떤����������� ������������������  차이가����������� ������������������  있습니까����������� ������������������  ? 그래서����������� ������������������  어떻게����������� ������������������  하면����������� ������������������  되나요����������� ������������������  ?

오늘����������� ������������������  이야기의����������� ������������������  주제는…����������� ������������������  

Page 4: Universal design & web

“모든����������� ������������������  사람들이����������� ������������������  제품, 건축, 환경, 서비스����������� ������������������  등을����������� ������������������  보다����������� ������������������  편하고����������� ������������������  안전하게����������� ������������������  이

용할����������� ������������������  수����������� ������������������  있도록����������� ������������������  설계하는����������� ������������������  것����������� ������������������  “ - 위키피디아����������� ������������������  

“보편적����������� ������������������  디자인”

“포괄적����������� ������������������  디자인” (inclusive design)

“모두를����������� ������������������  위한����������� ������������������  설계” (Design for All)

UNIVERSAL DESIGN 이란����������� ������������������  

Page 5: Universal design & web

The Bradley Designed by 김형수(Eone)

vs����������� ������������������  

모두를����������� ������������������  위한����������� ������������������  시계����������� ������������������  

Page 6: Universal design & web

Universal Plug Design by 김성우 iF Concept Design 2011 winner

모두를����������� ������������������  위한����������� ������������������  플러그����������� ������������������  

Page 7: Universal design & web

Perceivable Operable

Understandable Robust

4개의����������� ������������������  기준, 22개의����������� ������������������  가이드라인����������� ������������������  

웹����������� ������������������  콘텐츠����������� ������������������  접근성����������� ������������������  지침����������� ������������������  ����������� ������������������  

Page 8: Universal design & web
Page 9: Universal design & web

“보편적����������� ������������������  디자인”

“포괄적����������� ������������������  디자인” (inclusive design)

“모두를����������� ������������������  위한����������� ������������������  설계” (Design for All)

“모든����������� ������������������  사람들이����������� ������������������  웹에서����������� ������������������  훌륭한����������� ������������������  사용자경험을����������� ������������������  

얻을����������� ������������������  수����������� ������������������  있도록����������� ������������������  설계����������� ������������������  하는것����������� ������������������  “

UD answers the “Why?”����������� ������������������  

Page 10: Universal design & web
Page 11: Universal design & web

장애인을����������� ������������������  위한����������� ������������������  접근성����������� ������������������  개편이����������� ������������������  아닌����������� ������������������  ����������� ������������������  

e-Accessibility 단지����������� ������������������  장애인의����������� ������������������  인터넷����������� ������������������  사용을����������� ������������������  가능하게����������� ������������������  하는����������� ������������������  것에����������� ������������������  대한����������� ������������������  것이����������� ������������������  아니라,

모든����������� ������������������  사람에게����������� ������������������  훌륭한����������� ������������������  인터넷����������� ������������������  경험을����������� ������������������  가능하게����������� ������������������  하는����������� ������������������  원칙이다.����������� ������������������  

_영국����������� ������������������  정부의����������� ������������������  inclusive web design principle����������� ������������������  

2008년����������� ������������������  4월����������� ������������������  11일부터����������� ������������������  ‘장애인차별금지����������� ������������������  및����������� ������������������  권리구제����������� ������������������  등에����������� ������������������  관한����������� ������������������  법률’이����������� ������������������  시행되어����������� ������������������  

5년의����������� ������������������  단계적����������� ������������������  유예기간이����������� ������������������  만료되는����������� ������������������  

2013년����������� ������������������  4월����������� ������������������  11일����������� ������������������  부로����������� ������������������  모든����������� ������������������  법인이����������� ������������������  저촉대상이����������� ������������������  되며����������� ������������������  모든����������� ������������������  법인이����������� ������������������  운영하는����������� ������������������  웹사이트가����������� ������������������  웹

접근성을����������� ������������������  준수����������� ������������������  하여야����������� ������������������  합니다.

“웹의����������� ������������������  힘은����������� ������������������  그것의����������� ������������������  보편성에����������� ������������������  있다” _팀����������� ������������������  버너스리

모두를����������� ������������������  위한����������� ������������������  웹����������� ������������������  

Page 12: Universal design & web

by NC State University (Inclusive Web Design 의����������� ������������������  10대원칙����������� ������������������  by Sandi Wassmer)

7 Principles of UD ����������� ������������������  

01����������� ������������������  

02����������� ������������������  

03����������� ������������������  

04����������� ������������������  

05����������� ������������������  

06����������� ������������������  

07����������� ������������������  

공평한����������� ������������������  사용����������� ������������������  (equitable use)

가능할����������� ������������������  경우����������� ������������������  똑같게, 그렇지����������� ������������������  않을����������� ������������������  경우����������� ������������������  동등하게.

사용상의����������� ������������������  융통성����������� ������������������  (flexibility in use)

다양한����������� ������������������  생활환경����������� ������������������  조건에서도����������� ������������������  정확하고����������� ������������������  자유롭게����������� ������������������  

간단하고����������� ������������������  직관적인����������� ������������������  사용����������� ������������������  (simple and intuitive use)

직감적으로����������� ������������������  간결하고, 피드백이����������� ������������������  있는가? , 좋은����������� ������������������  디자인은����������� ������������������  최소한의����������� ������������������  디자인

인지의����������� ������������������  용이����������� ������������������  (perceptive information)

정보구조가����������� ������������������  간단하고, 복수의����������� ������������������  전달수단����������� ������������������  

오류에����������� ������������������  대한����������� ������������������  포용력����������� ������������������  (tolerance for error)

사고를����������� ������������������  방지하고, 잘못된����������� ������������������  명령에도����������� ������������������  원래����������� ������������������  상태로����������� ������������������  쉽게����������� ������������������  복귀가����������� ������������������  가능한가?

적은����������� ������������������  물리적����������� ������������������  노력����������� ������������������  (low physical effort)

무리한����������� ������������������  힘을����������� ������������������  들이지����������� ������������������  않고����������� ������������������  자연스런����������� ������������������  자세로����������� ������������������  사용이����������� ������������������  가능한가����������� ������������������  ?

접근과����������� ������������������  사용을����������� ������������������  위한����������� ������������������  충분한����������� ������������������  공간����������� ������������������  (size and space for approach and use)����������� ������������������  

Page 13: Universal design & web

사용성의����������� ������������������  5가지����������� ������������������  속성����������� ������������������  by Jakob nielsen(제이콥����������� ������������������  닐슨)����������� ������������������  

학습성����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (Learnability)

효율성����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (Efficiency)

기억성����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (Memorability)

�오류����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (Error)

만족����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  (Satisfaction)����������� ������������������  

_시스템은����������� ������������������  학습하기����������� ������������������  쉬워야����������� ������������������  한다����������� ������������������  

_일단����������� ������������������  학습하면����������� ������������������  더����������� ������������������  높은����������� ������������������  생산성을����������� ������������������  낼����������� ������������������  수����������� ������������������  있어야����������� ������������������  

_한번만����������� ������������������  학습하면

_낮은����������� ������������������  오류, 복구����������� ������������������  용이

_사용하기에����������� ������������������  즐거워야����������� ������������������  ����������� ������������������  한다.

Page 14: Universal design & web

10 Usability Heuristics����������� ������������������  by Jakob nielsen(제이콥����������� ������������������  닐슨)����������� ������������������  

시스템����������� ������������������  상태의����������� ������������������  가시성����������� ������������������  (Visibility of system status)

실세계와����������� ������������������  시스템의����������� ������������������  일치����������� ������������������  (Match between system and the real world)

사용자����������� ������������������  조작����������� ������������������  및����������� ������������������  자유도����������� ������������������  (User control and freedom)����������� ������������������  

일관성과����������� ������������������  표준화����������� ������������������  (Consistency and standards)����������� ������������������  

실수의����������� ������������������  예방����������� ������������������  (Error prevention)����������� ������������������  

기억보다����������� ������������������  인식����������� ������������������  (Recognition rather than recall)����������� ������������������  

유연성과����������� ������������������  효율성����������� ������������������  (Flexibility and efficiency of use)����������� ������������������  

미적인, 최소한의����������� ������������������  디자인����������� ������������������  (Aesthetic and minimalist design)

실수에����������� ������������������  대한����������� ������������������  사용자의����������� ������������������  인식,진단,복구를����������� ������������������  도움����������� ������������������   (Help users recognize, diagnose, and recover from errors)

도움말과����������� ������������������  문서화����������� ������������������  (Help and documentation)����������� ������������������  

01����������� ������������������  

05����������� ������������������  

10����������� ������������������  

Page 15: Universal design & web

옵션이����������� ������������������  많아지면����������� ������������������  선택이����������� ������������������  힘들어����������� ������������������  진다. - Hick’s Law����������� ������������������  

Page 16: Universal design & web

타겟이����������� ������������������  작으면����������� ������������������  누르기����������� ������������������  힘들다 - Fitts’s Law����������� ������������������  

Page 17: Universal design & web

HealthCare.gov’s Account Setup: 10 Broken Usability Guidelines by JEN CARDELLO

Number the steps

-  Step 에����������� ������������������  숫자를����������� ������������������  추가하거나, 상태바로����������� ������������������  교체 -  폼의����������� ������������������  상단에����������� ������������������  위치하도록����������� ������������������  

Id & Password

-  주요����������� ������������������  instruction 은����������� ������������������  입력받기����������� ������������������  전에����������� ������������������  표시 -  에러메시지는����������� ������������������  inline ����������� ������������������  

Page 18: Universal design & web

vs����������� ������������������  

Page 19: Universal design & web

Inline feedback for user name availability����������� ������������������  

Barnes & Noble Nook, error message in Action Sheet; Square, error message in dialog����������� ������������������  

Mobile Design Pattern Gallery, O’REILLY

Page 20: Universal design & web

Collecting Payment Information Within a Single Input

Shake animation feedback

Page 21: Universal design & web

Top 10 Mistakes in Web Design by JAKOB NIELSEN

Page 22: Universal design & web

Google Calendar

Google 음성����������� ������������������  검색����������� ������������������  및����������� ������������������  답변

Page 23: Universal design & web

Horizontal labels can end up truncated����������� ������������������  

Vertical labels and watermark label����������� ������������������  

Mobile Design Pattern Gallery, O’REILLY

Page 24: Universal design & web

Transparency invitation����������� ������������������  

Tour invitation & help����������� ������������������  

Mobile Design Pattern Gallery, O’REILLY

Page 25: Universal design & web

Using the sound & vibration feedback����������� ������������������  

Google racer, rollit with html5 web audio api����������� ������������������  

Page 26: Universal design & web

모두가����������� ������������������  훌륭한����������� ������������������  사용자����������� ������������������  경험을����������� ������������������  얻을����������� ������������������  수����������� ������������������  있는����������� ������������������  웹에����������� ������������������  대한����������� ������������������  고민이����������� ������������������  필요

이제는����������� ������������������  통합적����������� ������������������  디자인����������� ������������������  사고가����������� ������������������  필요����������� ������������������  !

포괄적인����������� ������������������  디자인을����������� ������������������  할����������� ������������������  때

부모님이����������� ������������������  사용할����������� ������������������  수����������� ������������������  있을까����������� ������������������  ?

애들도����������� ������������������  사용이����������� ������������������  가능한가����������� ������������������  ?

장애인이나����������� ������������������  장애적인����������� ������������������  상황에서����������� ������������������  사용����������� ������������������  가능한가����������� ������������������  ?

Page 27: Universal design & web

구분 발주처 사업명

Mobile Web

/ App

ING생명����������� ������������������   ING생명����������� ������������������  Customer����������� ������������������  모바일����������� ������������������  웹����������� ������������������  /����������� ������������������  APP,����������� ������������������  e-learning����������� ������������������  모바일����������� ������������������  APP����������� ������������������  

롯데카드����������� ������������������   스마트롯데����������� ������������������  모바일����������� ������������������  웹����������� ������������������  /����������� ������������������  APP����������� ������������������  

아모레퍼시픽����������� ������������������   모바일����������� ������������������  쇼핑몰����������� ������������������  

아웃백����������� ������������������   아웃백����������� ������������������  모바일웹����������� ������������������  /����������� ������������������  APP����������� ������������������  

삼성화재����������� ������������������   삼성화재����������� ������������������  모바일����������� ������������������  웹����������� ������������������  /����������� ������������������  APP����������� ������������������  

동부화재����������� ������������������   스마트����������� ������������������  영업지원����������� ������������������  컨텐츠����������� ������������������  및����������� ������������������  길라잡이����������� ������������������  APP����������� ������������������  

KCB����������� ������������������   올크레딧����������� ������������������  /����������� ������������������  하우머니����������� ������������������  모바일웹����������� ������������������  

IBK����������� ������������������  기업은행����������� ������������������  

IBK����������� ������������������  모바일웹����������� ������������������  

IBK����������� ������������������  스마트����������� ������������������  터치����������� ������������������  APP����������� ������������������  

IBK카드����������� ������������������  모바일APP����������� ������������������  /����������� ������������������  IBK����������� ������������������  퇴직연금����������� ������������������  모바일����������� ������������������  APP����������� ������������������  

LIG손해보험����������� ������������������  ����������� ������������������   LIG손해보험����������� ������������������  모바일����������� ������������������  웹����������� ������������������  

올림푸스����������� ������������������   올림푸스����������� ������������������  모바일����������� ������������������  웹����������� ������������������  

엠넷����������� ������������������   슈퍼스타K����������� ������������������  3����������� ������������������  모바일����������� ������������������  웹����������� ������������������  

현대카드����������� ������������������  현대카드����������� ������������������  iPhone����������� ������������������  &����������� ������������������  안드로이드����������� ������������������  APP,����������� ������������������  현대카드����������� ������������������  M포인트몰����������� ������������������  아이폰����������� ������������������  APP,����������� ������������������  ����������� ������������������  현대카드����������� ������������������  M포인트몰����������� ������������������  아이����������� ������������������  폰����������� ������������������  APP,����������� ������������������  현대카드����������� ������������������  슈퍼시리즈����������� ������������������  통합����������� ������������������  APP����������� ������������������  

현대캐피탈����������� ������������������   현대캐피탈����������� ������������������  iPhone����������� ������������������  &����������� ������������������  안드로이드����������� ������������������  APP����������� ������������������  

Mobile SFA

ING생명����������� ������������������   모바일����������� ������������������  영업지원����������� ������������������  시스템����������� ������������������  UX/UI����������� ������������������  컨설팅����������� ������������������  디자인����������� ������������������  

한화손해보험����������� ������������������   한화손해보험����������� ������������������  Mobile����������� ������������������  SFA����������� ������������������  디자인����������� ������������������  

교보생명����������� ������������������   모바일����������� ������������������  영업지원����������� ������������������  시스템����������� ������������������  UX/UI����������� ������������������  디자인����������� ������������������  

삼성증권����������� ������������������   은퇴설계����������� ������������������  시스템����������� ������������������  구축(Web����������� ������������������  Version����������� ������������������  &����������� ������������������  Tablet����������� ������������������  Version)����������� ������������������  

모바일구축����������� ������������������  사례����������� ������������������  

Page 28: Universal design & web

감사합니다. ����������� ������������������  

박천수����������� ������������������  그룹장����������� ������������������  

[email protected]����������� ������������������