Wireframes: Are friends electric

Fri, 08 Jan 2016 00:00:00 +0000

The title of this blog post is a nod in the direction of . It felt like the right time to get some simple mock-ups ready in Adobe Fireworks; thus we became electric and moved away from paper, but only temporarily as this will speedup some of the low-fi paper prototypes that I plan later on. Fireworks seemed like the best choice as it is javascript-centric and I think that in all likelihood the final product would be coded in (but that would be up to my hypothetical developer). This is going to be a very long journal entry as there were a lot of decisions involved in taking the jump to the new format. Bear with me. So first on my list, although I did it second (as I ’think’ in colour) was to create a flexible frame-based mock-up of a topic page where learning content would be delivered. The frame size is set to 805 X 604 as this is the size of the window typically specified by , the University of Nottingham’s Learning Object creation tool. The specific Xerte example that I drew inspiration from can be found at the following link: . You will see that my progression buttons at the bottom of the page bears some resemblance to theirs, as I felt that it was an elegant solution to the problem in both a browser window and on a mobile device. I would be sure to cite this in my final code! However, I do think that a bit of polishing is needed and possibly an alternative for testing purposes; I think that the “2 / 4” looks like a button too, which could lead to confusion, so that is something to fix.

First simple grey scale version

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 . The icon set is originally from the and is licensed under a ). 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 under a [Creative Commons Attribution-NonCommercial 3.0 unported license] ( ) - as this is student work I am definitely not getting any commercial gain from this). I found the cog at . 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. .

Experiment Time!!

Then in reference to decision 1 above, I wondered if the icons could stand on their own without the titles. So I gave that a go…

But then I thought how do you deal with any uncertainty about the icons. Perhaps a JS popover? I explored how that would look, just out of interest. I don’t think that it was successful (click on the image below for the interactive version).

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 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 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 - PT Sans

Font 1, the default, is PT Sans (shown in all visual examples above) a family licensed by .

Font 2 - Liberation Sans

Font 2 - Liberation at 12pt - license: . 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

Font 3 - Encode Sans at 12pt - license: . 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.

Font 4 - Crimson

Font 4 - Crimson at 12pt - the serif option. - license: [SIL Open Font License] ( . 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 to be particularly informative in this area.

Font 5 - Earthbound

Font 5 - Earthbound at 12pt - license: . 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

Font 6 - OpenDyslexic at 12pt - a font specifically designed for Dyslexic readers - .

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:

.
I also looked at an open font called however when I looked at the word 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 section.

Some influential sources for this process

The incredibly helpful resources at the WebAIM site:
- .
- , which would prove useful for both the execution of, and the content within the Learning Object.

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.

. What not to do!
. 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 .

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

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

Smith, R. S. (2004). Guidelines for authors of learning objects. Retrieved from NMC: New Media Consortium website:

Wireframes: Pondering Topic Pages

Thu, 31 Dec 2015 00:00:00 +0000

References

Van Duyne, D. K., Landay, J. A., & Hong, J. I. (2007). The design of sites: Patterns for creating winning web sites (2nd ed.). USA: Prentice Hall PTR.

Wireframe sketching: looking at the index/home

Wed, 30 Dec 2015 00:00:00 +0000

References

Van Duyne, D. K., Landay, J. A., & Hong, J. I. (2007). The design of sites: Patterns for creating winning web sites (2nd ed.). USA: Prentice Hall PTR.

Notes

The website I mentioned.

I particularly like the quick reference tabs on the left of the site, which slide out on hover. Also the type enlargement tool on their site, it is easy to use and very effective. which provides an overview is really fascinating, showing the decisions that they made and why. I have also watched their webinar about the revamp of the site, featured on the page above. Some key questions, funnily enough I keep coming back to these too!

What are the goals of this website (in my case web application in the form of a Learning Object)?
Who is the audience and who are our users?
What are their goals?

Wireframes | Fiona MacNeill | Macknowlogist

Wireframes: Are friends electric

Experiment Time!!

Font 1 - PT Sans

Font 2 - Liberation Sans

Font 3 - Encode Sans

Font 4 - Crimson

Font 5 - Earthbound

Font 6 - OpenDyslexic

Fonts that I decided against and size decision

Some influential sources for this process

Further treatments - looking at the background colour options for the settings

Further inspiration

References (in addition to websites listed above)

Wireframes: Pondering Topic Pages

References

Wireframe sketching: looking at the index/home

References

Notes