Universal design & web
-
Upload
seonyoung-park -
Category
Business
-
view
354 -
download
2
description
Transcript of Universal design & web
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����������� ������������������
UNIVERSAL DESIGN 이란����������� ������������������ 무엇인가요����������� ������������������ ? 웹����������� ������������������ 접근성과����������� ������������������ 어떤����������� ������������������ 차이가����������� ������������������ 있습니까����������� ������������������ ? 그래서����������� ������������������ 어떻게����������� ������������������ 하면����������� ������������������ 되나요����������� ������������������ ?
오늘����������� ������������������ 이야기의����������� ������������������ 주제는…����������� ������������������
“모든����������� ������������������ 사람들이����������� ������������������ 제품, 건축, 환경, 서비스����������� ������������������ 등을����������� ������������������ 보다����������� ������������������ 편하고����������� ������������������ 안전하게����������� ������������������ 이
용할����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 설계하는����������� ������������������ 것����������� ������������������ “ - 위키피디아����������� ������������������
“보편적����������� ������������������ 디자인”
“포괄적����������� ������������������ 디자인” (inclusive design)
“모두를����������� ������������������ 위한����������� ������������������ 설계” (Design for All)
UNIVERSAL DESIGN 이란����������� ������������������
The Bradley Designed by 김형수(Eone)
vs����������� ������������������
모두를����������� ������������������ 위한����������� ������������������ 시계����������� ������������������
Universal Plug Design by 김성우 iF Concept Design 2011 winner
모두를����������� ������������������ 위한����������� ������������������ 플러그����������� ������������������
Perceivable Operable
Understandable Robust
4개의����������� ������������������ 기준, 22개의����������� ������������������ 가이드라인����������� ������������������
웹����������� ������������������ 콘텐츠����������� ������������������ 접근성����������� ������������������ 지침����������� ������������������ ����������� ������������������
“보편적����������� ������������������ 디자인”
“포괄적����������� ������������������ 디자인” (inclusive design)
“모두를����������� ������������������ 위한����������� ������������������ 설계” (Design for All)
“모든����������� ������������������ 사람들이����������� ������������������ 웹에서����������� ������������������ 훌륭한����������� ������������������ 사용자경험을����������� ������������������
얻을����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 설계����������� ������������������ 하는것����������� ������������������ “
UD answers the “Why?”����������� ������������������
장애인을����������� ������������������ 위한����������� ������������������ 접근성����������� ������������������ 개편이����������� ������������������ 아닌����������� ������������������ ����������� ������������������
e-Accessibility 단지����������� ������������������ 장애인의����������� ������������������ 인터넷����������� ������������������ 사용을����������� ������������������ 가능하게����������� ������������������ 하는����������� ������������������ 것에����������� ������������������ 대한����������� ������������������ 것이����������� ������������������ 아니라,
모든����������� ������������������ 사람에게����������� ������������������ 훌륭한����������� ������������������ 인터넷����������� ������������������ 경험을����������� ������������������ 가능하게����������� ������������������ 하는����������� ������������������ 원칙이다.����������� ������������������
_영국����������� ������������������ 정부의����������� ������������������ inclusive web design principle����������� ������������������
2008년����������� ������������������ 4월����������� ������������������ 11일부터����������� ������������������ ‘장애인차별금지����������� ������������������ 및����������� ������������������ 권리구제����������� ������������������ 등에����������� ������������������ 관한����������� ������������������ 법률’이����������� ������������������ 시행되어����������� ������������������
5년의����������� ������������������ 단계적����������� ������������������ 유예기간이����������� ������������������ 만료되는����������� ������������������
2013년����������� ������������������ 4월����������� ������������������ 11일����������� ������������������ 부로����������� ������������������ 모든����������� ������������������ 법인이����������� ������������������ 저촉대상이����������� ������������������ 되며����������� ������������������ 모든����������� ������������������ 법인이����������� ������������������ 운영하는����������� ������������������ 웹사이트가����������� ������������������ 웹
접근성을����������� ������������������ 준수����������� ������������������ 하여야����������� ������������������ 합니다.
“웹의����������� ������������������ 힘은����������� ������������������ 그것의����������� ������������������ 보편성에����������� ������������������ 있다” _팀����������� ������������������ 버너스리
모두를����������� ������������������ 위한����������� ������������������ 웹����������� ������������������
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)����������� ������������������
사용성의����������� ������������������ 5가지����������� ������������������ 속성����������� ������������������ by Jakob nielsen(제이콥����������� ������������������ 닐슨)����������� ������������������
학습성����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (Learnability)
효율성����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (Efficiency)
기억성����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (Memorability)
�오류����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (Error)
만족����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ (Satisfaction)����������� ������������������
_시스템은����������� ������������������ 학습하기����������� ������������������ 쉬워야����������� ������������������ 한다����������� ������������������
_일단����������� ������������������ 학습하면����������� ������������������ 더����������� ������������������ 높은����������� ������������������ 생산성을����������� ������������������ 낼����������� ������������������ 수����������� ������������������ 있어야����������� ������������������
_한번만����������� ������������������ 학습하면
_낮은����������� ������������������ 오류, 복구����������� ������������������ 용이
_사용하기에����������� ������������������ 즐거워야����������� ������������������ ����������� ������������������ 한다.
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����������� ������������������
옵션이����������� ������������������ 많아지면����������� ������������������ 선택이����������� ������������������ 힘들어����������� ������������������ 진다. - Hick’s Law����������� ������������������
타겟이����������� ������������������ 작으면����������� ������������������ 누르기����������� ������������������ 힘들다 - Fitts’s Law����������� ������������������
HealthCare.gov’s Account Setup: 10 Broken Usability Guidelines by JEN CARDELLO
Number the steps
- Step 에����������� ������������������ 숫자를����������� ������������������ 추가하거나, 상태바로����������� ������������������ 교체 - 폼의����������� ������������������ 상단에����������� ������������������ 위치하도록����������� ������������������
Id & Password
- 주요����������� ������������������ instruction 은����������� ������������������ 입력받기����������� ������������������ 전에����������� ������������������ 표시 - 에러메시지는����������� ������������������ inline ����������� ������������������
vs����������� ������������������
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
Collecting Payment Information Within a Single Input
Shake animation feedback
Top 10 Mistakes in Web Design by JAKOB NIELSEN
Google Calendar
Google 음성����������� ������������������ 검색����������� ������������������ 및����������� ������������������ 답변
Horizontal labels can end up truncated����������� ������������������
Vertical labels and watermark label����������� ������������������
Mobile Design Pattern Gallery, O’REILLY
Transparency invitation����������� ������������������
Tour invitation & help����������� ������������������
Mobile Design Pattern Gallery, O’REILLY
Using the sound & vibration feedback����������� ������������������
Google racer, rollit with html5 web audio api����������� ������������������
모두가����������� ������������������ 훌륭한����������� ������������������ 사용자����������� ������������������ 경험을����������� ������������������ 얻을����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 웹에����������� ������������������ 대한����������� ������������������ 고민이����������� ������������������ 필요
이제는����������� ������������������ 통합적����������� ������������������ 디자인����������� ������������������ 사고가����������� ������������������ 필요����������� ������������������ !
포괄적인����������� ������������������ 디자인을����������� ������������������ 할����������� ������������������ 때
부모님이����������� ������������������ 사용할����������� ������������������ 수����������� ������������������ 있을까����������� ������������������ ?
애들도����������� ������������������ 사용이����������� ������������������ 가능한가����������� ������������������ ?
장애인이나����������� ������������������ 장애적인����������� ������������������ 상황에서����������� ������������������ 사용����������� ������������������ 가능한가����������� ������������������ ?
구분 발주처 사업명
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)����������� ������������������
모바일구축����������� ������������������ 사례����������� ������������������
감사합니다. ����������� ������������������
박천수����������� ������������������ 그룹장����������� ������������������
[email protected]����������� ������������������