EFFECTIVELY INTEGRATING SUPPORT TOOLS, MULTIMEDIA AND HYPERMEDIA INTO TEACHING AND LEARNING.
CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia...
Transcript of CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia...
![Page 1: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/1.jpg)
CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite
![Page 2: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/2.jpg)
Objectives
! Test two read-it-later apps for users with presbyopia
! Which functions and design qualities are important?
! Recommend design changes
![Page 3: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/3.jpg)
Methodology - Changes
- Less cases testing variables (1 device, 2 apps)
- More participants - 2 by 5, within subjects design
![Page 4: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/4.jpg)
Device and Applications
! Device: Samsung Galaxy Note 3
! App 1: Instapaper ! App 2: Pocket
![Page 5: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/5.jpg)
WCAG Text Contrast
! WCAG AA and AAA ! Text below 18 point should have a
minimum contrast ratio of at least 4.5:1
Best contrast 21.0:1
Worst Contrast 1.16:1
![Page 6: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/6.jpg)
Pocket Contrast Ratio
Text Contrast
Ratio: 3.90:1
![Page 7: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/7.jpg)
Instapaper Contrast Ratio Text Contrast
Ratio: 4.01:1
![Page 8: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/8.jpg)
Test Process
![Page 9: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/9.jpg)
Test Tasks
! 1 – Open browser, find article, export to app, open in app
! 2 – Open display settings and change the font face
! 3 – Change font size and spacing ! 4 – Change background colour and
brightness
![Page 10: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/10.jpg)
Initial Results & Trends
! Improvement over time (speed)
! Common errors " “Misclicks” " Instapaper’s archive " Pocket’s background colour
![Page 11: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/11.jpg)
Progress Over Time
![Page 12: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/12.jpg)
Downloading & Exporting Article To Application
![Page 13: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/13.jpg)
Saved to Pocket
![Page 14: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/14.jpg)
Instapaper – Option Overload
- Font list - Spacing
![Page 15: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/15.jpg)
Instapaper – Overly Sensitive
![Page 16: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/16.jpg)
Getting to Options • Pocket: 2 Steps • Instapaper: 1 step
![Page 17: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/17.jpg)
Brightness Slider - Pocket Hit box is too small
Proposed Change
![Page 18: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/18.jpg)
Proposed Layout
• Larger Buttons • Only most necessary options • One button to get to options • Layout Contrast
![Page 19: CSE4461 Hypermedia and Multimedia Technology Cindy Le ...€¦ · CSE4461 Hypermedia and Multimedia Technology Cindy Le, Stefania Medryk, Aidan Waite](https://reader034.fdocuments.net/reader034/viewer/2022042709/5f3ffc4fc0a4c956d71e65b2/html5/thumbnails/19.jpg)
Conclusions ! Opinions on smartphones and read-it-
later apps changed post-test ! Errors mostly occurred due to button
size
! Participants preferred displays that involved the least amount of work for them