Design | Fiona MacNeill | Macknowlogist

Vlog 3 [1/2]: Adventures in ViewX - Double Diamond for Watch Parties

Sun, 04 Jul 2021 00:00:00 +0000

Reflecting on designing a watch party for UX Brighton

Watch the UX Brighton watch party for yourself (took place on 13th April 2021)
Look at the which was provided as a Google Doc
Visit the that I used to guide my design and then reflect on my experiences
Check out the (H5P interactive activity)

Edited Vlog Transcript

Hi folks, I know it’s been a while. So, yeah basically what I can say is I’ve had a couple of really paperwork intensive months. I ran a watch party for because I presented about a few of the challenges I’d found through working on some discovery at my workplace. The suggestion was that perhaps we could do a UX Brighton watch party and that might provide me with an opportunity to experiment to try out some things that I couldn’t try out at work and to get some really helpful critical feedback. So, I’m really delighted to say that I got that opportunity because I really did get amazing feedback and I have since used the learning that I gained from that particular watch party to feed into my professional portfolio, and I’ve also used it to think really critically about how I talk to staff about watch parties how I encourage them to onboard people during watch parties.

Discover

Three key problems to solve

I’ll come on to some of the key takeaways in a little bit, but I’ve used a mural board to help me reflect. This is based on the Design Council’s Evolved Double Diamond (2015) which is what I used as the sort of basis for my design process for the watch party. From my discovery work within my workplace there were three key problems to solve. So, first of all staff had been screen sharing video that they wanted to show to students, and they wanted to screen share the video so that everyone could watch it together at the same time. The key issue was that when you share video over a tool like Microsoft Teams, like Zoom, it’s very much reliant on the speed of your broadband connection but also the speed of the people’s connection who are watching at home. So, what we’d often find is that the video would play fine for the person who was sharing but then at home people would find that there was no audio, or the video was kind of juddery. Some of the screen shared video was blocked by Digital Rights Management. So particularly in Microsoft Teams it has some Digital Rights Management and so what the student would see on their end was just a kind of grey or black screen there would be no content even though it was playing fine for the instructor. The biggest problem of the three was that when if you, as the instructor, were playing a video out to students and you were screen sharing it would look to me, as the student watching, like I could use the closed caption tools say if you were sharing a YouTube video. Most YouTube videos have a CC (Closed Caption) button on the bottom right-hand side that allows you to access the closed captions. Well, if you’re screen sharing it it’s sort of a flat facsimile of the video so I couldn’t actually interact with those subtitles, those closed captions so that wouldn’t help me if I needed that.

Facilitation and watching other people ‘watch’

Another key ingredient that I identified through the discovery phase was that there must always be a facilitator. SAnother key ingredient that I identified through the discovery phase was that there must always be a facilitator. So, for example if you were someone who had content ready, and you gave people a watch list of stuff it doesn’t mean that you can then go away and just leave them to it. There’s something about needing to be there, needing to guide that discussion, or guide the activities which are kicked off by the video content, so the video content is really more of a prompt to get things going it’s a way of presenting information and then interspersing it with something more personable something more um discursive. So, it allows you to potentially cover more content quickly because a video is kind of produced. The next point here is that I think there’s something to be said for watching other people ‘watch’ things (I have included some of my favourite references related to this concept ). So, I know that when I’m in a cinema my attention span is much better than it is when I’m just sitting at home watching Netflix. So, if my attention’s lagging in a film I kind of look around and go “are other people still interested in this film or is other people looking kind of you know a little bit bored” and if everyone else is really engaged then that kind of makes me think well “_I should re-engage, obviously I’m missing something her_e”.

Define

Software requirements to address the challenges

The next thing was to think about “well what interface do I actually need?”, “what software would meet these requirements um for the watch parties?”. So, I had some must-haves: audio discussion, must have space for people to write into a chat that is yep definitely needed, webcam video connection yep, and access to closed captions my post, ‘But what about the subtitles?’ discussed issues meeting this requirement. We needed some kind of high-quality way of sharing the video. Basically, any way of screen sharing video wasn’t great, so I needed something that allowed me to kind of press start and stop for everyone at the same time. Circles here that have the ticks on them (on the Mural board), these are actually requirements that were met by the software that I used for the watch party which I’ll come onto in a bit. There were some ‘should have’ things so access to closed caption customization so being able to change the font size and the position of the closed captions is really important. Having access to reaction tools like smiling and clapping and thumbs up and being able to move aspects of the interface so if the chat box was really distracting to me while the video is on, I could minimize it I could also choose which things I kind of wanted ‘on’ tool-wise or ‘off’. The thing we didn’t have was support for mobile devices that the tool we ended up using really didn’t work great on mobile devices.

Thinking about ‘ViewX’ or the Exerience of Viewing

So, while I was kind of going through this process, I also thought about defining what formats were possible with a watch party. Funnily enough I’ve sort of nicknamed this process ViewX so like UX but ViewX like the experience of viewing um I think there is something about this that’s just been utterly fascinating to me like how does the environment of viewing affect how you view? So, the first approach I had was named after Nick Knowles who’s a DIY expert on TV and this one was about using your own video footage but then chunking it into key concepts. The next method I thought about was based on Elvira the Mistress of the Dark who always would play, this is kind of a 1980s thing, but she would play like really rubbish B movies and she would intersperse her own commentary with that. So, it’s a little bit like Mystery Science Theater um, but it was more like segments that interspersed with the video. Because it might be that video requires that kind of contextualization in order for it to make sense but there is also um some value which I’ll come on to in perhaps not always presenting one way of interpreting video and in fact leaving it more vague and open to audience interpretation. That’s where that can really help to stimulate your discursive elements during the watch party. So, what I came up with was what I’ve now since labelled the Michael Moore approach which is sort of a video essay type approach where I actually captured sections of YouTube videos and represented them as a mashup, so each section of the watch party was sort of a video mashup where I’d placed really short clips from a range of videos together. With the Michael Moore approach as I’m calling it you can present these video clips smashed together with or without video commentary so you could have a sort of voiceover that presented some context which is similar to the Elvira approach, or you can just present the videos together with no context which is almost more interesting. I think it depends on what you’re aiming for. So, I think that because there was no commentary from me the videos were just presented as they are, but as snippets, people had to decide well “why did Fiona pick that snippet and why did that how does that relate to the next slip snippet or how does that relate to the one that came before”?

The ‘Nick Knowles’, using your own content. A chaptered Panopto video is shown as an example on the right of the slide image

The ‘Elvira’ format or approach. Video commentary alongside a video of Michael Caine is shown as a visual example on the image of the slide

The director Michael Moore is pictured to represent an approach of curating preexisting content from YouTube or other video services. An example of a series of clipped and embedded YouTube videos is shown as an example

Defining a format or schedule for the event

So, this brought me to kind of defining the format for the event itself. It was a three-part watch party over two hours. So, we had a sort of conceptually based video collection, as I say, mashed together short clips, kind of one after the other. Then we had some discussion and then we had our second video collection. That was followed by some more discussion and a break. Then we came back and played a game. An online game which was not related to any of the content it was literally just kind of providing social levity if you will, and then we had a third video which we were planning to watch and we didn’t watch it because I basically lost my nerve a bit and felt like we were too close to the end and that we should just wrap up.

Selecting the tools - leading into the Develop phase (second diamond)

So, this leads me to the tool. So, based on all of these kind of aspects in the discovery and definition phase I decided that the best choice was a tool called backyard.co which had all of those reactions, chat tools, and this thing called YouTube watch party as one of its kind of interactive games that it offered. So, I like the fact that we could use the YouTube watch party game or tool and then switch to another game in the same platform so it would feel very integrated. It wouldn’t be a case of us switching between completely different tools in a session which I have since found that you kind of have a maximum of two tools in a session, otherwise you do start to lose people.

I used (interactive learning tool) to create the video bingo because I wanted something that was quick to build, it allowed interaction on a variety of different devices, and it also gave automatic feedback so people kind of got a confirmation that they had got the bingo right and that they had filled all of the squares in, and then I asked them as part of the onboarding to let me know when they had filled in all the squares. So, that I could kind of celebrate the person who managed to identify all the bingo phrases that were said in the videos first before anyone else!

References

Brame, C. J. (2016) ‘Effective educational videos: Principles and guidelines for maximizing student learning from video content’, CBE—Life Sciences Education, 15(4). doi: 10.1187/cbe.16-03-0125

Design Council (2015) ‘What is the framework for innovation? Design Council’s evolved Double Diamond’, Design Council. Available at: (Accessed: 13 March 2021).

Guo, P. J., Kim, J. and Rubin, R. (2014) ‘How video production affects student engagement’, in Proceedings of the first ACM conference on Learning @ scale. ACM, pp.41–50. doi: 10.1145/2556325.2566239

Hotchkiss, G. (2010) ‘The psychology of entertainment: Why we love watching in crowds’, Out of My Gord, 20 February. Available at: (Accessed: 4 July 2021).

Mastead, T. (2005) ‘The social dimension of emotion’, The Psychologist, 18(8), pp.484-487. Available at: (Accessed: 4 July 2021).

UCL (2020) ‘Why watching a movie could improve wellbeing’, UCL Brain Sciences, 20 January. Available at: (Accessed: 4 July 2021).

von Zimmerman, J. and Richardson, D. C. (2018) ‘Synchrony and the art of signalling’, The Psychologist, 31, pp.32-36. Available at: (Accessed: 4 July 2021).

Hone Smart Home

Mon, 13 Feb 2017 00:00:00 +0000

At the end of my last entry I outlined my discovery that there was an app building company called Bubble, which would likely lead to brand confusion. As a result I decided to go back to some of the ideas on and consider other possibilities that would tackle some of the same goals. The following company traits need to be suggested by the name:

Organisation, finesse, attention to detail
Protection and/or care
Attentiveness
A connection to housing and or containment

Initially I came up with “Corral”, especially as I thought that this would appeal to the Smart Home market in the United States which seems to be more fully developed than that of Europe (I have sought data to prove this but a lot of the market research is behind pay walls, I did however find a nice snippet from Statista included below).

“Corral” suggests containment, gathering and shepherding something that is perhaps unruly. There could also be a potentially useful or possibly tacky mnemonic in that “IoT Corral” would remind users of “O.K. Corral” (O.K. Corral (building), n.d.) , another US connection. However, I decided this would likely err on the tacky-side. “Corral” is quite a specific idea so I tried out some new logo ideas and also had a think about rocking the minimalist boat by creating a more three-dimensional logo.

Shapes which could suggest a corral - essentially an abstracted animal pen.

Shapes with the shadow casting turned on. This allowed me to think about how these images would look if they were simplified into 2D shaded areas to provide the illusion of depth and perspective. I created these images in Sketchup (Trimble, 2017), a piece of software which I will undoubtedly use for some of the graphic prototyping in the app. I have a background in 3D modelling and the smart home visualisations will be more effective if they are modelled architecturally.

In this version I omitted the lines in order to see how pue shading would look.

[Was once a linked image to the logo for Badisches Landesmuseum Karlsruhe - link is no longer available in 2021 when this post was archived]

I was thinking of something like this logo but with a top and bottom section and more shading placed over logo text or on the left of the logo image (Stankowski & Duschek, 1992 as in Hyland & Bateman, 2011, p. 266).

The “Corral” concept although an equilateral has some similarities to a circle or oval and could suggest protective and nurturing qualities as we learned from the initial lecture with Phil Jackson. It could also be seen to bear representational similarity to an eye depending upon the placement of the logo title text.

“Corral” wasn’t quite working for me, it felt too fortified and possible too specific to the United States, it also started to remind me of a bank or credit card and there needs to be something more personal and homely about this product. Once again I changed tact.

The next idea that I pursued was to develop the word “Hone” as the company or app name. I immediately had a better gut feeling about this word especially when combined with my “IoT” trademark-style embellishment. On the surface level there is a nice mnemonic in that the word rhymes with “Home” and upon searching there aren’t any competing products with the same name.

“Hone” is a verb which when used with no object is often confused with the concept of homing in on something as opposed to sharpening, perfecting or focusing which is the correct meaning; another “home” association, even though it is incorrect it is actually of benefit (Hone in vs. hone in, 2015). The only consideration with the word itself is that if viewed from a distance in a font without a high ascender on the “h” it could be read as “none”; this may mean that a capital letter at the start of the word is preferable. With this in-mind I started with the typefaces I had explore of what I had first in the Adobe Creative Suite (Adobe, 2017) and then took a look at some Google fonts (Google, 2017a). Initially I started with quite chunky fonts and felt that I would like to include a powerbutton in the design to indicate control rather than making the home connection explicit by using a symbol. This also felt like it would allow space for the company and app to expand to the commercial sector if the connection was more subtle.

The first electronic Hone logo mock-up using the Montserrat Subrayada (Ulanovsky, n.d.) font and Prosto One (Lemonad & Emelyanov, n.d.) fonts.

This initial logo was too blocked and the plugged-in nature of the black lines, reminiscent of wires connecting each letter suggested an audio system or electronic music genre. I created a contact sheet of fonts based to keep for future reference and to trial in some logo designs: You can view this at the .

I tried out a few more ideas based on some hinting towards the futurism and vorticism art movements (see 2, 6 and 7), although these experiments proved to be overly busy and vaguely reminiscent of the cognitive dissonance I encountered the time I observed the design of the “It’s a small world” ride at Disneyland in CA, USA.

Gbklyn, CC BY-SA 4.0 , via Wikimedia Commons

I ran the logo contact sheet by a few people via social media, just for some initial thoughts and they gave me some good things to think about particularly the difference between European and US design tastes (an even split of EU and US comments). This also challenged some assumptions I had made about the better designs, so I will work up the best ideas in time for the session with Phil in order to get his feedback on the concept.

As a final piece of research to confirm that “hone” was a solid choice of word for branding I looked at the Google Ngram viewer (Google, 2017b). The Ngram Viewer allows you to search Google books content from 1800 - 2008 based on boolean word queries. So I searched for “hone” and I was interested to find that the capitalised form of the word was at the peek of it’s popularity around 1910 right at the end of the Edwardian era. I have made comparisons between the current state of Internet of Things (IoT) to the disarray around .

For example, during the Edwardian period there were different current voltages for electrical supply in different areas of England surly a recipe for fire or electrocution; IoT has many different wireless frequencies and no common consensus on standards so it isn’t all that different (although accidental death is less likely). This Edwardian connection provided more design inspiration and made me think that deriving inspiration from Edwardian architectural etchings and engravings may look more modern than 3D models which look dated very quickly. For example, Hive which is British Gas’s Smart Home thermostat has a lovely simulation interface, but the home simulated with 3D graphics looked like an early 2000s computer game (it seems that British Gas might have realised this too and the demo is now harder to find on the site, but still seems accessible via this link: [link no longer available]. With this in mind I considered what a banner could look like for hone, the logo needs some tracking adjustments, but this was a first try with some basic layer blending and a clean finish.

Phil also suggested that I look at some different wood finishes if I stick with this aesthetic. After coming back to this header test after a couple of days the current wood finish sort of reminds me of that cheap MDF coated board, so I definitely need to look at some alternatives. Something with more of a creamy background like this futurist drawing might be better.

By Antonio Sant'Elia - Utopie metropolitane, la mostra (in Italian). Style & Design. l'Espresso (2013-03-28). Retrieved on 2013-04-01., Public Domain, Link

References

Adobe. (2017). Adobe creative cloud [Computer software]. Retrieved from https://www.adobe.com/uk/creativecloud.html

Google. (2017a). Google fonts. Retrieved from the Google fonts website: https://fonts.google.com/

Google. (2017b). Google Ngram viewer. Retrieved from the Google Ngram Viewer website: https://books.google.com/ngrams

Home in vs. hone in. (2015) [Blog post]. Retrieved from http://blog.dictionary.com/hone-in-vs-home-in/

Hyland, A., & Bateman, S. (2011). Symbol. London, England: Lawrence King Publishing Ltd.

Lemonad, J., & Emelyanov, P. (n.d.). Prosto one. Retrieved from https://fonts.google.com/specimen/Prosto+One

O.K. Corral (building). (n.d.). In Wikipedia. Retrieved February, 18, 2017, from https://en.wikipedia.org/wiki/O.K._Corral_(building)

Trimble. (2017). SketchUp Make [Computer software]. Retrieved from http://www.sketchup.com/download?sketchup=make

Ulanovsky, J. (n.d.). Montserrat subrayada. Retrieved from https://fonts.google.com/specimen/Montserrat+Subrayada

Naming - initial ideas

Sat, 11 Feb 2017 00:00:00 +0000

On this page of my sketchbook I used a dice rolling exercise (Barnard & Briscoe, 2016) to explore different name combinations for the potential company. Initially I gravitated towards BubbleHome as a concept.

I then completed two iterations of the Lean Business canvas and fleshed out the idea a bit more. To summarise the main points, as this plan is likely to evolve over time:
Problem - top 3 problems

Each device has its own management system - this is a lot to keep track of
There is not a user-friendly way to map and monitor a smart home ecosystem in one place
Devices can have significant security issues when not setup correctly

Solution - top 3 solutions

Aggregate operational updates from devices via open api
Provide a mapping tool allowing users to position devices in a model of their home and review synchronous operations
Provide security advice based on device ecosystem and configuration patterns.

The cost structure versus the customer segment is a bit of a sore point in the canvas plans. The development costs seem like they will be very high in comparison to the small audience for this product in Europe. Marketing this product to US consumers might reap more benefits as there are a greater number of smart home products specifically marketed in the United States. The research to prove this is largely behind heady pay walls (NPD, 2017) but the main products such as Nest (Google, 2017b) and SmartThings (Samsung, 2017) were initially launched in the United States and therefore logically it makes sense that they may have larger customer segments in the United States as opposed to Europe. Another factor which I was able to locate recent research on was that security cameras are the most popular devices (NPD, 2016). This emphasis on security could serve my solution as well, as IP cameras are for security, but if they are compromised that could present some huge privacy issues and security issues for the end-user. It reminds me of the Shodan baby cam story (Porup, 2016) from last year and this thread on Reddit (jenn_and_tonic, 2016):

I spent a bit of time sketching logo ideas for a logo. I felt like I wanted BubbleHome to be approachable so initially I considered a bespoke serif script font. However, this would be rather unconventional for a tech-focused company where clean sans-serif screen fonts are the norm. I tried out the idea of including a house pictogram in the logo, but it kept looking more like an upload symbol than a house/home and I felt that it would narrow the scope of the solution (visually exclusive; what about apartments?), and there might be future expansion into corporate solutions.

This version was too busy and was really just a test. The blue background seemed caring and trustworthy, as did the circular bubble formation. I decided to take these elements forward to the next version. Font: DIN Alternate Bold // Background colour: #448ccb

I really liked this version and the evolution of “IoT” for Internet of Things becoming a trademark-like descriptor providing immediate context. To back up my assumption that IoT is an understood concept, I did a bit of digging in Google Trends (Google, 2017a). I compared several search terms and was interested to find that the interest in IoT now far outstrips “Internet of Things” although it could be that some are searching to find out what the acronym means! I also looked at “Smart Home” and “IFTTT” (main competitor in theory) for comparison. Another interesting observation was that the “Smart Home” term seems to be greater interest in the United States and the United Kingdom and “IoT” seems to be more prevalent elsewhere - this might be partially explained by the translation of Smart Home into different languages. This is something to bear in mind though with regard to marketing.

[Had to remove older Google Trends data]

I got as far as creating a Hero image for the Bubble or BubbleHome concept and then found that there was app builder with the name Bubble ( ) and very distinctive logo and I felt that this would like affect the success of the concept as an independent brand.

Plus there is a danger that people might think of a house like this:

Back to the drawing board…

References

Porup, J. M. (2016, January 23). “Internet of Things” security is hilariously broken and getting worse. ArsTechnica. Retrieved from https://arstechnica.com/security/2016/01/how-to-search-the-internet-of-things-for-photos-of-sleeping-babies/

Barnard, D. & Briscoe, R. (2016, June 14). Workshop on creating games and playful interations for adult learning in public spaces. Workshop presented at the first conference on Playful Learning, Manchester, UK. Abstract retrieved from http://conference.playthinklearn.net/blog/programme/full-abstracts-thursday-14th#10

Google. (2017a). Google trends search [Computer software]. Retrieved from https://www.google.com/trends/explore?q=smart%20home,IFTTT,Internet%20of%20Things,IoT

Google. (2017b). Nest learning thermostat. Retrieved from the Nest website: https://nest.com/uk/

jenn_and_tonic. (2016, June 19). I bought and returned a set of WiFi connected home security cameras. Forgot to delete my account and I can now watch the new owner [Electronic forum post]. Retrieved from https://redd.it/4ortwb

Maurya, A. (2016). Lean canvas. Retrieved from https://leanstack.com/lean-canvas/

NPD. (2016). Network connected cameras account for the majority, 61 percent, of U.S. home automation industry revenues. Retrieved from https://www.npd.com/wps/portal/npd/us/news/press-releases/2016/safety-and-security-are-lead-drivers-in-smart-home-technology-interest--according-to-npd-connected-intelligence/

NPD. (2017). Home automation. Retrieved from http://www.connected-intelligence.com/our-research/home-automation

Samsung. (2017). SmartThings - smart home system. Retrieved from the Samsung SmartThings website: https://www.smartthings.com/uk/

Welcome to my new IDM22 Journal

Sat, 04 Feb 2017 00:00:00 +0000

Greetings! I have decided that I would like to keep up my reflective writing activities during IDM22. This is due to my recent experience on the web development module and also thinking back to when I took IDM21 (seems so long ago now!). In both cases it was an immensely valuable venture.

Purpose of this blog

I find that I needed a central place to gather my thoughts and referencing-styles throughout this process, so a blog seems like the perfect solution to pull together snippets as I go along. This is not however, just any blog as I have decided to build it in Jekyll (2017) a very basic blogging platform, although deceptively technical, which is based on ruby. I feel that this will give me an opportunity to learn more about ruby and also after about 10 years of working with WordPress as a CMS I think that it is time to expand my repertoire a bit. Essentially, this site will be my online whiteboard as it is essential for me to have a space which I can access from anywhere and also I do not actually own a physical whiteboard! Using one at university would not suffice as I need to leave my scribblings and musings on it!

Initial ideas

To recount a few initial ideas based on our first design session. We have been set the task of devising a logo for a company and I suspect that the company will be our fictional client in this scenario. I also know that we have to create a functioning prototype for this particular assignment, so with that in mind I considered profitable and interesting options for an app design.

As a basis for this I considered some potential problems that could be solved. At first I thought that it would be good to build a clinical examination app, as that would benefit aspects of my day job supporting nursing students. Students have to take practical examinations for their clinical skills and an app that helped make it easier to mark these tests would be immensely helpful (the tests are often very complex). However, after more consideration I felt that this would not offer sufficient design challenge to satisfy the module’s learning objectives. After all this type of app would essentially be an interactive form. There is a lot of value in a well-designed form, but not a lot of aesthetic value perhaps.

Like OnStar for your smart home

With aesthetics and functions in mind I decided to return to some of the ideas that I touched upon in my earlier research project for IDM13. During IDM13 I completed a short 10 credit research project looking at 5 consumer-level Internet of Things (IoT) systems, including two smart home systems; Nest and SmartThings (Google, 2017; Samsung, 2017). The research project had provided me with some domain knowledge and at the end of the project I had felt like I would like to do more. One of the ideas which I had come up with during the project and have since learned is not unique is thinking about a management or monitoring tool for all IoT devices in the home regardless of vendor. This would be incredibly difficult to accomplish. Think of it, a management tool which could be used with any IoT device so all of the separate apps would only be required for specific configuration needs. For this you would need a common platform/OS for it to be viable, otherwise you would spend all your time trying to keep up with the platform changes and APIs.

IFTTT.com have it right in this area as they put the onus on the developers and manufacturers to update their IoT related applets so that they “works with IFTTT” (IFTTT, 2017). They have a strong brand, but they were also first to the party. I found myself thinking about whether there could be an app and service which could be more of an aggregator, picking up a log of what each device was doing and when, alerting the user to issues, but having a read-only type relationship with the systems and devices. This service would have a security angle and I felt that it would be like OnStar enhanced breakdown recovery (Vauxhall, 2017) for cars, except it would be for Internet of Things devices. This product would occupy a security angle, although I wouldn’t go as far as saying that it is akin to anti-virus, it can not perceive or diagnose threats but it might be the canary in the coalmine in that it would provide an early warning through it’s holistic overview of all IoT sub-systems in the home, rather than having to monitor each device individually via it’s own app.

Another aspect is that there is currently a large influx of devices on the market and based on observation it seems unlikely that all of these manufacturers will survive. For instance Revolv which was bought by Google’s Nest and then shut down (Hern, 2016) - however if a connection could be made with OpenHAB (OpenHAB Foundation, 2017) a platform for allowing continued use of devices when company support has been withdrawn (e.g. the company has gone out of business) then that could be a compelling piece of functionality, allowing for continued oversight, within the app I plan to design. This is out of scope for this part of the project, but would be something to consider further down the line, if the user base grew to support that.

So essentially the app I would like to build, is for web and mobile, although mobile first and is a utility that allows users to map and monitor their in-home ecosystem. I also envision that the app will include a catalogue of devices currently on the market with their established design and configuration patterns so that each device’s components could be mapped and there could even be a try-before-you-buy dimension to that. Additional devices could be added to the catalogue based on user requests and also possible sponsorship tie-ins from an advertising perspective. The idea of try-before-you-buy also emerged from my earlier research, you can view the design specifications which .

I used this page of sketchbook to explore different ideas related to objects in the home, Internet of Things and word associations.

References

Google. (2017). Nest learning thermostat. Retrieved from the Nest website: https://nest.com/uk/

Hern, A. (2016, April 5). Revolv devices bricked as Google's Nest shuts down smart home company. The Guardian. Retrieved from https://www.theguardian.com/technology/2016/apr/05/revolv-devices-bricked-google-nest-smart-home

IFTTT. (2017). One connection countless possibilities. Retrieved from the IFTTT website: https://partners.ifttt.com

Jekyll. (2017). Blogging platform based on Ruby (Version 3.4.0) [Computer software]. Retrieved from https://jekyllrb.com

OpenHAB Foundation. (2017). Introduction. Retrieved from the OpenHAB website: http://www.openhab.org/introduction.html

Samsung. (2017). SmartThings - smart home system. Retrieved from the Samsung SmartThings website: https://www.smartthings.com/uk/

Vauxhall. (2017). Vauxhall Onstar. Retrieved from the Vauxhall Onstar website: http://www.vauxhall.co.uk/onstar/index.html

The weekend of doom

Mon, 16 Jan 2017 00:00:00 +0000

In my last entry I talked about the suggestions that Theo provided from his perspective as a nurse and researcher. They were very helpful, but lead to some rather major layout changes. In particular, the to do: “I will need more space in the carousel/timeline”. This led to what I nicknamed in my GitHub posts as the Weekend of Hell, I am softening this within the context of this journal entry to be the Weekend of Doom.

. An image showing how the site looked prior to the changes to the carousel.

Altering the Flickity Carousel/Timeline

So changing the height of the Flickity carousel used for the patient timeline meant that the “dot” buttons had to be moved upwards otherwise they would be off the bottom of the visible area on most standard screen sizes. For reference, I have included a long screenshot that I made of the site prior to this work, on the right. So I decided that the dots should reside on-top of the carousel and then they would also be spatially connected to the navigation of the timeline. This is not really how Flickity carousels are really designed to exist (metafizzy, 2016), but it is closer to the original inspiration for my site the DuckDuckGo about page (DuckDuckGo, 2014). The main issue that I ran into was that the carousel needed to resize itself dynamically and I had media queries which hid the dots on mobile devices (as they were no longer very useful as buttons at that size). However, as the dots themselves are rendered automatically by the JavaScript, they were rendering much more quickly than the resizing. So I upon sizing-up a responsive browser window the dots and timeline appeared on top of everything and looked awful. I tried everything I could think of to fix this issue. I attempted to delay the dots in the JavaScript. I also tried writing a script which watched for the window size. I tried positioning the dots so that they moved upwards. I also tried creating condition code which watched for various conditions to be met prior to triggering the dots. Things I wrote worked to an extent, but not sufficiently or reliably enough to depend on them. In the end I had to temporarily hide the dots by setting them and the timeline to ‘display: none’. I also had to hide the spot where they generated by moving the about section upwards. Essentially the solution’s analogue equivalent is that the rabbit is being hidden in a compartment of the hat the whole time (oh wait…is that how they do it?).

Performance Issues

I am actually grateful that all of this happened as once I had cracked the rendering issue I realised that there were some major performance issues with the carousel/timeline. It took a bit of time to get to the bottom of it, but in the end I realised that it was the long svg that I had included to indicate the patient’s anxiety levels. Through testing in multiple browsers, on Mac, PC and mobile I realised that the image also wasn’t loading anywhere other than in Chrome for Mac. Everywhere it was just gumming up the works. I reassessed the need for the anxiety level gauge/image and decided that it was important to keep it. So through trial and error I ended up loading with an image tag in the html as a very, very long svg. This is the only svg in the site that I could not optimise as it resulted in optimisation errors because it was too long dimensions-wise. Also, I realised that I did not really want to optimise it as I would result in losing the drop shadow detail which I had added to a new version of the design.

The new design

The performance issues highlighted that the design of the patient anxiety-level link was in fact creating an optical illusion and making the carousel look guddery/jerky even once the problems with it were fixed. The new design not only looked more streamlined, but it moved more smoothly simply by virtue of its aesthetics.

Version 1 - This screenshot deliberately shows the progress between two slides. This version of the anxiety level image had a visual effect akin to passing a row of trees with bright light behind them. It became very jarring when viewed at-speed

Version 2: I created a long svg in Adobe Illustrator with a greater level of logic. Attempting to map the story thematically to a graphical interpretation of the patient stress levels. This link is on the one-hand more graph-like but also more oraganic as I made it from scratch by drawing and manipulating a continuous line…Can you tell I went to art school?

Space economy

This entry represents the end of a period where I added a lot of content to the site. This was a good thing, but it also meant that there were areas that felt overly heavy like the devices area. I decided to try adding a collapsible accordion as a container for the information, using a tutorial from Codrops (Mary Lou, 2012). The tutorial was bit old but I liked how it used CSS and I felt that I could build on it. The accordion looked quite nice too, I’m sure that you can sense a ‘but…’ coming on here? Well I will explain it in the next journal entry. I have however included a screenshot the accordion so that it can live on it perpetuity.

. This is where I got to with them. Partially styled, but a nice efficient use of space. I would have added svg “+“s on the right to indicate their interactivity.

The contact form actually works now

I wrote a dev post about the contact form, but yes the contact form is now working as it should. I just need to enhance the warning/alert aspects and add aria labels etc. And so does the back-to-top the button as in it only appears when one is sufficiently far from the top of the page for it to be useful. This took a couple of iterations of code to get right.

Finally…

I had come up with a CSS style for reference sections and I decided to add it to this journal as well as part of my custom child theme. I am going to try (time allowing) to add it to my all my posts retroactively, but it is a big job and I have surprised myself at the sheer number of posts that I have amassed here in the past few months.

References

Coyier, C. (2013, March 5). Using SVG

\[Blog post\]

. Retrieved from

DuckDuckGo. (2014, February 20). About DuckDuckGo. Retrieved January 15, 2017, from DuckDuckGo.com website:

Mary Lou. (2012, February 21). Accordion with CSS3

\[Blog post\]

. Retrieved from

metafizzy. (2016). Options. Retrieved January 15, 2017, from metafizzy website:

Sowmya. (2013). Re: Nesting an svg inside a div

\[Online forum comment\]

. Retrieved from StackOverflow website:

Charty McCharterson

Sat, 07 Jan 2017 00:00:00 +0000

I knew that all of that work that I did on polls would come in handy at some point. The time arrived, as displaying data was something that seemed important from the beginning, to support the goals for the project. I wanted to support the information about ‘UK smart device ownership’ with some data. Having spent quite a bit of time and trying things out, I felt sure that the the Google Charts api (n.d.) would give me the level of interactivity and customisation required.

Something I changed

Like the tools I had used already (see earlier entries including Flickity by metafizzy (2016), smooth-scroll by cfernandi (2016)) the instructions always say to call the JavaScript package in the header. This is something that my instructor, Marcus, had pointed out as bad practice. Therefore, I created a new eventlistener in my JavaScript file in order to load google’s “loader.js” script. This allowed me to place the ’ tag at the bottom of my index.html file. However, unlike the other widgets and code snippets that I have used, I cannot compile Google’s JavaScript as part of my own script (Google, 2016a), it has to be loaded from Google servers (licensed under Apache license version 2.0 (2004) ). For this reason I reused the loading GIF from the contact form, to show while the chart loads. The data itself is from Offcom’s report entitled, The Communications Market, 5 Internet and Online Content (2016a, p. 191). What is great about their site is that they make the raw data available in Microsoft Excel format, so I was able to construct the chart based on a subset of data (Ofcom, 2016b). In order to show the age versus ownership I selected a stacked barchart as a space efficient way to show the data.

Prepping the chart for print

I have still to create my print stylesheet, which is something that I will do towards the end of the project. In the meantime it made sense to make sure that the chart was prepped for printing to png. I am not going to make a link to the png available as that function will run in browsers which support the HTML5 element (Google, 2016c). However, what customising this script did do, was create a static view of the chart showing it in suitable format for printing.

Tab clear

I decided that I needed to highlight the User Experience section of the portfolio page design, as it was all very wordy. There is still a lot to consider in this area, but I decided to add a tab image on the top-left of the UX factors (formerly scenarios) section. I started by creating an svg, partially inspired by a post on CSS-Tricks (Coyier, 2013). However, I really wasn’t happy with it in terms of formatting and scaling. For now I have replaced it with a tab which I created using pure CSS. The tab is actually made of two divs, one for the the main tab shape (rounded rectangle) and one for the slant leading up to it using the skewX transform option. However, I will have to replace this as it is only compatible with IE11 or later (Can I use, 2016). It is a shame, but it was good to learn about the transform option and again I used the ::before pseudo element to add text content on the div.

The first attempt at the tab using an .svg

Second attempt at a tab using two CSS divs - one skewed 40deg - sadly it will need to be replaced due to the need for background compatibility. Ultimately, I will need to go back to an svg solution, but I will draw it to look like what I came up with using the CSS.

References

Apache Software Foundation. (2004). Apache license version 2.0. Retrieved January 7, 2017, from Apache Software Foundation website,

Can I use… (2016, October 23). Retrieved January 7, 2017, from

Coyier, C. (2013, December 4). SVG tabs (using an SVG shape as template)

\[Blog post\]

. Retrieved from

cferdinandi. (2016, December 11). Cferdinandi/smooth-scroll. Retrieved December 11, 2016, from

Google. (n.d.). Charts | Google developers. Retrieved January 7, 2017, from Google Charts,

Google. (2016a, September 12). Load the libraries. Retrieved January 7, 2017, from Google Charts,

Google. (2016b, September 12). Bar charts. Retrieved January 7, 2017, from Google Charts,

Google. (2016c, October 12). Printing PNG charts. Retrieved January 7, 2017, from Google Charts,

metafizzy. (2016). Flickity. Retrieved January 15, 2017, from

Ofcom. (2016a). The Communications Market 2016: 5 Internet and online content. Retrieved from

Ofcom. (2016b, August 4). Data downloads. Retrieved January 7, 2017, from Ofcom.org.uk,

Accessibility and responsive bits

Mon, 02 Jan 2017 00:00:00 +0000

This journal entry represents a mammoth effort to add high-quality content to the site.

I developed and added the patient story. This was based on a characteristics list which I worked through rather vigorously on the afternoon of the 25th. This is still in handwritten form, so I will link to it as a google doc later on. I have included some key references for that process below. I want to highlight the National Joint Registry (2016) data, which was particularly helpful during the process of defining the patient story. Also the specific images that I used will be cited on the portfolio site (including cc0 works; royalty-free works) as I feel it is always very important to include the provenance of images in any context, but especially when engaging in a thought process based on a fictional patient/nurse interaction.
I added images to support the patient story. These images were sourced from pixabay and one of my all-time faves, Creative Commons search as a means to filter Flickr images by license ( ).
I recreated the images that I found for the patient story as drawings in Adobe Illustrator. I wanted the images in the timeline to be small (100px x 100px); this is a limited amount of ‘bandwidth’ to communicate a visual concept. For this reason I decided to use Adobe Illustrator to trace the images and then re-paint them, so that I could accentuate certain aspects through the use of selective colour. This worked well and I did investigate whether these images could be included as svgs, but the visual information was too complex as they were based on photographic materials. As a result I stuck with .png format as the final output.

] .svg version of a timeline image - quite a bit of artifacting (tech-speak for mess) in the image render and it looks too sketchy

.png version of the same image in Adobe Illustrator - more of the visual information from the original photograph is retained. This version has the right level of abstraction.
All of the images were optimised using . Honestly, I absolutely love this tool and will be using this from now on for all my images. Their algorithm somehow trims off the excess while keeping the core visual information.
Accessibility. I ran an accessibility analysis on the site using the WAVE Web Accessibility Tool ( ). It is pretty good, I still have a few aria, alt and title tags to include here or there but I have made progress in this area.
Infuriating. As someone who uses Reader View (I found out that this is the official name for it) mode in Firefox and the equivalent in Safari, I was very frustrated by the restrictive and arbitrary local style sheet implemented by this mode. I have spent way too much time customising how the site looks in this context, but it really mattered to me as this would really put me off a site. Also, focusing on it has highlighted the importance of the semantic web; the reader mode taps into the and other html5 element definitions. With a bit of hardcore tweaking, I finally have something that I can stand behind. The tweaking is outlined in a development post, however I found out by digging into the reader displays in the respective browser stylesheets that they will ignore certain css classes. Specifically I needed to implement a class called .hidden which is the container for the flickity carousel dots. The ‘dots’ are completely useless in the reader view and just look like an orphaned ordered list. I also instituted a .sr-only class which is applied to loading GIFs and other elements which should not be shown in the reader mode. All of this digging will serve me well for the print stylesheet, no doubt…
I ran the Google mobile accessibility test on the site - It passed! Here is the proof: There is still a lot of content to add, but it is great to know that I am on the right track.

References

BBC (2013, January 16). Going paperless “would save NHS billions.” BBC Health. Retrieved from

BBC (2016, September 7). NHS: Health apps to inform patient records. BBC Health. Retrieved from

Booth, R. (2016, December 13). The doctor on your Xbox? The NHS needs more digital ambition. The Guardian. Retrieved from

BS EN ISO 13485:2016 Medical devices. Quality management systems. Requirements for regulatory purposes. (2016). Retrieved 22 December 2016, from

BS ISO 13606-2:2008 Health informatics. Electronic health record communication. Archetype interchange specification. (2008). Retrieved 22 December 2016, from

Choices, N. (2016, November 1). Health and fitness trackers. Retrieved January 2, 2017, from

Dolatabadi, E., Babak, T., & Alex, M. (2014). Vision-based approach for long-term mobility monitoring: Single case study following total hip replacement. Journal of Rehabilitation Research and Development, 51(7), 1165–76.

Farmer, A. Wearables sector grows as smartwatches increase in popularity. Retrieved January 2, 2017, from

Heartfield, R., Loukas, G., & Gan, D. (2016). You are probably not the weakest link: Towards practical prediction of susceptibility to semantic social engineering attacks. IEEE Access, 4, 6910–6928. doi:10.1109/access.2016.2616285

Institute for Quality and Efficiency in Health Care (2014). What can help relieve anxiety before surgery? - PubMed health - national library of medicine - PubMed health. Retrieved from

Johansson Stark, Å., Charalambous, A., Istomina, N., Salanterä, S., Sigurdardottir, A. K., Sourtzi, P., … Bachrach-Lindström, M. (2016). The quality of recovery on discharge from hospital, a comparison between patients undergoing hip and knee replacement - a European study. Journal of Clinical Nursing, 25(17-18), 2489–2501. doi:10.1111/jocn.13278

Nasr, N., & Enderby, P. (2014). Redefinition of life experience following total hip replacement: Analysis of narrative as performance. International Journal of Orthopaedic and Trauma Nursing, 18(2), 89–98. doi:10.1016/j.ijotn.2013.07.005

National Information Board. (2015, March 4). National information board’s workstreams. Retrieved January 2, 2017, from

National Joint Registry. (2016). 13th Annual Report 2016 National Joint Registry for England, Wales, Northern Ireland and the Isle of Man Surgical data to 31 December 2015. Retrieved from

NHS Choices. (2015, November 3). Health Apps library - NHS choices. Retrieved January 2, 2017, from

Press Association (2016, September 7). NHS to have one website for appointments, prescriptions and advice. The Guardian. Retrieved from

Pulkkinen, M., Junttila, K., & Lindwall, L. (2015). The perioperative dialogue - a model of caring for the patient undergoing a hip or a knee replacement surgery under spinal anaesthesia. Scandinavian Journal of Caring Sciences, 30(1), 145–153. doi:10.1111/scs.12233

Rudolfsson, G. (2013). Being altered by the unexpected: Understanding the perioperative patient’s experience: A case study. International Journal of Nursing Practice, 20(4), 433–437. doi:10.1111/ijn.12195

Wilson, D. (2016). An overview of the application of Wearable technology to nursing practice. Nursing Forum. doi:10.1111/nuf.12177

Wilson, C. J., Mitchelson, A. J., Tzeng, T. H., El-Othmani, M. M., Saleh, J., Vasdev, S., … Saleh, K. J. (2015). Caring for the surgically anxious patient: A review of the interventions and a guide to optimizing surgical outcomes. The American Journal of Surgery, 212(1), 151–159. doi:10.1016/j.amjsurg.2015.03.023

Image source: “ ” by is licensed under

Cellular concerns

Sun, 11 Dec 2016 00:00:00 +0000

I have been plugging away at the portfolio site with the primary aim of getting a semi-functional prototype version to Dr. Theo Fotis on Monday 12th of December. There is a still a huge amount of stuff to do, fix-up and streamline I will add these tasks to my Trello board. This journal entry provides a rundown of the decisions that I have this week.

Flickity carousel

I decided to make the carousel-cell 100% width due to the need for a more immersive timeline. What I mean by this is that I felt that the cells were too modular before and the greater width (formerly 66%) makes more sense in terms of showing the long anxiety levels .svg file. I still have lot of work to do in terms of consolidating my JavaScript and CSS files into one of each and then also minimising my JavaScript file. One of the things that Marcus brought to my attention was that my script sources should not be loaded in the header of my index.html and that this was bad practice. They now reside under the footer, but this presented some new challenges. For example the smoothScroll function had issues loading so I added a new main.js file (this is will become the final master js file) and added a window EventListener and then added an init function - to initialise SmoothScroll after the load is completed. The other issue is that Flickity Carousel for the timeline started to flash up momentarily as a column until it found it’s brain (aka the script actually loaded). I actually only discovered this due to using my mobile broadband stick in a cafe and noticed the latency. The Flickity Carousel is currently initialized at the bottom of a unique flickity.js fileI needed to keep the smoothScroll.js and flickity.js separated while I figured out how to get things working harmoniously.. What I needed to do to solve this was to set the carousel opacity as 0 until the window has loaded and as the carousel is not a function in the same way as smoothScroll it was a bit trickier for me; there wasn’t something straightforward for me to work with. What I ended up doing was adding a new variable for carousel immediately after initialising flickity (entails designating the css selector as a flickity carousel) and then applying a style to make the opacity 1I had to consult github for help with this as I was at a loss for a bit: .. This is working nicely, however the delay or a white screen may be improved by a momentary loading GIF in order to explain what is going on for a slower connection - one to add to the to do list! I quite like the Buffer GIF animation and this helpful tutorial explains how to code something like this with an SVG file as opposed to GIF, I’ll give it a go: . Also due to the audience of this site, I think that it is important to include the word “Loading” alongside any GIF or animated SVG. As part of the process above I added the cellSelector option to the carousel in JSON format, as initially I thought that I might want an EventListener. It seems that this might be useful later on, so I have left it in place for now. e.g. data-flickity='{ "cellSelector": ".carousel-cell", "freeScroll": true}' Another issue was with the customised Flickity dots (used for timeline navigation) was that I had set the position of their container to absolute and the overflow to hidden as a solution for smaller screens or browser windows (the dots disappear entirely on a mobile phone sized screen). However, I noticed a sort of ghosting issue as a consequence of the overflow.

[

] It is quite subtle, but can you see those little grey lines between 2 and 3 and also between 3 and 4? There be the ghosties! I fixed this by adding “white-space: nowrap;” to the dots themselves so that the wrapping was disabled. Result!

. Yay, no more ghosties!

Here be the stuff of nightmares…

I have to admit that I spent way too much time on this issue, but it was honestly driving me to distraction. So having fixed my grid so that it was had even widths and looked lovely as I started to use my grids I found that I needed to add unique classes for the blocks that appear in each

of the html file. The grid structure is left in place as a logical point of reference. Then I found that my written content in the grid was overflowing beyond the height of the sections. This was relatively easy to fix by setting the classes for the sections to have relative positions and have overflow set to auto. Phew. However, as I added some placeholder content to my grid blocks I found that the widths were still perfect but the heights of columns were not okay. What I mean by “not okay” is that if a block had more written content then it was longer to contain this content. Therefore blocks positioned adjacent to each other looked askew.

/* tried this and hated it .is-table-row { display: table; } .is-table-row [class*="col-"] { float: none; display: table-cell; vertical-align: top; border: solid 7px #EEEEEE; border-radius: 0; } */

This was strangely very hard to fix. I tried several methods. First I tried fool it into thinking it was a table, but I lost my gutter and I worried about responsive accessibility. I also tried CSS pseudo classes (which I now have a little bit of experience with after customising the dots), but it didn’t provide the desired look either. I also tried adding attributes to the section container and the “One True Layout Method” (Coyier, 2010) where the margin-bottom is set to -99999px and the padding-bottom is set to 99999px and the overflow is hidden. This feels like brushing the problem under the carpet and it looks like it too as it cut off the bottom of my block outline and I like the outline. In the end I used row class for my grid defined to display flex and and then use the flex-wrap wrap setting. Alas, with one fell swoop my dream of full functionality in Internet Explorer is dashed as Flexible Box Layout module is not supported in IE9 at all ( ).

In an earlier journal entry I had cited this fixed navigation example on codepen ( ) as being close to what I would like for the navigation on my site, however I have also been devouring a book on web accessibility, Inclusive Design Patterns Coding Accessibility Into Web Design and anything fixed in the CSS was identified as a no-no in the book (Pickering, 2016). I had also found that the fixed header height meant was causing issues with the distance of the smoothScroll function. I was able to fix this by checking their documentation and adding the labeling the header as data-scroll-header and then specifying this in the initiation script. Previously I had defined a spacer div for this purpose, it didn’t work perfectly for the smoothScroll function, but it ended up being handy for defining white space between the timeline and the about area (in addition to the use of margin settings it was helpful to have something that was independent). In the end I didn’t need most of this work as due to the advice in Pickering’s book, I decided that the navigation header needed to have a relative position instead of being fixed.

Anxiety levels

As I mentioned at the beginning of this post, I wanted to give the carousel/timeline a long image that continued along the base of cells showing the anxiety levels of the fictional patient during the story (this was shown in ). I started by testing with a .png image and as I anticipated it looked awful but I was most interested in getting the positioning setup correctly. The issue was that the image kept showing up above or in front of the text inside the description div. Also as the window was resized the image floated upward from its initial position. The only way that I could fix this was to use z-index and a fixed position for the image container (I already broke the rules about fixed items - see above) and then added a unique style id called #anxiety to specify how my image was shown in the container (as a background image). Initially I thought that I might need to specify one strip of the image per cell in the Flickity, but they kept overlapping and having layering issues. The logical approach in the end is to have one very long SVG. I need to optimise the SVG prior to the final release of the site, but at the moment I am still adding to it in Adobe Illustrator as I need to finish writing the patient story prior to finalising the graphic. As this graphic only serves an aesthetic purpose I think it is alright that it is both fixed and defined as a background image (and therefore cannot have an alt tag applied for accessibility reasons).

Bios section

I added box-shading to the photos - they needed a little something to differentiate them against the background. Once again this is not supported in IE9 although it is less critical than the flex-box issue outlined above.

Responsive adjustments

I worked on the mobile phone break point for the media queries first. Specifically, @media (max-width: 414px) I based this size on the Google Nexus 6P and the Apple iPhone 6 plus as although these are both phablet sized I certainly need the grid blocks to be shown in a single column at this size not in rows. In general I would like to steer clear of too many device specific breakpoints as it is better to think about the legibility of the design rather than get too obsessed this (an article by Justin Avery (2013) supports this view: - not everyone agrees on this). Also, I realise that I need to go through the code and consolidate my classes and ensure that my units are standardised as % and em prior to doing too much work on this. So the rest of the styling and layout needs to be completed first, based on a desktop first mentality.

Thinking about the patient

I found myself rethinking the fictional patient’s name, based on the ever helpful Wolfram Alpha. It seems that women named Ruth are demographically older than the fictional patient should be (roughly 55-65yrs although I need more data on this - more on this in my next post). Although Wolfram Alpha is based on demographic information from the United States it is a good basic litmus test for this. Here is my comparison, Carol may be a better name:

References

Avery, J. (2014, October 28). Why you don’t need device specific breakpoints. Retrieved December 11, 2016, from Background-repeat. (2016, December 3). Retrieved December 11, 2016, from Background-size. (2016, December 3). Retrieved December 11, 2016, from Blender. (2016). Force a div to contain floated child divs. Retrieved 11 December 2016, from Bos, B., Etemad, E. J., & Kemper, B. (2014, September 9). CSS backgrounds and borders module level 3. Retrieved December 11, 2016, from Box-shadow. Retrieved December 11, 2016, from Can I use… Support tables for HTML5, CSS3, etc. (2016, October 23). Retrieved December 11, 2016, from cferdinandi. (2016, December 11). Cferdinandi/smooth-scroll. Retrieved December 11, 2016, from Cope, S. (2011a, September 6). Z-index. Retrieved December 11, 2016, from Cope, S. (2011b, September 6). White-space. Retrieved December 11, 2016, from Coyier, C. (2010, October 8). Media queries for standard devices. Retrieved December 11, 2016, from Danilo, A. Splash vector graphics on your responsive site. Retrieved December 11, 2016, from Kraken.io image Optimizer. (2013). Retrieved December 11, 2016, from LePage, P. (2016, December 16). Responsive web design patterns. Retrieved December 16, 2016, from Lumsden, A. (2012, June 27). Getting started with Scalable vector graphics (SVG). Retrieved December 11, 2016, from metafizzy. (2016). Callback when Flickity is initialized? · issue #269 · metafizzy/flickity. Retrieved December 11, 2016, from metafizzy. Options. Retrieved December 11, 2016, from

Pickering, H. (2016). Inclusive design patterns (Kindle ed.). Freiburg, Germany: Smashing Magazine GmbH.

Quick and simple image placeholders. Retrieved December 11, 2016 (UPDATED: May 5, 2019), from Salloum, N. (2014, April 4). CSS equal height columns, Three different ways. Retrieved December 11, 2016, from van Gemert, V. (2013, March 1). Logical Breakpoints for your responsive design – smashing magazine. Retrieved December 12, 2016, from Design,

Progress on the grid and layout

Thu, 08 Dec 2016 00:00:00 +0000

This week I completed some major fix-up on my grid. Remember when I thought that it was almost fixed? Well I was wrong. In fact I ended up recalculating the whole thing and basing it on a single column being 65px or 6.5% in width. Happily it is now working exactly as I need it to (Mozilla Developer Network saved the day again - I am going to up my donation this year).

I am feeling griddy

Now that my grid is in situ, I am able to base layout elements on it. I do think that in most cases I will need to make unique versions of the columns and tweak the row layout, but keeping the grid architecture in place and temporarily adding the rows/columns to the html has been really helpful for planning out the sections (as shown in the screenshot below). I used my grid to start planning the layout of the content on the Flickity carousel cells - as it turns out this took quite a bit of work (more on that in my next post). I also had my first go at creating an SVG, albeit a very simple one as a placeholder for the first cell in the carousel. The SVG shows the outline of a head and I made it in Adobe Illustrator, this will need to be replaced by more of a photographic image for needs of the project.

about-About

Adding in an About section as the timeline really jumps right into talking about the fictional Patient. I will need to update the to reflect this, but it remains within the bounds of the tasks as task scenario 1 included, “Read introductory information”, this needs to become task scenario 2 and the others need to be bumped up. I also need to revise things where they are areas as opposed to pages, it is bit too specific at the moment.

Testing in Internet Explorer 9

I was astounded to find that pretty much everything on the site is working as one would expect in Internet Explorer 9. This is fantastic and vindicates some of the script selections that I have made in terms of browser support. I was very concerned that the z-index settings would not be respected, but thus far it is looking good. Safari is still a problem though…

Screenshot of the site on 9/12 shown side-by-side in IE9 and Chrome. I am now kicking my myself for not recording the exact browser version numbers on the PC I was using at the time! The majority of my day-to-day testing takes place on a variety of Mac, so I have to check on Windows whenever the opportunity presents.

Toying with the notion of animation

One of the sites that I have mentioned before, has some pretty gorgeous and playful animations on it. I took a look through the code and the javascript attributes and most of it is managed via CSS. This is good, although I would am concerned about browser support and also performance rendering. As a consequence I probably won’t add these features. As a pre-check I used the Chrome timeline tool to record the processes on an older computer that I have at home and I felt that the impact on performance would be a problem the new features operate at the limits of what I want, timing-wise so I will need to see if I can optimise them further. I have already removed aspects of the code that is not used..

References

Basques, K. (2016, December 8). How to use the Timeline tool. Retrieved December 8, 2016, from Common CSS questions. (2015, October 26). Retrieved December 8, 2016, from daneden. (2016, September 27). Daneden/animate.Css. Retrieved December 8, 2016, from Grids. (2016, October 7). Retrieved December 8, 2016, from Lewis, P. (2016, December 8). Rendering performance. Retrieved December 8, 2016, from SVG and CSS. (2016, January 2). Retrieved December 8, 2016, from Z-index. (2016, December 2). Retrieved December 8, 2016, from

Timeline tool identified

Fri, 25 Nov 2016 00:00:00 +0000

After a lot of consideration, struggle and annoyance I finally gave in and decided to use a pre-existing tool for the timeline section of my front page. I looked a few different contenders in this final pass. Essentially, I came to the realisation that I would not be able to learn the requisite Javascript in order to build something sophisticated enough from scratch. I did a bit of trying out in this jsFiddle project, but kept running into deadends (this project is in a partially built state - so please do not judge me - the javascript is largely erased by this point): Initially I found only jQuery examples - but as I have previously stated, I really wanted to work with Vanilla Javascript, due to load times, future proofing the code content. I also feel that it will be more beneficial to my learning to stick to learning Vanilla Javascript (or rather Ecmascript 6) so that I truly get the language prior to becoming too invested in specific frameworks. Also having looked at these two resources: and then the From - vanilla makes much more sense to me.

jQuery example 1: horizontal timeline ( | )
jQuery example 2: vertical timeline ( | )

After looking at these and searching quite a bit, I came across a tool called lory ( ). It is essentially a code package or widget for creating interactive slideshows or gallery. I thought that there might be some milleage in creating a slideshow or gallery and somehow customising it as a timeline. After testing I found that lory also was overly complex for my needs. Then I came across a really helpful article about a widget tool called on css-tricks.com ( ). It was love at first sight! Here is an example on codepen showing how the Flickity slideshow originally looked: - Flickity is both responsive and touch optimised and had a vanilla option in addition to jQuery. It seemed like a good solution. Before my modifications:

After my modifications:

Main modifications were: - the timeline-line- size of slides - outlines for references - big dots on the timeline (need to figure out how to label these) - overflow to ensure that the content doesn’t wrap strangely on a mobile device. There is still a lot to do and I need to fix an issue when the keyboard keys, when used for navigation make the web page scroll-right in a strange way. I also need to unite this with the other parts of the page that I have started to build. Finally, Flickity is a paid solution unless it is used under a . I am passionate about open source and was already licensing my work under an so I have decided to set the rest of my project to . This means that the license information needs to be included in the header of each source file. As the portfolio site will not contain any original research and will only provide an overview of the project this will also comply with the University’s Intellectual Property rulesAs a student and employee I need to be aware of the university’s Intellectual Property rules, which are available here: . However as portfolio site will not provide software with potential for commercial value and the project information itself is in the early stages it complies with the rules.. Also in the markup of the html, CSS and Javascript I have indicated where pieces of code have come from and if/when licenses apply. Update: Shortly after writing this post I solved the issues outlined above (see: “There is still a lot to do…”) and these discoveries are outlined in the next couple of posts. I realise that I forgot to mention how I solved the issue of the number labels on the dots below the Flickity carousel. This problem turned out to offer me a very valuable lesson in the . I have used the former, “before::” as this was introduced in CSS3 and is compatible with IE9 based on my testing. I figured out that the dots themselves could be used as a counter-increment for the addition of the number labels. .dot { position: relative; overflow: hidden; display: inline-block; width: 40px; height: 40px; margin: 0 20px; background: #a9a9a9; border-radius: 50%; cursor: pointer; counter-increment: flickity-page-dots; } .dot::before { display: block; text-align: center; content: counter(flickity-page-dots); padding-top: 11px; font-size: 20px; color: #FFF; } As the dots themselves are automatically produced by the Flickity Javascript, this meant that my number labels were now produced too. A nice solution.

References

Coyier, C. (2015, March 5). Creating responsive, touch-friendly carousels with Flickity

\[Blog post\]

. Retrieved from Flickity - freeScroll. Retrieved November 26, 2016, from Flickity License. Retrieved November 26, 2016, from Flickity. Retrieved November 26, 2016, from Free Software Foundation. (2007). GNU General Public License. Retrieved November 26, 2016, from Heinz, M. (2015). Lory minimalistic slider. Retrieved November 26, 2016, from Horizontal Timeline in CSS and jQuery. (2014, February 28). Retrieved November 26, 2016, from Mozilla Developer Network. (2016, July 24). :Before (:Before). Retrieved November 26, 2016, from Open Source Initiative. The MIT license. Retrieved November 26, 2016, from Saunders, S. Intellectual property (IP). Retrieved January 4, 2017, from Vanilla JS vs jQuery. (2017). Gist. Retrieved 26 November 2016, from Vertical Timeline. (2014, June 12). Retrieved November 16, 2016, from Way, J. (2012, January 19). From jQuery to JavaScript: A reference. Retrieved November 26, 2016, from

Building the grid

Tue, 22 Nov 2016 00:00:00 +0000

After starting my initial experiments/prototypes for the portfolio project from a boilerplate I decided that I wanted to build my own responsive CSS grid from scratch. The grid turned out fairly well although there are some very slight issues with the column alignment which I need to sort out. I also still need to add the mobile device break points. I did find it very helpful to make use of the CSS calc() function to actively resize widths in percentages based on window size (calc()., 2016). This is a fantastic function although the support for it isn’t universal yet (82.73 according to caniuse.com). Having said that I did try my grid in Safari to see how it behaved in an unsupported browser and I was pleased with how well it resized.

The coloured overlay is included to highlight the issue with the column alignment.

I will attempt to use the power of Photoshop to fix my mathematics - here is a newly sized grid overlay using Photoshop guides to figure out the correct calculations. Just putting these calculations here for future reference. Columns: Columns = 12 Gutter = 15px Rows: Rows = 12 Gutter = 15px Margins: Top = 10px Left = 20px Bottom = 10px Right = 20px

References

Calc(). (2016, May 17). Retrieved November 22, 2016, from

Can I use… Support tables for HTML5, CSS3, etc. (2016, October 23). Retrieved November 27, 2016, from

Drewniak, J. (2014, November 6). Creating your own CSS grid system. Retrieved November 25, 2016, from

Gamache, D. (2016) A dead simple, responsive boilerplate. Retrieved November 25, 2016, from

Imling, M. (2016). One% CSS Grid. Retrieved November 25, 2016, from

Rand-Hendriksen, M. (2015, July 16). Making sense of the CSS box model. Retrieved November 25, 2016, from

H5bp/html5-boilerplate. (2016, November 17). Retrieved November 25, 2016, from

Wireframes 2+

Sun, 20 Nov 2016 00:00:00 +0000

This post displays iterations of wireframe 2. In this wireframe, I took ideas from wireframes 0 and 1, but removed the next buttons in favour of a timeline at the top of the page. The top section of the page, containing the timeline, is shown as overflow (beyond the width) of the page to indicate the dynamic content. Clicking on the years, and circles on the timeline is intended to swap out the slide content and information in the centre of the timeline section. The arrow buttons on the left and right were also intended to switch between the content slides. These buttons ideally would also be operable via arrow keys on the keyboard.

Version 1 - the top timeline is shown double-width in order to indicate the movement of the information.

Version 2: this version of the felt too blue - although I did like the way that the anxiety levels traversed the sections linking them together.

Version 3: similar idea except this wireframe includes the colourful anxiety levels visualisation under the timeline. This works better as the anxiety levels directly relate the the narrative. If the anxiety levels under the timeline could be animated to appear as the timeline is navigated that would look great. I’ll have to think about how best to do that (CSS3 I think).

Version 4 - this wireframe shows both versions of Anxiety levels (they look more like waves!) overlaid. It is a bit busy.

The new iteration of the design seemed cleaner and more focused in the sense that any page visitor would be immediately be shown the patient’s story as an interactive narrative. However, this also meant that all my prior work on the smooth scrolling was for naught. I did try to see if I could tweak it to go from left-to-right or rather back and forth, but that was a futile effort. A related attempt at this was to look at transition whether I could build the timeline itself in CSS by creating a

for the line itself and a

for the timeline circles but adding them as squares and then using the border-radius at 100% made them into circle. As you can see from the video below, this is ended in a vomit-inducing interface.

Don’t get me started on how dreadful this looked when I looked at it on my phone.

Mobile responsive fail

Further to this as I was influenced by the DuckDuck About page’s interactive timeline (Titlow, 2014) I recreated it locally on mydevelopment computer. I then added it to my web space using the source files - stripping all that I could until it was only the timeline. However, I discovered that the coding and structure was not idea for this project. The code (CSS and Javascript particularly) had a lot of vague naming making it hard to follow and there was a LOT to strip out. So, the search for a solution continues, I think that I need to take a different approach to this problem…

Considering colour

Upon looking at a number of medical websites for journals, professional bodies and organisations including:

(blue/orange/green)
(dark blue, aquamarine, pink and lavender purple)
(dark blue, two hues of light blue, white, purple and grey)
(dark blue, aquamarine and white)
(scrubs green, two hues of dark blue, grey and orange for callouts)
(purple, blue, green - a lot of white space)
(red and blackAn outlier with the red and black theme, however this would underline the critical nature of the work they do providing aid in emergency situations.)
(blue and white, orange callouts)

The colour schemes contain a lot of blue and this influenced me to look at some different colour combinations. I used the palletton colour selector web application ( ) to try a few bold colour combinations. I also tried it with some vision simulations (available on the bottom right) to see how the contrast behaved for different types of colour blindness. The swatches below show one of the better combinations I came up with, although it still needs work.

Paletton colour scheme 1

The challenge with this medical site is that I feel I need to avoid a number of colours that may evoke negative associations. For example, hues of red might suggest blood and certain hues of yellow should be avoided due to the hospital-yellow association. The blues above seemed a bit dark, so I tried some lighter hues for Wireframe 2, paying attention to the contrast between the text colour and the background colour.

References

These are resources that I referred to beyond what I have linked to in the content above.

Border-radius. (2016, November 13). Retrieved November 27, 2016, from

Crockford, D. (2008). Functions. In JavaScript: The good parts: Working with the shallow grain of JavaScript(pp. 26–45). United States: O’Reilly Media, Inc, USA.

Titlow, J. P. (2014, February 20). About DuckDuckGo. Retrieved November 19, 2016, from

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:

New project = New category

Sun, 11 Oct 2015 00:00:00 +0000

Well almost…

I have had a #UX category on this blog for a while, but I have decided to formalise it as I embark on a grad school module, Interaction Design and Evaluation Process. The UX category will be a place to collect my thoughts in relation to what I learn on the module and can be viewed in a collated format via the “UX” tab. Things to comment on this week:

Read and think about BS EN ISO 9241-210-2010 - Ergonomics of human-system interaction
Read and comment on user profiles and personae
Read and comment on Scenarios

All of this will also feed into my personal research project, looking at analyses of #IoT systems. See you soon!

Design | Fiona MacNeill | Macknowlogist

Vlog 3 [1/2]: Adventures in ViewX - Double Diamond for Watch Parties

Reflecting on designing a watch party for UX Brighton

Edited Vlog Transcript

Discover

Three key problems to solve

Facilitation and watching other people ‘watch’

Define

Software requirements to address the challenges

Thinking about ‘ViewX’ or the Exerience of Viewing

Defining a format or schedule for the event

Selecting the tools - leading into the Develop phase (second diamond)

References

Hone Smart Home

References

Naming - initial ideas

References

Welcome to my new IDM22 Journal

Purpose of this blog

Initial ideas

Like OnStar for your smart home

References

The weekend of doom

The new design

Space economy

The contact form actually works now

Finally…

References

Charty McCharterson

Something I changed

Prepping the chart for print

Tab clear

References

Accessibility and responsive bits

References

Cellular concerns

Flickity carousel

Here be the stuff of nightmares…

SmoothScroll and the Navigation

Anxiety levels

Bios section

Responsive adjustments

Thinking about the patient

References

Progress on the grid and layout

I am feeling griddy

about-About

Testing in Internet Explorer 9

Toying with the notion of animation

References

Timeline tool identified

References

Building the grid

References

Wireframes 2+

Considering colour

References

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)

New project = New category

Well almost…