노주환
라이트브레인
User Experience
연구센터[email protected]
[email protected]
©RB Communications, www.rightbrain.co.kr
민간기업의 웹 접근성 모범사례 세미나 한국정보문화진흥원
2007년 11월 27일
1. 새로운 웹
2. 웹 접근성 문제점 3. 웹 접근성 이슈 3. 웹 접근성 이슈
4. 웹 접근성 향상 방안 참고문헌
1.Community, Collaboration, Social networking, Participation, Dynamic interaction
2.Work opportunity, Social interaction 3.Rich internet Application
4.Increasing JavaScript(22%에서 59%) &
(static) 'Page' (dynamic & interactive) 'Web Application'
The Web was
a click, wait, replace model.
• A web page interface is presented.
• User information is collected (via forms, links, etc.).
• The user submits information (submits form,
Page 2
4.Increasing JavaScript(22%에서 59%) &
CSS(41%에서 54%) Usage
5.WHATWG, HTML 5, Web Forms 2.0 6.ARIA(Accessible Rich Internet
Application)
- Actions, Transient data, Conditional data - Not navigating content
• The user submits information (submits form, activates link, etc.).
• The server processes submitted information.
• A new web page interface is sent to the user.
※ AJAX는 위와 같은 과정이 하나의 인터페이스 내에서 처리된다.
에피센터 디자인
Epicenter design
• contents driven page
• functional driven page
• outward
• preference < performance
www.flickr.com
www.youtube.com
del.icio.us
검색과 브라우징의 결합
Combining searching & browsing
자동완성
Auto complete
Page 4
Amazon Diamond Search Kayak.com
www.kayake.com
PIP 인터페이스
Picture-in-picture interface
미리보기 팝업
Quick read pop-up
Bitty www.bitty.com
Netflix
www.netflix.com/Top100?nfse=Y
멀티 아이프레임
Multi Iframe
포스트잇 타입 인터페이스
Post-it like interface
Page 6 Clipmarks
www.clipmarks.com
Magnoto www.magnoto.com
계층 구조의 시각화
Visualization of hierarchical structure
비주얼 서치
Visual search
Marumushi www.marumushi.com
Like www.like.com
대시보드 디자인
Dashboard design
웨블리케이션
Weblication
Page 8 Musicovery
www.musicovery.com Gliffy
www.gliffy.com
1.Inaccessible contents
Automated contents, Rich media, Authoring problems
2.Inaccessible functions
WYSIWYG editor, Inaccessible controls
3.Inaccessible interfaces
AJAX-free design, Redundant Interfaces, Dual Experience
4.Inaccessible interactions
Drag & Drop
1. JavaScript
AJAX(Asynchronous JavaScript and XML), XmlHttpRequest
2. Notification
Single-context
3. Navigation
Virtual Buffer, Navigation option
Page 10
Virtual Buffer, Navigation option
4. User control
Automation, Confirmation
5. Confusion/Disorientation
기존 사용자 경험
,
친숙하지 않음, Back button, Submit button
6. Encoding
EUC-KR Unicode(UTP-8)
1. Well-made
자바스크립트 사용 2. 자바스크립트Off
상황 고려3. 장치 독립적인
Event handler
사용 4. 자바스크립트의 남용(오용) 자제5. Additional Semantics
제공6. Input Focus
& 키보드 내비게이션 지원 7. 페이지 상의 변화 알림8. 새로운 콘텐트(읽기 시작점)로의
Direct access
지원• http://www.ibm.com/developerworks/kr/library/x-futhtml1/
• http://webaim.org/techniques/ajax/
• http://www.unicode.org/standard/translations/korean.html
경청해 주셔서 감사 드립니다~
