Reflection | Fiona MacNeill | Macknowlogist

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

Striving for accessibility - Eval pt 1

Thu, 19 Jan 2017 00:00:00 +0000

Part 1 of my final evaluation. This entry outlines key decisions that I made regarding accessibility towards the end of the development period. I am writing and publishing it retroactively as it as represents a very large amount of thinking and work, which I kept notes about as I went along.

Based on observation

Based on looking at a large number of NHS and governmental sites, referenced in former posts I realise that accessibility is crucial, perhaps even more than your average portfolio site. For example, looking at NHS England (2017) site I see that they offer a text-to-speech service. Based on experience in my day-job working with software vendors, some of these solutions can be quite expensive. It was however important to me to make the site as accessible as possible and that has meant some sacrifices along the way.

Keystone texts

While engaging in this in-depth investigation into the accessibility, I found myself referring to the following keystone texts.

- UX accessibility specialists an amazing resource
- a frequent go-to of mine

I feel like I have only scratched the surface with the WAI-ARIA roles, but based on testing I feel that the site is accessible as I could get it within the allotted time. In the end I found a blog post on the subject by a rather brilliant developer, Aaron Krauss (2016) who did a great job of how to practically use certain ARIA labels and roles. What I did find is that there is quite a lot of redundancy in the code, but you need to have it there as the screenreader doesn’t necessarily pick up the semantics in the page construction as you might intend. Here is a video of my screenreader testing in action with tab key only - tabindex (Mozilla Developer Network, 2017)

What the font?

I conducted some reading (Nielsen, 2002; Martin, 2009; Franz, 2014; ) around legible fonts and font sizes and optimal line height. I have tried my best to work with the best practices, although that does get tricky with the mobile screen size. However, the attention that I have paid to optimising the CSS stylesheet for plain readers should help those who use accessibility features on mobile devices. Added a fix to the superscript I found a very helpful snippet for fixing line height for superscript (used for references) and subscript. Thank you to the -ever helpful- CSS Tricks site (Coyier, 2009a). Contrast As much as I loved the white headers along the timeline the contrast was not sufficient. The colour scheme is themed around blues and purples and unfortunately white on blue doesn’t comply with WCAG 2.0 unless the blue shade is very dark or the white font is very large (Snook, 2015; WAVE, n.d.).

The accordion had to go

Upon testing the tab-key only navigation I realised that there was no accessible way (that I could muster anyway) to navigate the accordion (Mary Lou, 2012) and for that reason it had to go. I added two simple tables, which I was trying to avoid, but as they area features comparisons this use us permissible. I was not using the tables for layout, but for the display of information in a standardised way. After the fact I found this accordion example at codepen.io which might have been better, but not without a lot of work:

Sprite fun

I got my sprite on and added sprites for the device images. The device images were drawings that I created in Adobe Illustrator based on photographs. All the photos were apart from the image of jeans, which I have listed below. This was added as an image through the CSS and aria-labelled for descriptive purposes.

The complete sprite for the devices in all of its glory. Photograph used as the basis for illustration of fasten/clip wearable - by is licensed under CC0 images sources from Pixabay:

Fixing the tab svg

I replaced the svg tab to be a proper thing rather than the Frankenstein’s monster-like CSS creation . Once again I referred to the excellent CSS-Tricks (Coyier, 2013) and Mozilla Developer Network resources (2016c), as well as the Implementing Responsive Design book from the reading list (Kadlec, 2012).

Asking myself questions

I tried my best to standardise all the units in the CSS although if I were to do it all again with hindsight I think that I might design my grid to work with ems or rems (once they are widely compatible or older browsers fall out of use). I’m sure that I have missed things in spite of several thorough read-throughs. It all validated okay. CSS code block structure: e.g. div class or id - this resembles the layout of a div .div { display: block; position: relative; width: 90% height: 60% color: #000; margin: 2% auto 2% auto padding: 2% 4%; (shortenings used where possible) } e.g. typography class or id - this resembles the layout h2 { font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; text-align: center; font-size: 1.5em; line-height: 1.25; font-weight: 300; } In the HTML where white-space pre-line formatting was needed for the Goals and the references sections, I included comments to help indicate why the formatting was different in the markup. Also regarding the CSS as I was going through it, to weed it a bit, I asked myself a series of questions to help determine which units to use and such. I have included these below.

Is it text? = ems
If it moves it is em or %. If it doesn’t or cannot move it is pixels
Is it in a column in the grid - then margins and padding are percentages (unless there is a very good reason for them not to be)
Is it in the grid - then margins and padding are percentages
Is it used in the html? No, then get rid of it Could it be consolidated in any way? Does it share the same values as another class and/or id?I would have liked to do more on this, but I ran out of time. Did my best to do it as I went along.
Does it need to be a negative value (particularly in the media queries)? Then it is in ems.

Rationale:

When it is something that needs to have set dimensions such as a button, I am using pixels.
For text I am using ems to ensure compatibility with older browsers
For table related items and blocks which reside in divs I have used percentages.
Used hexadecimal shortenings when it made sense to do so and it did not change the hue of the colour (three digits rather than the standard 6). I prefer digits rather than word descriptions, due to colour precision.

Media queries

Did a lot of work on these, again I found the Implementing Responsive Design (Kadlec, 2012) and the Introducing HTML 5 (Lawson & Sharp, 2011) books particularly helpful. I also added a arrow keys image and tooltip to help explain the navigation of the timeline. You will notice for the tabbed navigation of the site in the screen reader demo that the timeline is skipped over initially and I added to the JavaScript in order to allow the tab key for navigation in addition to the arrow keys. The arrow keys allow for greater freedom though, as once you have started tabbing through the carousel/timeline, you cannot get out of it with another tab press. Thus leaving it to the end and this is something for me to raise with the original developers to see if they can address that in future versions of the widget.

References

Coyier, C. (2009a, August 10). Prevent Superscripts and subscripts from affecting line-height

\[Blog post\]

. Retrieved from

Coyier, C. (2009b, October 24). CSS Sprites: What they are, why they’re cool, and how to use them

\[Blog post\]

. Retrieved from

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

\[Blog post\]

. Retrieved from

Donut. (2011). Re: What are the most common font-sizes for H1-H6 tags. StackOverflow website. Retrieved 19 January 2017, from

Franz, L. (2014, September 29). Size matters: Balancing line length and font size in responsive web design – smashing magazine

\[Blog post\]

. Retrieved from

Kadlec, T. (2012). Responsive Media. In Implementing responsive design: Building sites for an anywhere, everywhere web (pp. 95–127). Berkeley, CA: New Riders Publishing.

Krauss, A. (2016, September 8). ARIA roles and attributes: How to actually use them | Aaron Krauss Retrieved from

Lawson, B. D., & Sharp, R. (2011). Introducing HTML5 (2nd edition) (2nd ed.). Berkeley, CA: New Riders Publishing.

Martin, M. (2009, August 20). Typographic design patterns and best practices – smashing magazine

\[Blog post\]

. Retrieved from

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

\[Blog post\]

. Retrieved from

Mozilla Developer Network. (2015, July 23). Using the aria-describedby attribute. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2016a, December 15). WAI-ARIA basics. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2016b, November 17). CSS values and units. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2016c, December 3). Background-position. Retrieved January 19, 2017, from Mozilla Developer Network website:

Mozilla Developer Network. (2017, January 16). Tabindex. Retrieved January 19, 2017, from Mozilla Developer Network website:

NHS England. (2017). About NHS England. Retrieved January 23, 2017, from NHS England website:

Nielsen, J. (1996, October 1). Accessible design for users with disabilities

\[Blog post\]

. Retrieved from

Nielsen, J. (2002). Let users control font size

\[Blog post\]

. Retrieved from

Snook. (2015). Colour Contrast Check

\[Computer software\]

. Retrieved 19 January 2017, from

Stanford University Online Accessibility Program. (2016, August 1). Screen reader testing. Retrieved January 19, 2017, from Stanford University website:

W3C. (2016, October 27). Accessible Rich Internet Applications (WAI-ARIA) 1.1 W3C Candidate Recommendation 27 October 2016. Retrieved January 23, 2017, from W3C website,

W3C. The Roles Model. Retrieved January 19, 2017a, from WAI-ARIA website:

W3C. WAI-ARIA role definition model - image. Retrieved January 19, 2017b, from WAI-ARIA website:

W3Schools. CSS Tooltip. Retrieved January 19, 2017, from w3schools.com website:

Watson, L. (2014, August 4). Using the tabindex attribute

\[Blog post\]

. Retrieved from

WAVE web accessibility tool.

\[Computer software\]

. Retrieved January 19, 2017, from

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

Wireframing sketches

Mon, 07 Nov 2016 00:00:00 +0000

Initial wireframe sketch. Click on “Continue Reading” to see a larger version of this image.

This image shows a piece of acetate as an overlay for the floating navigation buttons that were demonstrated in Prototype 2.

Portfolio site concept and other news

Sun, 23 Oct 2016 00:00:00 +0000

Over the past three weeks since the start of the module, I have been working away on the development of my portfolio site concept and gaining domain knowledge to support the development process. I have found myself in a situation where I have been torn between completing the UX procedures and design artefacts that I learned about and implemented during previous modules and starting to code. It is like standing at the edge of an exciting, and slightly daunting, precipice wondering whether to make the leap. The good news is, I am close. I must also at this point, state that I aim to make a real and useful website. It will be short and sweet but it will, hypothetically at least, fulfill a real-world purpose. I also hope that it will be possible to use the site to support future research work that I plan to undertake.

Process: A minimalist approach influenced by LEAN UX

I have found that I cannot bypass the UX design artefacts and documentation entirely as they have become part of the fundamental fabric of my thought processes! So I have decided to complete a very stripped down version, to ensure that I have a solid architectural foundation for what I am about to build. This approach will be composed of the following elements.

A concept document in a bare bones form aka this journal entry!
Task scenarios - is the first version.
Business Model Canvas¹ - an artefact template that I found via Cao & Bank’s, The Guide to UX Design Process & Documentation (n.d.). This will be in a forthcoming journal entry.
General characteristics for user groups - this will also be in a forthcoming journal entry. Due to time contraints and available information, it is not possible to build thorough characteristics lists for all potential users. I am however, fortunate to have a real stakeholder who can provide feedback on my work and it’s hypothetical usefulness. (more on this later on in this entry).
\[Tentative plan\] create a UML² diagram to ensure that each page and section of the site includes the correct information and functions. I personally find UML diagrams to be very helpful for archictectural planning. It can be a fairly basic model for this project, but I do find that the process of making the models uncovers things that you haven’t thought about! I may find that this isn’t needed, but I won’t know until I start making it.
A paper prototype - as I am working with a real stakeholder, I want to show him something quick and easy so that he can visualise the concept and ensure that my representation and approach to the domain is accurate. I think that a paper prototype is the best way to do that, in order to move to the coding phase as quickly as possible.

Concept

The wait is over! Here is the concept. The project’s working title is patient pre-op anxiety infographic. It is a website structured around a central page, which leads the viewer through a fictional narrative of a patient’s experience of anxiety while awaiting a medical operation or procedure. In the narrative the patient will be using an electronic wearable device to track their own vital signs and also for logging their anxiety levels - the influence of this countermeasure will be explored. The narrative is represented through a navigable timeline enriched with the use of graphical, written and statistical information. The underlying project, to use wearable devices to measure patient pre-operative anxiety is attributed to and courtesy of Dr. Theofanis Fotis (School of Health Sciences, University of Brighton), whom I am collaborating with at this time.

Scope

The patient pre-op anxiety infographic will:

deliver an approachable overview of aresearch project - the proposed research project is to design a user interface for a medical wearable device to measure anxiety;
explain the issues that can result from pre-operative stress in patients;
provide a point of entry for those with little or no knowledge of the subject as well as explain the potential benefits of the project to experienced medical professionals.

The patient pre-op anxiety infographic will not:

provide indepth medical information;
provide any fully formed solutions or recommendations for implementation of wearable devices in a medical setting;
provide advice or suggestions for the production of patient care plans. As a narrative scenario it is exploring a hypothetical scenario in which a wearable device is used.

Benefits

The patient pre-op anxiety infographic will provide the following benefits:

it will provide a valuable resource for explaining the research project to potential funders and future stakeholders;
it will help to raise awareness of the potential issues related to patient pre-operative anxiety;
it will highlight potential ways that increased knowledge of a patient’s vital signs and self-reported anxiety could improve patient care;
it will provide an accompanying contextual information for the proposed future interface design project;
it will be a publicity tool, that can be used to explain the project within the academic and medical online communities.

Goals

The following goals are related to the successful creation of the patient pre-op anxiety infographic:

provide a valuable portfolio piece, not only in terms of web development, but also as a tool for the research team and collaborators;
contribute to the approval and ethics approval of this as a concept for F.MacNeill’s final graduating project;
stimulate dialogue around the issues and ideas raised by the patient pre-op anxiety infographic;
encourage potential funders and stakeholders to invest in the project.

Objectives

Create an accurate portrayal of a possible patient care scenario.
Provide information highlighting the benefits of the proposed project.
Pose the project concept as an open question in order to gauge feedback and interest from the medical community and potential funders and/or stakeholders.
The user audiences for this are diverse but have one thing in common, they have very limited time to engage with a website of this kind. This website should take no longer than 10-15mins to navigate, the equivalent of a typical coffee/tea break.
To be shared via social media between interested parties.
To be adaptive and easily viewed and navigated on mobile devices.
To be accessible to those on older web browsers (as far as possible).
To be accessible to users with disabilities, allowing for personal customisation (as far as possible).

The Research Team

Right now this is just me, however Dr. Fotis has agreed to review the materials and my hope is that if the site meets his approval then we will be able to use it to promote the real project. In the first instance it is a hypothetical project site, but that doesn’t mean that you cannot aim high as I have outlined in the objectives above.

Audience

More detail on this in a future entry. The user groups are: funding review panel members, academic staff at multiple Higher Education Institutions (HEIs), medical professionals.

Stakeholders

Intially Dr. Fotis is the main stakeholder, however I would take this site forward as evidence to support my final project proposal. In that sense academic staff in the School of Computing are also future stakeholders.

Research of the domain and existing websites

I have been using my as a place to collect links and resources. On the one hand I have been looking at the specs for potential wearable devices, it is out of scope to suggest an actual solution but I would like to supply some possibilities in terms of device form so that the project is tangible. I have also been reviewing materials that Dr. Fotis provided to help gain domain knowledge of a patient’s pre-operative experience. I have listed these sources in my reference list below.

Sketch of patient journey ideas.

Existing websites

As a general observation medical websites tend to be firmly on the utilitarian end of the scale. This is understandable as information is usually important and needs to be delivered quickly. So it will be important to strike a balance between something eye-catching, which is also substantive. Here is are few examples that I came across and wrote notes about (transferred from my trello board).

Notes/Observations

This . Some of the examples are a bit old and don’t work as well in contemporary browsers. This is something to consider. Most of these sites are in a long-form vertical format. This is great and modern, but considering the audio for this site, this obscures some key aspects of the journey. Viewers will be time-pressured and need to see the journey/timeline elements as succinctly as possible. The following sites are closest to what I want to design:

. This example is not very responsive, so that would be something to consider.
. This blog is quite nice but the scrolling right function would need to be made much more obvious.

Vertical timeline examples:

I like the intro page segment on . It isn’t keyboard navigable though which is not great in terms of my accessibility goals.
and it aesthetically simple and user-friendly.
I quite like , it is text heavy, but it gets the message across quickly.
I like the use of months on the timeline on , although accessibility and control might be an issue here.

Many of these are quite old or have changed format since the post was written. I found myself considering a horizontal layout due to the need to display data and the need for it to be readable, however horizontal layouts pose some real accessibility and navigation issues.

. An oldie, but a goodie …and some justification for my concept!

This site uses the , which I have used many times, mostly in WordPress sites. This is , but I want something a bit more contemporary.

This site has the kind of section feel that I am looking for, although I still wonder how I can visualise anxiety in a vertical layout versus horizontal. [This site](( ) has nice comment mark-up and makes clear use of the
element.

Journal development

A quick run down of learning journal development activities. A full rundown can be found on my github development page, I have added a handy link to to this in the “social menu” on the right-hand footer of this journal site (circular icon with octo-cat logo).

Created an iframe embed in a widget for my trello board so that I can display it in the sidebar. In order to create this I referred to this example on and . Tomorrow I am attending a in Brighton and as part of the event they will offer user testing. I thought why not add some functionality that I have always wanted to include AND get some tips.

I have added the option for visitors to this site to change the colour of the background (behind the text) for accessibility reasons. I did this as by creating alternate child-theme style sheet and by installing the . This idea is inspired by software like of Adobe Acrobat Pro and GoodReader App (for iPad) which allow you to customise background colours. I referenced for colour-palette inspiration. Visual stress when reading and/or perception of colour contrast are reasons why a user might wish to alter background colours.

hexidecimal colours used for initial function:
- blue 1: #dfeced
- blue 2: #9ab8fc
- green 1: #a6f8e3
- green 2: #aaf2a0
- yellow 1: #ffff8f
- yellow 2: #ffde75
- purple: #bf95df

I’ll write about any resulting feedback and actions on this site later. I added Google Analytics code to my version of the header.php file, this was not added to GitHub as it is specific to my version of the child theme. I decided against a plugin as I looked at a couple of options, but I didn’t feel that having access to a Google Analytics data on the dashboard of WordPress was that important as compared to the account authorisation that plugins require to run (e.g. that I looked at). I like to keep an eye on web traffic for security and publicity reasons.

Coding practice

I have a Lynda.com course to wrap-up and I will post the details here when I finish. In the meantime, collectively I have now completed 200 exercises in Code Academy! I didn’t do them all since the start of this module, but here is a screenshot of my badge

Just putting this here for later reference - found on my travels

10 Commandments of User Interface Design

]( ) Courtesy of:

References

Cao, J. & Bank, C. (n.d.). The guide to UX design & documentation process. Retrieved from

Gothelf, J. (2013). Lean UX: Applying Lean Principles to Improve User Experience (1st ed.). United States: O’Reilly Media, Inc, USA.

Prichard, M. J. (2009). Identifying and assessing anxiety in pre-operative patients. _Nursing Standard 23(_51), 25-40. Retrieved from

What can help relieve anxiety before surgery? (2014, May 21). In PubMed Health. Retrieved October 15, 2016, from

Business Model Canvas ( ), licensed under Creative Commons Attribution-Share Alike 3.0 Unported licenses ( ). ↩︎
Unified Modeling Language - more information at wikipedia: . ↩︎

Reflection | Fiona MacNeill | Macknowlogist

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

Striving for accessibility - Eval pt 1

Based on observation

Keystone texts

What the font?

The accordion had to go

Sprite fun

Fixing the tab svg

Asking myself questions

Media queries

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

Wireframing sketches

Portfolio site concept and other news

Process: A minimalist approach influenced by LEAN UX

Concept

Scope

Benefits

Goals

Objectives

The Research Team

Audience

Stakeholders

Research of the domain and existing websites

Existing websites

Notes/Observations

Journal development

Coding practice

References