User interface implementation
description
Transcript of User interface implementation
![Page 1: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/1.jpg)
User interface implementation
Juri Strumpflohner
Matthias Braunhofer
![Page 2: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/2.jpg)
2
Content
Overview of the designed webpage
Design criterias and guidelines
Evaluation tools and outcomes
Demo
![Page 3: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/3.jpg)
3
Overview of the designed webpage
Designed scenariosSearch for a flight
Book a flight
![Page 4: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/4.jpg)
4
Overview of the designed webpage
![Page 5: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/5.jpg)
5
Overview of the designed webpage
![Page 6: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/6.jpg)
6
Overview of the designed webpage
![Page 7: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/7.jpg)
7
Overview of the designed webpage
![Page 8: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/8.jpg)
8
Overview of the designed webpage
![Page 9: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/9.jpg)
9
Overview of the designed webpage
![Page 10: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/10.jpg)
10
Design criterias and guidelines
Eight golden rules
Observations from usability analysis of Alitalia and Lufthansa website
W3C guidelines
![Page 11: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/11.jpg)
11
Evaluation tools / outcomesA-Checker
Descriptiontests web pages for conformance to
various accessibility guidelines
GuidelinesWCAG 1.0, Section 508, Stanca Art,
BITV
URLhttp://checker.atrc.utoronto.ca/index.htm
![Page 12: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/12.jpg)
12
Evaluation tools / outcomesA-Checker
![Page 13: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/13.jpg)
13
Evaluation tools / outcomesAccessibility Check
Descriptionevaluates web pages against subset
of WAI guidelines.
GuidelinesWCAG 1.0
URL http://www.etre.com/tools/accessibilitycheck/
![Page 14: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/14.jpg)
14
Evaluation tools / outcomesAccessibility Check
Default page Booking page
![Page 15: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/15.jpg)
15
Evaluation tools / outcomesAccess Color
Description Analyzes the internal and external CSS for
colour contrast and brightness between text and background. It uses an algorithm recommended by W3C
Guidelines WCAG 1.0
URL http://www.accesskeys.org/tools/ color-contrast.html
![Page 16: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/16.jpg)
16
Evaluation tools / outcomesAccess Color
![Page 17: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/17.jpg)
17
Evaluation tools / outcomesAccess Color
![Page 18: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/18.jpg)
18
Demo
http://aspspider.info/MBraunhofer/
![Page 19: User interface implementation](https://reader035.fdocuments.in/reader035/viewer/2022081504/56815196550346895dbfce25/html5/thumbnails/19.jpg)
19
Thank you for your attention!