Wireframes: Are friends electric
|First simple grey scale wireframe|
Several key decisions have gone into the wireframes:
- I decided to use icons in order to minimise the size of side tabs (rather than text alone). I did not take this decision lightly as icons can be problematic due to individual interpretation. I looked through a cross section of modern icon collections online and I felt that the icons shown above were modern and appropriate for the user group of the learning object. The Index and Save icons are directly from the collection, Glossary/Help button is my own unique icon taking some inspiration from the icon set. I found the icon set at, http://ewebdesign.com/ (direct link to page). The icon set is originally from http://dryicons.com and licensed under a Creative Commons Attribution 3.0 unported license (https://creativecommons.org/licenses/by/3.0/*), so the source of these icons would need to be cited in the code and site attributions. However at this point in the design process they are really just placeholders pending the decision of the Graphic Designer on the eventual (hypothetical) design team. I did try out an alternative save button from the icon set, just to test. However it did not work as well as the conventional floppy disk icon as shown below.
- The cog on the bottom left, as a button to access settings feels correct in terms of positioning and I think that it stands out as an interactive tool without adding too much distraction to the learning environment. This cog is my own Adobe Illustrator drawing based on a cog designed by http://www.gentleface.com under a Creative Commons Attribution-NonCommercial 3.0 unported license (http://creativecommons.org/licenses/by-nc/3.0/ - as this is student work I am definitely not getting any commercial gain from this). I found the cog at iconfinder.com (direct link to page). The positioning and style of the cog was a result of my earlier on-paper sketching, so I feel that, that process was particularly valuable.
- Revisiting the wireframe above it seems that the audio mute button might want to be bigger in order to be more symmetrical with the settings button. I liberated the audio from the “settings” area; I have yet to fully define how the settings area will look. I did this because if an end-user were accessing the Learning Object from a mobile device they would want the default to be mute and then they could choose to turn on the audio narrative if they had headphones plugged into their device. Based on this I felt that making the audio settings more present and clickable/tapable would benefit, both users on desktop computers in office environments where computer noise might not be preferable and those on mobile devices.
*A closer inspection of the web site’s terms showed that the icons cannot be transformed in any way and have to be used as-is. The colour is inverted but other than that there are no structural changes. This suggests that these icons will need to be replaced in the final version of the site. See free license agreement section: http://dryicons.com/terms/
As I mentioned at the beginning of this post, I started with colour prototypes. The colour scheme was loosely inspired by the University of Exeter’s blue, as outlined in their visual identity guidelines although the branding for university-x needs a bit more thought.
|Colour hex values annotation is included for later reference.|
As part of the accessibility settings it is necessary for the user to be able to change the font in the interface. I tried a few experiments to see how this would look, as different fonts take up differing amounts of space on the page. It would also be necessary to provide a contextual preview of these settings as users altered them, so they could see how the fonts and other adjustments would manifest. I chose the fonts very carefully as although it would be great to offer a font like Verdana as a legible sans-serif, particularly because it distinguishes letters which often get confused “I” and “L”, there are some font licensing considerations to bear in mind. I liked the example provided by the WebAIM accessibility website (http://webaim.org/techniques/fonts/) where they use the word “Illustration” to show the legibility difference between Arial and Verdana: e.g. in Verdana: Illustration and Arial: Illustration. I have included this word in my examples below to help show differences between the fonts. With regard the licensing issue mentioned above, as the ethos of this learning object is open source and having checked font distribution licensing for Verdana, Arial and others and finding that they were not ideal, I sought open source alternatives. Examples and annotation is provided below. It is also important the the selected fonts provide language support for translation engine purposes. Font 1, the default, is PT Sans (shown in all visual examples above) a family licensed by the ParaType Ltd foundry: http://www.paratype.com/public/pt_openlicense_eng.asp
|Font 2 - Liberation at 12pt - license: SIL Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) source: https://fontlibrary.org/en/font/liberation-sans Partial language support, stated 99% at fontlibrary.org Comments: this font does distinguish between I and L and is quite a standard sans-serif. A bit more compact than PT Sans.|
|Font 3 - Encode Sans at 12pt - license: SIL Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) source: https://fontlibrary.org/en/font/encode-sans Full language support. Comments: this font uses height to differentiate, I and L. It features more curves than some of the other fonts, and doesn't have a lot of white space, so although it is condensed it might be better for some dylexic readers as this will limit the ghosting effect. Here is a virtual tool which I built in 2014 to demonstrate this effect: http://two-artists.com/Fiona_MacNeill/dyslexic-irlen/|
|Font 4 - Crimson at 12pt - the serif option. - license: SIL Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) source: https://fontlibrary.org/en/font/crimson. Full language support. Comments: my own personal tendency is to go for sans-serif fonts, however some users may prefer a serif font designed for screen reading. This font bears some similarity to both Georgia and Lucinda, I have found the chapter on Typography in the web style guide to be particularly informative in this area: http://webstyleguide.com/wsg3/8-typography/4-web-typefaces.html|
|Font 5 - Earthbound at 12pt - license: SIL Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) source: https://fontlibrary.org/en/font/earthbound Full language support.Comments: this is quite a curvy font, which once again uses character height as well as curved L to differentiate between L and I.|
|Font 6 - OpenDyslexic at 12pt - a font specifically designed for Dyslexic readers - license: http://opendyslexic.org/legal/ source: https://gumroad.com/l/OpenDyslexic Comments: Stylistically I find this font to err on the side of the 1970s, however at least personally I have found that it does increase my personal reading speed. I believe there is value in including it as an option in the settings.|
|I also wanted to explore how the font would look if the size were increased and how that would be tacked with formatting.|
Fonts that I decided against and size decision I took a look at some Google fonts, but felt that they did not fit the licensing needs as well as the SIL OFL fonts. Here are some of the fonts that I reviewed: https://www.google.com/fonts#ReviewPlace:refine/Collection:PT+Sans|Roboto|Tenor+Sans I also looked at an open font called Gen (https://fontlibrary.org/en/font/gen-light) however when I looked at the work Illustration there was no differentiation between L and I. In terms of the default size, I decided on 12pt based on some of the guidance included in the Web Style Guide 3rd addition. Specifically the “Type Sizes for Comfortable Reading” section: http://webstyleguide.com/wsg3/8-typography/4a-type-size-legibility.html Some influential sources for this process
- The incredibly helpful resources at the WebAIM site:
- The W3C Web Content Accessibility Guidelines (WCAG) 2.0: http://www.w3.org/TR/WCAG20/
Further treatments - looking at the background colour options for the settings NB. the default colour is the cream colour shown in the images above.
Alt background 1
Alt background 2
Alt background 3
Alt background 4
|Example of background colour change and font change|
Further inspiration In terms of further development of the settings and help/glossary, I found the following blog posts from the Nielsen Norman Group (NNG) to be particularly helpful.
Overuse of Overlays: How to Avoid Misusing Lightboxes: https://www.nngroup.com/articles/overuse-of-overlays/ What not to do!
Pop-ups and Adaptive Help Get a Refresh: https://www.nngroup.com/articles/pop-up-adaptive-help/ The example of the Google Play and AdWords help tools could offer an elegant solution for the glossary/help pop-up. Settings may be too involved to be a pop-up, as previously a preview of how the settings adjust the content would be helpful.
The case against flat design. There are some helpful tips in this blog post about hinting at interactivity:
References (in addition to websites listed above) Goodyear, P. (2005). Educational design and networked learning: Patterns, pattern languages and design practice. Australasian Journal of Educational Technology, 21(1). Advance online publication. Retrieved from http://ajet.org.au/index.php/AJET/article/view/1344 Green, S., Jones, R., Pearson, E., & Gkatzidou, S. (2006). Accessibility and adaptability of learning objects: Responding to metadata, learning patterns and profiles of needs and preferences. Alt-J, Research in Learning Technology, 14(1), 117-129. Retrieved from http://repository.alt.ac.uk/104/1/ALT_J_Vol14_No1_2006_Accessibility%20and%20adaptability.pdf Smith, R. S. (2004). Guidelines for authors of learning objects. Retrieved from NMC: New Media Consortium website: http://www.nmc.org/publication/guidelines-for-authors-of-learning-objects/