Accessibility | Fiona MacNeill | Macknowlogist

Reblog - What makes an online space inclusive?

Mon, 05 Jul 2021 00:00:00 +0000

Originally posted on the on 05/07/21 as part of my role at University of Brighton.

A crowdsourced blog post and reflection

Back on the 15th of June I facilitated an open discussion as part of programme. The discussion, entitled, ‘What makes an online space inclusive?’ invited audience members to reflect on their own experiences in online spaces and their own practice facilitating online lessons, meetings, and events.

Session description: Think about the last online event you attended. Was there anything that made you feel included, or excluded? Did you have the option to add your pronouns? Were you actively invited to turn on your webcam, but only if you wanted to? You might even have become immersed in a collaborative exercise, almost forgetting you were on a video call! This session is a discussion focusing on how to support accessibility and inclusion in online learning spaces. Thinking about what works and what does not work and what is needed before, during, and after an online session to make it successful. This post is split into two sections, what happened at the event? and the meta level. The first section, what happened… summarises aspects of the discussion and the activity in the meeting chat. This is very much a crowdsourced blog post and I owe the vast majority of the helpful and acutely observed content to my fantastically engaged audience during the event. The second section is a reflection on my own practice and the steps that Jisc organisers took behind the scenes to support the event.

What happened during the event?

Setting the scene:

What do I mean by an online space? At the beginning of the event, I needed to establish what I meant by this term as it is a slightly lateral way of thinking about situations/events which may defined in a technical sense as webinars, online lessons, or online meetings. This is a big ask of an audience, but I wanted to encourage them to think about online space in broader terms rather than using siloed categorisations.

My definition: An online space is where groups of 3 or more people come together to meet online. These spaces are facilitated via meeting and webinar tools and the format is governed by the people who facilitate and/or attend. The format can replicate in-person meeting styles or can be specific to online.

Ingredients for an online space as an algorithm diagram

Examples to illustrate ‘format’

I provided two categories of format with examples:

In-person formats: online spaces which attempt to replicate an in-person meeting format/experience. Here are just a few of those that I listed.
- Round table, with the example meeting tool Wonder.
- Large group meeting, with example tool Microsoft Teams.
- Conference or lecture presentation
- Watch Party, with example tool Backyard.co (no longer available as of 26/06/21 - sunset due to being bought out by Discord).
Uniquely online formats: online spaces which present new modes of interaction or collaboration.
- Audio-only large group meeting, with the example of Twitter Rooms.
- Collaboration in real-time with interspersed audio, with example tool Mural.

A Twitter Room featuring hundreds of attendees with the director Edgar Wright and the original cast of Scott Pilgrim vs. the World discussing the film. The subtitle function is shown on screen, making the event accessible to all.

Questions for the audience

1. What was it like at the last online learning event that you attended?

Some folks taking part in the discussion, had just come from delivering their own training sessions with staff.
One person noted that the format of the Jisc Connect More conference was good because presenters were speaking for 20mins and then there were questions and answers for the remaining 10mins.
Another person noted that they had attended a long online event featuring multiple presenters. Some of the presenters were engaging for them, some were not. Therefore, they would have found it helpful to have a schedule for the speakers so that they could drop-in to the call when specific people were presenting.
Some folks felt that the range of tools being used during an online meeting/event, in addition to the main online meeting/webinar software, could be a little bit overwhelming.

2a. What supported your focus at the online learning event?

Being asked to do something interactive or to respond to questions.
For a person who had been teaching an online learning event beforehand, they felt that being a little nervous helped to sharpen their focus (I completely agree!).
Including a personal story or experience can help to humanise an online presentation and bring people back into the room.
Team teaching can help to support the presenter’s focus and to ensure that questions typed into the chat are addressed promptly.
Being able to see attendees’ webcam video can help when you are presenting. However, as an attendee you might not always want to share your webcam video. Sometimes there can be a mismatch in expectations or perspectives between the presenter and the attendees or participants.
Collaborating in real-time on a document with people who were equally interested/focused on a project-related goal.

2b. Was there anything that disrupted your focus at the online learning event?

Lack of closed captions being available.
No opportunity to ask questions.
Internet breaking up at the presenter’s end.
Mics left on so you get background noise from attendees’ environments.
Feeling alone at the event, like I am the only person there.
Those in shared office spaces could find their environment distracting and/or worry about background sound during an online call/session/event.
Some commentary on verbal ticks and overuse of certain terms such, as ‘so’*, ’like’, ‘you know’, ’em/um’.

*I am so guilty of too many ‘so’s’, something I try desperately to edit out in my own video tutorials and vlog entries!

3. Think of a positive experience at an online event. What helped you to feel engaged?

Someone recounted that they had attended a conference where alpacas (as in the animals) had joined during the opening session.
Using people’s names to “connect with people over the abyss” (I loved this turn of phrase).
A person noted that being asked to manage the chat for an event, had provided them with insight into the way that attendees were connecting with each other. Although while they were engaged in that they could not focus with the speaker’s content.
Several people spoke to the importance of receiving an agenda. Especially knowing the agenda beforehand and when the breaks would take place.
Knowing or hoping that there would be a follow-up email including any supporting materials and things that might have been missed.
Someone mentioned an event where the keynote panellist presented while outdoors. They said that this provided a stronger emotional engagement [comment: very interesting approach, a bit like a political speech or rally].

4. What helped you to feel included at the event?

The ability to like or react to comments. Some noted hesitancy with use of emojis to begin with, but now it is an expectation and an important part of acknowledging the value of someone else’s comment. A chat reaction is like the type of non-verbal cues that build connection in the real world; a nod, a thumbs up, clapping, a shake of the head, a shared glance.
Someone using your name when you have made a comment in the chat. A couple of folks agreed that this was important.
A best practice tip when running training sessions was to try to welcome everyone by name as they came in. Although this can be challenging in large sessions.
Having chat questions and comments included and acknowledged by the presenters.
Being able to specify gendered or non-gendered pronouns and preferred name.

5. What excludes you or makes you feel excluded during an online event?

Presenters speaking too fast.
Not allowing time for questions or providing space where the audience can think through what has been said.
Events where questions in the chat are not followed-up on and are just left floating.
Even in an online meeting space there can be a sort of feeling of an in-crowd where it can feel exclusive. Something to avoid is having a side conversation with a colleague while attendees are arriving and instead keep it more neutral and welcoming. Even if your colleague wants to chat, encourage them to wrap it up.
Folks noted events where the chat is disabled, so there was no option to engage other than when invited to ask questions at the end. This felt quite disengaging.
Not being able to see the speaker. So, no picture-in-picture option for the speaker’s camera with only the slides shown on screen.
There can be elements in the user interface for webinar tools that can be very distracting. For example, animated GIFs and animated UI elements that serve no functional purposes.
Heeding the audience when they cite audio-visual problems and immediately seeking to correct the issue/s. Having a critical friend or co-teacher who can verify and flag any sound/video issues.
Speed of speaker’s talking can make it difficult for attendees to follow. Especially in situations where bandwidth is low (so synchronisation between audio and video may not be great) and captions are limited. This can be challenging to interpret and tiring for those who rely on captions for the key information.
Too many slides with too much detail or content.

Personal Introspective

Part 1: Human Factors

What should event organisers or teachers do to help people feel included? I have paraphrased the answers below and added some commentary. You can access the original answers via the embed or link below.

Be friendly, approachable, be human.
Ask if attendees have any accessibility requirements. Provide pre-event details about how the event will run¹.
Do not say ‘we don’t have much time today’. This can be a stressor for attendees².
Allow time for any technical issues.
Make the session relevant to the group whom you are meeting with, so that the experience does not feel generic.
Greet and welcome people who attend. Remember to smile!
Provide opportunities for attendees to do something creative together (e.g., doodling)³.
Let attendees know how they should engage with the session. Provide an agenda as well beforehand.
Ask about what tech folks are planning to use beforehand to support forward planning (e.g., audio, video, 4g, Wi-Fi).
Respect the decision of attendees to keep their webcam turned off.
Provide an icebreaker or warm-up activity.

Access the first poll results, via this direct link.

Part 2: Technology Factors

What accessibility features or tools should be in-place during an event to help people feel included? You can access the original answers via the embed or link below.

Closed captions.
British Sign Language (BSL) interpreter⁴
Sending slides in advance and/or sending them afterwards.
Being told if you will receive the slides after the event.
Providing support for presenters prior to the event⁵.
Someone to help manage contributions in the chat if the speaker is mainly engaged with the live audio contributions.
Provide different ways for people to answer questions and interact during the meeting/session/event.

Access the second poll results, via this direct link.

Results and Summary

Things that help

Entries added in the chat pane are included by the presenter and acknowledged.
Open questions allowing engagement.
An agenda is sent in advance of the session.
Emojis and reactions tools.
Webcams on and off - have clear prompts and expectations for when webcams should be turned on.
Having moderators to help manage the chat.
Being able to vote-up, respond or react to other folks’ comments in the chat.
Being able to include pronouns.

Things that do not help

Too many slides with too much detail.
Presenter speaking too fast.
Questions in the chat pane that are not followed up.
No option for written chat.
Animated GIFs which run in the background with the user interface or in the chat and do not cease looping.
Distracting sounds such as typing in the background and noisy offices.

Meta Level

This section is about reflecting on how things went from my perspective as the presenter and discussion facilitator.

How I positioned myself

From the start, I wanted to be clear that I did not have all the answers and that I was the discussion facilitator. I introduced my role within the space and Laura Hutton’s (Jisc) who was helping to oversee the chat and take notes for the final summary slide. Laura and I debriefed beforehand to ensure that we were both clear on how the session would work.

How I positioned the format of the space itself

I created a virtual version of the Long Table, which was devised by performance artist, Lois Weaver (2013). I wanted my imaginary room to include everyone and provide ways for attendees to be creative.

How I verbally described my imaginary room: A long table with a paper tablecloth is shown in the centre of the room. There are pens and two microphones on the table. There are four chairs on either side of the table. The table is surrounded by chairs in an amphitheatre format, half-circle format. There is a video camera and a British Sign Language interpreter in the corner of the room with a live feed to a protector in the room. A table of drinks and refreshments are in the corner of the room. If folks cannot come to the table, then a microphone is passed to them. When people put their ‘hands up’ they were taking a seat at the table. When people wrote in the chat, they were writing on the tablecloth. Changing the feeling of ‘being’ in a space, through use of furniture, technology, or projection, and rules of engagement has long been a preoccupation of mine and virtual spaces are no different. As I noted in the , Dave White’s blog post (White, 2021) was the inspiration for my use of imaginary floor plans which have become a staple.

Things that I did to help make this session feel inclusive

I spent some time summarising the accessibility and response features that are available in Zoom at the beginning.
I provided a link to the Google Slides featuring all the questions (props to Miranda Melcher for this idea; Melcher, 2021).
I provided clear guidance for how to engage during the session and provided more than one mode for answering questions (verbally by putting hand-up, via chat - this also applied during the use of polls).
Designed the slides for accessibility with minimal and concise content. Using simple clear fonts and no white backgrounds on slides. I also used simple graphics to reinforce concepts.
I provided a warm-up question to provide folks with a trial of engagement.
I read out the content from each of the slides to the audience and verbally described the images on slides.
Reading the chat messages out by paraphrasing and acknowledging the names of the authors. Acknowledging a name pronunciation mistake.
Providing social interaction (chat and verbal), then encouraged use of the polls for more personal introspection.

Ways that Jisc supported this session

Jisc’s pre-event speaker briefing document was excellent. Providing clear expectations, an overview of the technology, and recommendations for optimising your presentation setting (e.g., lighting, sound, optimising your internet connection etc.). I was asked to join the session half an hour early and was greeted by a very helpful session facilitator (thank you George!) who ensured that the technology was working as it should and provided me with host permissions on Zoom. As mentioned, Laura Hutton from Jisc was also on-hand during the session, which was great and is essential in case of any loss of connectivity. This is yet another reason why sharing slides either via a link (e.g., Zoom) or via a files area and then posting to the chat (e.g., MS Teams) is a good idea.

Things that I would do differently next time

Improve the wording of the first question slide. As I needed to clarify the question in the chat.
Show the question slide to ask the question and then switch to the webcam view to support better discussion. Therefore, perhaps one question less to allow for that as it would take more time to switch. Although this is a function for the Wishlist as switching between sharing to webcam mosaic view is never as smooth as I would like.

Wishlist webinar function - a keyboard shortcut to switch between screensharing the thing that you last shared and the webcam-based mosaic view. I want to be able to ask the question and then prioritise the webcam display without stopping sharing completely. When you stop sharing and re-share over and over per question it leads to a delay when you are multitasking.

Considerations for teaching

There are so many takeaways here. I think the big one for me is not feeling rushed when teaching in an online format by designing my content accordingly. I did not feel rushed in this session, but it is easy to misjudge the pace and timing. Therefore, having a practice is always a good idea. I will certainly consider the speed of my verbal delivery and try to work on minimising my verbal tick of starting sentences with the word ‘so’.

One more point is that I have found myself wondering if there will be greater expectations from students in terms of technology use when we return to teaching in-person. For example, the chat and inclusive nature of the chat were mentioned a lot. For people who find it hard to formulate their thoughts and/or figure out where to come into a conversation chat has been a transformative function allowing them to express themselves. There are also occasions where students or attendees may feel embarrassed to ask a question verbally. So how can we take the things that work well in online spaces and allow them to augment our in-person classrooms? Providing multimodal means to respond may need to become as much a part of our in-person practice as it has with online teaching practice; solutions to this could be analogue or digital.

Bonus content

In the process of researching content for this post I came across this brilliant video about BSL for popular technology terms. I love the ways that technology words and concepts have been translated into signs. I particularly loved ‘Internet’ and ‘Google’.

References

Eventbrite (2019) ‘ ’, EventBrite Blog, 23 June (Accessed: 14 June 2021).

Melcher, M. (2021) CPD Webinar: What students actually want from online learning: results from a university-wide study of student digital accessibility needs [Google doc]. Available at: (Accessed: 31 May 2021).

Weaver, L. (2013) ‘ ’, LADA Live Art Development Agency (Accessed: 14 June 2021).

White, D. (2021) ‘ ’, David White, 1 February (Accessed: 13 March 2021).

Tip: this should be done prior to a meeting/session/event. During the meeting/session/event start by providing an overview of the general accessibility features of the tool that you are using. ↩︎
This is such a brilliant observation as we all know that online events need to be shorter due to screen-time. However, we need to design and create content for the medium rather than trying to cram too much in - this is my key piece of learning from this event. I have been guilty of this on occasion, and I am going to work on designing my sessions to feel content-rich without coming across as time-poor. ↩︎
This was something that I thought about doing during this session but decided against it as I try to stick to a rule of two when it comes to using technology in sessions. So, when you have a webinar/online meeting tool you are already using one piece of technology, during Jisc Connect More this was Zoom. My second technology was the polling software, Poll Everywhere, as I wanted the audience to think about their answers individually and then vote up others’ answers as well. This is easier to achieve in MS Teams with the chat reaction buttons, but not possible in the Zoom chat and polling tools that we were using that day. I was also providing access to my slides on Google slides which could be taking up another browser tab or window if folks chose to have that open. I am not counting that as an extra, but it is always worth trying to mentally picture the context and content of your attendees’ screens when you are designing an online session. ↩︎
This was done very well at the Accessibility London event for Global Accessibility Awareness Day 2021, here is another example of a bilingual design webinar where two languages were signed. ↩︎
I think that that the team at Jisc did a fantastic job of this and it is something that I have commented in my reflection. ↩︎

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

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

Business Model Canvas and more tweaks

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

A shorter journal entry for today. I am going to provide a brief outline of what I have been working on, as I need to crack on with planning materials and more development work this week.

I have completed an initial version of the Lean Business Model Canvas, as mentioned referencing UX documentation and design artefacts. I obtained the template recommendation in Cao & Bank’s (n.d.) book on UX documentation.
I have asked my friend Jason to take a look at my code for the arrow button navigation, so I will work on some more tweaks to that tomorrow.
Due to extremely limited time this week as a result of some unanticipated work commitments, I haven’t got as much development work in as I would like. So I have focused on a few fixes on this site as they were smaller thinks that I could achieve in the time that I had.
- I removed a superfluous hyperlink in the footer.php - it was a copy and paste mistake.
- I decided not to “provide a choice of fonts” as it felt like it might offer too many options.
- I decided to install the - I have worked with it before and found it to be one of the best plugins in this area. It offers user-facing tools and some javascript additions to fix common issues in WordPress. Even though I have an accessibility tagged theme, there are additional tweaks that can be completed such as removing title attributes in areas where they aren’t needed and enforcing alt tags. It also allows you to add an active link highlight, which I am initially trying out with a contrast tested purple colour (essentially it puts a box around any active element).
- I worked on a few customisations of the plugin:
  - I added it to a sidebar widget instead of the toolbar that is typically used with the plugin. This is mainly due to some issue with the display of the toolbar and also it made sense to present the accessibility options above the background colour options.
  - I customised the font-family and font-size of the text in the accessibility widget.
  - I enabled the high-contrast and font-size (large text) options as part of the WP Accessibility Plugin.
  - I customised aspects of the large text display so that it worked better with the theme, initially some text was too and some was too small. For example, H2 was a too small in comparison to the paragraph text and stylistically and readability-wise it wasn’t great.
I also changed the text-transform settings on the widgets header text as I noticed that these were all uppercase. This is not the best for Dyslexic readers according to Gov.uk’s recent accessibility posters ( ). I find this series of posters to be very helpful cheat-sheets for accessible design.
- Related findings:
  - Gov.uk Accessible Blog:
  - Gov.uk Government Digital Service:
  - Gov.uk Advisory:
Also in my travels I found the Web Accessibility Evaluation Tool (WAVE) - this was recommended both by the WP Accessibility Plugin authors in the documentation and on the Gov.uk page above on the “making your service accessible” page.
The report (although it will change as the site is being updated) WAVE highlighted some more bits that I need to work on and I do still need to look at the contrast of the text in comparison to the background in the different colour schemes. The “making your service accessible” page states that automatic tools like WAVE can only detect a proportion of issues (around 20%-30%: ). So I need to ensure that I don’t regard these tests as exhaustive moving forward.

I feel that I have learned quite a bit about accessibility through my work on this journal site, as well as honing my existing skills. So I will take these ideas and techniques forward with me as I continue to work on my portfolio project.

More to come on the to-do list:

concept document
Task scenarios
Business Model Canvas
General characteristics for user groups
\[Tentative plan\] create a UML2 diagram
A paper prototype – the prototype may actually need to be made in a prototyping tool so that Theo and I can discuss it via email. So probably a change of plan on this one.

References

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

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: . ↩︎

Theme testing

Thu, 13 Oct 2016 00:00:00 +0000

This journal entry continues on from my first post. In that section I outlined plans to test a number of WordPress themes that had been tagged with accessibility. This led me down a fascinating path of learning with one wrong turn along the way.

The testing process

In my last post I outlined a number of themes that looked like possible candidates, including the following:

(WordPress core theme)
(WordPress core theme)

As part of the testing plan I used a several tools, listed at the bottom of this post, to analyse the best themes. Please note, that some themes did not reach the full testing phase due to issues that I would term as deal breakers; the issues identified were troublesome enough where it was not worth continuing with those themes. I also entered into this testing process with an intention to attain a WCAG 2.0 Level AA (W3C, 2016a) accessibility rating for my journal site. This is largely because accessibility is a budding specialism of mine and I wanted an excuse to delve around in the innards of the newest WordPress themes!

Testing results and observations

I decided not to install this theme. Although ‘afterlight’ had the accessibility tag, I found on inspection of its specifications that it is based on having a background image throughout each area of its architecture (landing page, pages, posts - all had to have a single background image). Upon previewing this with my content, using the WordPress theme preview tool, I found that this negatively impacted readability. As the purpose of this blog is to engage in reflection, it seems important not to distract from that at the design level.
This theme has (or rather had) a lot of potential and is coded according to best practice (e.g. accessibility tagging) outlined in the WordPress Accessibility Handbook (WordPress.org, 2014).

I realised later on looking at in-code documentation that this theme is based on a starter theme, Underscores (or “_s”). A bare bones CSS starter theme (Underscores, 2016).

Unfortunately after venturing as far as creating a child theme, I found issues in the some of the front-page template functionality. I also discovered that the links through to the theme documentation were broken and as a result I decided cease using the theme.
I do like the clean lines and simplicity of enigma, even in light of the negative points outlined in the slideshow below, it is certainly a worthy candidate. However, the dependence on the burger-style menu (the three lines) although often essential on mobile versions of a site, is less effective when viewed in a conventional web browser. I decided to seek out a theme that offered more versatility for delivery of the navigation menu/s.
Initially I really liked the simplicity of this theme design and it is very responsive, however in terms of accessibility it has some problems. Namely, it does not support reader view in Firefox 49 or Safari 10 and also was not good in terms of respecting the heading levels for the screen reader. I did not complete the other tests as these two issues were deal breakers.
The ultimate in clean and simple. Although as a seasoned WordPress user the annual core template always looks like the annual core template, even with customisation. Twentyfifteen is quite book-like in its bi-fold layout and this doesn’t strike the desired tone. As I tend to be quite verbose in my writing, I think that a theme with better except support is better. Having said that, the core templates can provide excellent bases for creation of child themes.
A fresh approach to a traditional blog layout with some very nice built-in features. Highlights include the support of the read more tag for determining the length of post/entry excerpts shown on the front page. I also like the presentation of the author avatar, together with post tags on the left-hand side of each post. This theme has good customisation options and good widget support (the tools that you can place in the aside-style columns in the layout). A solid theme, not the most riveting to look at, but it ticks all of my accessibility boxes!

The final two contenders

I ran an IDI web accessibility check and used Firefox accessibility checker plugin to enable keyboard control on the two top candidates: twentysixteen and chuchadon. Twentysixteen had two flagged elements when I looked at the posts page specifically - one was that h1 header element was nested, so the order of headers was not ideal. Also there was a missing label element in the search field. These would both be very easy fixes.

Chuchadon had the same flag on the header nesting for a posts page, so it is likely that this is an issue that would be picked up for a number of WordPress based blog template. To test this theory I tested my own blog, which is based on the Edublogs implementation of WordPress. Interestingly this was not an issue on my blog (e.g. post: ) or another Edublog that I tried. I took a look at the .entry-title tag in the edublog and it was at h2 level rather than h1. This struck me as an issue with both these themes. So I created a child theme of Chuchadon to try out a tweak on line 353 of the CSS stylesheet. The tweak worked perfectly, but alas this was also when I realised that there were some other things that didn’t work for me in chuchadon (front-page configuration and the documentation links).

The final verdict

I have selected twentysixteen as my theme and have created a child theme to allow more space for customisation.

Image source: WordPress.org,
(Worpress.org, 2016b)

Just to clarify… You may be asking, what is all this talk of child themes. Well in essence a child theme is augmented version of it’s original parent. Essentially a child theme allows you to commit edits to the visual presentation as well as the functions of a WordPress site without editing the original theme’s code. This is a smart tactic for customising a theme, particularly the core annual themes, as because WordPress as a CMS has frequent updates, any accompanying parent theme updates can be safely run without affecting the code in the child theme too much. The use of a child theme will also allow me to replace the parts of the CSS and theme functions that were identified in the IDI accessibility report.

Techie stuff

The server was down this weekend so I used this as an excuse to implement some technical tools which will help further down the line. First of all as I mentioned in my last entry I installed MAMP on my development computer. MAMP, stands for Macintosh, Apache, MySQL, PHP (“MAMP”, 2016) and allows to setup a local copy of WordPress on your computer. I find having access to a local installation to be helpful for two reasons:

I can work on my child theme tweaks without having access to the server and test them out in a controlled environment.
I can test out themes and plugins without muddying my installation. Sometimes everything about a plugin can look good and then you install it and there are things are about it that don’t work or the coding isn’t up to scratch. So again it is good to have a test environment for that.

I also setup a github repository for version control; to track my changes to the theme files. This is the first time that I have setup my own repository, so it was definitely a learning curve for me. However, I think that knowing how to do this will be essential for my forthcoming work on my web portfolio project.

Thinking long and hard about plugin installation is a good idea… I was right to spend time deliberating about the types of plugin to install. The problem with plugins is that you often have to spend time tweaking them for every update and every theme. My carefully considered decision to install the footnotes plugin has already had to result in CSS tweaksWhy not use a footnote to explain what I did! I changed .footnote\_plugin\_text to change the width of the area where the footnotes are shown and the font size. I also had to make the table border elements transparent in the .footnote\_plugin\_link, .footnote\_plugin\_index. Finally I needed to manually change the position of the superscript figures as I wasn’t happy with the distance of the figure numbers from the text characters, for this I changed the .footnote\_plugin\_tooltip\_text class due to how the footnotes were shown in the twentysixteen theme.

Analysis tools used:

IDI Web Accessibility checker (AChecker, 2011).
Snook colour contrast checker (Snook, 2015).
Sim Daltonism colour blindness simulator (Wickline, 2000).
Accessibility evaluation toolbar by John Gunderson (Gunderson, 2011).
Apple and Firefox text-to-speech tools.
Keyboard-only navigation of site.

Guidelines used and referred to:

Web Content Accessibility Guidelines (WCAG) (W3C, 2016a).
Techniques for WCAG 2.0 (W3C, 2016b).
BBC Future Media Standards and Guidelines (BBC, 2008).
Mozilla Developer Network documentation (Mozilla, 2016).
WordPress Accessibility Handbook (WordPress.org, 2014):
- Specifically I found this page very helpful - Questions to ask - The ‘questions’ are derived from the four principles of WCAG and they are immensely helpful.

Software and developer tools used:

MAMP (appsolute GmbH, 2016).
Github - version control and code repository (GitHub, 2016).
WebStorm - editor: (JetBrains, 2016).
Textwrangler (Bare Bones Software, 2016).
Chrome developer tools (Google, 2016).

References

AChecker. (2011). IDI web accessibility checker: Web accessibility checker. Retrieved October 7, 2016, from AChecker website,

appsolute GmbH. (2016). MAMP & MAMP PRO. Retrieved October 7, 2016, from MAMP website,

Automattic. (2015, October 7). Afterlight. Retrieved October 7, 2016, from Wordpress.org website,

Bare Bones Software. (2016). Bare bones software. Retrieved October 13, 2016, from

BBC. (2008, June 24). Future media standards & guidelines - accessibility guidelines v2.0. Retrieved October 7, 2016, from BBC website,

GitHub. (2016). Build software better, together. Retrieved October 13, 2016, from

Google. (2016). Chrome DevTools overview - Google chrome. Retrieved October 13, 2016, from

Gunderson, J. (2011, August 19). Accessibility evaluation Toolbar. Retrieved October 13, 2016, from

Herbert, C. (2016, October 8). Where does “hello world” come from? [Online forum comment]. Retrieved from StackOverflow website:

JetBrains. (2016). WebStorm: The smartest JavaScript IDE. Retrieved October 13, 2016, from

Keijonen, S. (2016a, September 16). Chuchadon. Retrieved October 7, 2016, from WordPress.org website,

Keijonen, S. (2016b, December 29). Kuorinka. Retrieved October 7, 2016, from WordPress.org website,

Lüken, A. (2015, October 31). E.Nigma 2015. Retrieved October 7, 2016, from WordPress.org website,

MacNeill, F. (2016, June 14). [Talk] factors of trust in IoT App interfaces Redux [Blog post].

Mozilla. (2016). Mozilla developer network. Retrieved October 13, 2016, from

MAMP. (2016, September 29). In Wikipedia. Retrieved October 16, 2016 from

Rietveld, R. (2016, March 21). WordPress goes WCAG [Blog post]. Retrieved from

Snook. (2015, January 11). Snook colour contrast checker. Retrieved October 13, 2016, from Snook.ca website,

Underscores. (2016). Retrieved October 7, 2016, from Underscores website,

W3C. (2016a). How to Meet WCAG 2.0. Retrieved October 13, 2016, from W3C Web Accessibility Initiative website,

W3C. (2016b). Techniques for WCAG 2.0. Retrieved October 13, 2016, from W3C Working Group website,

Wickline, M. (2000). Sim Daltonism for Mac. Retrieved October 13, 2016, from

WordPress.org. (2014, October 11). Accessibility handbook. Retrieved October 7, 2016, from WordPress.org website,

WordPress.org. (2016a, December 6). Twenty Fifteen. Retrieved October 7, 2016, from WordPress.org website,

WordPress.org. (2016b, December 6). Twenty Sixteen. Retrieved October 7, 2016, from Wordpress.org website,

[Talk] Factors of Trust in IoT App Interfaces Redux

Tue, 14 Jun 2016 00:00:00 +0000

Talk presented at UX Camp Brighton 2016 - Redux on 14/06/16 at 68 Middle Street

for the version of this talk given at UX Camp Brighton, 2016 (19/03/16). Video version of original talk. from on .

Session description:

Does your app rely on OAuth to offer connection to other apps and services? Based on my research studying app-to-device relationships in Internet of Things systems (e.g. Fitbit, Jawbone UP, Nest, SmartThings, Glooko), I have uncovered some best practice recommendations when it comes to inspiring trust within your interface. Trust definitions used in this video are from Pavlidis, Islam, Mouratidis, and Kearney (2014). This research is aligned with the SenSe research Cluster at the University of Brighton (secure and dependable software systems).

About SenSe

aims to develop novel and pragmatic ways to assure the dependability of software systems with particular emphasis on security, trust and risk. We focus on theories from model-based engineering and analysis-based assurance to develop methods, models, practices and tools that promote the provision of security and dependability in complex interconnected and heterogeneous systems and information infrastructures that underpin our economy and society.

Preliminary recommendations:

UX Questions to Ask in Relation to IoT Apps

#	Category	Questions to ask
1	System dialogues and Semantics	Are system dialogues consistent? For data permissions for use tips for motivational messages
2	Settings	Are all the settings housed together? Are items like the privacy policy and standards adherence available from this area? Can the Terms of Service (or a shortened format of ToSs) be accessed from within the app? Can connected apps and devices be reviewed/managed from within the app? Can support documentation be accessed from within the app?
3	Checkups for Setup/Workflow/Privacy An essential part of onboarding. Also a method for supporting trust and helping users to invest time in learning the higher-level functions of an app, which promotes realisation of app benefits and long-term commitment to use of the app (Brignull, 2013).	Periodic reminders about setup: Can the setup be improved? What devices could be added safely? What benefits might be available as part of the system that the user may be unaware of? Periodic review of workflow: ask users to review the workflow in the system to add a level of human oversight. If the app is not accessed frequently then email and text message may be effective ways to prompt engagement. Think of it like entering a monthly gas meter reading. Is an automated workflow still operating as intended? Is the function still needed? A possible incentive could be that the workflow will stop/timeout if it is not reviewed a la IFTTT. Periodic review of privacy: privacy overview and audit tools within the app. What information is shared with third-party developers? For what purpose/s is it shared? Non-legalese overview of changes to T&Cs should be included in privacy checks.
4	Role/function of the app Applies to central app and third-party apps.	This sounds really obvious, but a lot of primary IoT apps don't actually explain their purpose within the system. What service does the app offer? What need does the app fulfill? What does the app do? How important is the app to the operation of the system? E.g. is it the primary interface or management tool for the system? What data does it need? - Make it clear what is used and why, in plain English.
5	Health/status of hub/sensor/device At any point in time the user should be able to view a basic log of what is currently going on in the system.	What is going on in the system right now? Is recent system activity accessible? Is it possible to access logs from other time periods? Is it possible to see what communication channels are in operation? What third-party apps are connected to the system, what are they doing? What third-party devices are connected to the system, what are they doing? This should be more like what you expect from your banking app when it comes to overseeing the operation of high-importance health, home/business automation IoT systems.
6	OAUTH and API: secondary app data use	Respect users and prove that your app is more trustworthy by only calling data that you are actually using. What data is needed into order to provide the desired third-party service? How is the data used to provide the service? Note: platform manufacturers/developers need to ensure that third-party apps aren't over-privileged in terms of the data they access and the calls they can make via APIs (See the work of Fernandes, Jung and Prakesh, 2016). Developers need to state their intention when it comes to use of information that they call via the API. This doesn't stop those with malicious intent, but it helps users to distinguish between those who pay due diligence to privacy and those who are either malicious or sloppy.
7	What is shared?	Can data access be allowed/disallowed? Once disallowed from the primary app, is this decision upheld? Ideal world: provide granular options for allowing/disallowing access to data which is not necessary for the operation of the service offered by the app. Better yet, don't ask for the data at all if it isn't essential to operation.
8	Access control	Is two-step authentication an option for the web app and login from a new device? Does the smartphone/tablet app offer biometric authentication? Does the app offer the option of setting a passcode for auto screen lock? Particularly if the app controls home appliances.
9	Dependency and operational relationship	As systems become more complicated it is crucial that the user is aided in building a mental picture of the basic configuration of the system. I [keep thinking of Max](https://cycling74.com/products/max/) when I think of this issue. Is logging available? What is going on in the system right now? What is attached to this system (devices/sensors/users)? Is the system visualised in any way?
10	Try before you buy	Wearables have the right idea on this one, allowing you to trial a wearable companion app using your smartphone's built-in sensors. What if you could try out the perks of the system before you buy the actual device? Is a preview of how the app will operate with devices, provided as part of onboarding? Can you try of some of the functionality of the system without buying a system-specific device?

References

\[alex\]

. (2016, May 2). SmartThings platform security - response from Alex. Retrieved June 13, 2016, from

Aliph, Inc. (2016). Jawbone UP (Version 4.13)

\[Mobile application software\]

. Retrieved from

Barcena, M. B., Wueest, C., & Lau, H. (2014). How safe is your quantified self? (1.1). Retrieved from

BBC (2016). Hidden killers, series 1: 2. The Edwardian home Retrieved from

Bilton, N. (2016, January 18). Nest thermostat glitch leaves users in the cold. The New York Times. Retrieved from

Bradbury, D. (2015, November 26). Usability v safety: How to design our way to better security. The Guardian. Retrieved from

Brooks, J. (2016, January 8). Fitbit hit with class action lawsuit over alleged misreading of heart rates

\[Blog post\]

. Retrieved from

Brignull, H. (2013, March). Ramp Up. Personalising the experience, Brighton. Retrieved from

Brignull, H. (2016). User interfaces designed to trick people. Retrieved June 13, 2016, from

BS ISO/IEC. (2011). Systems and software engineering — Systems and software quality requirement and evaluation (SQuaRE) — System and software quality models (ISO/IEC 25010:2011(E)) Switzerland: ISO/IEC

Catalyst IT. (2016). Mahara (Version 1.10.5)

\[Computer software\]

. Retrieved from

Chen, E. Y., Pei, Y., Chen, S., Tian, Y., Kotcher, R., & Tague, P. (2014). OAuth Demystified for mobile application developers. CCS ’14 Proceedings of the 2014 ACM SIGSAC Conference on Computer and Communications Security. doi:

Cluley, G. (2013, February 13). Jawbone accounts compromised by hackers - personal info accessed, passwords disabled

\[Blog post\]

. Retrieved from

Cycling’74. Max is a visual programming language for media. Retrieved March 19, 2016, from

Ericsson. (2016, June). Wearable technology and the Internet of things. Retrieved from

Faily, S. (2014). Engaging stakeholders in security design: An assumption-driven approach. Proceedings of the Eighth International Symposium on Human Aspects of Information Security & Assurance (HAISA 2014), Plymouth, 21-29. doi:10.13140/2.1.3997.2647

Feamster, N. (2016, January 19). Who will secure the Internet of things?

\[Blog post\]

. Retrieved from

Felt, A. P., Egelman, S., & Wagner, D. (2012). I’ve got 99 problems, but vibration ain’t one. Proceedings of the second ACM workshop on Security and privacy in smartphones and mobile devices - SPSM ’12. doi:

Field, C. (2004, January 23). Danger high voltage! Edwardian electric Tablecloth uncovered Retrieved from

Fitbit, inc. (2016). Fitbit (Version 2.18)

\[Mobile application software\]

. Retrieved from

Guadamuz, A. (2015). The monkey selfie: Copyright lessons for originality in photographs and internet jurisdiction. Internet Policy Review. doi:

Glooko, Inc. (2015). Glooko (Version 3.2)

\[Mobile application software\]

. Retrieved from

Harrison, D., Marshall, P., Bianchi-Berthouze, N., & Bird, J. (2015). Activity tracking: Barriets, workarounds and customisation. Proceedings of UBICOMP ‘15, Osaka, Japan. doi:10.1145/2750858.2805832

Hess, W. (2015, May 7). Onboarding: Designing Welcoming First Experiences. Retrieved March 19, 2016, from

Higginbotham, S. (2016, January 22). Episode 42: These are the two biggest challenges facing the smart home Retrieved from

Higginbotham, S. (2016, March 17). Episode 50: Are your devices being held hostage?. Retrieved March 28, 2016, from

Internet Policy Review. (2013). Privacy & security. Retrieved June 13, 2016, from

IoT security research at university of Michigan. (2016). Retrieved June 13, 2016, from

Kastrenakes, J. (2016, March 10). Nest can now use your phone to tell when you’ve left the house Retrieved from

Kalloniatis, C., Mouratidis, H., Vassilis, M., Islam, S., Gritzalis, S., & Kavakli, E. (2014). Towards the design of secure and privacy-oriented Information Systems in the Cloud: Identifying the major concepts. Computer Stan- dards & Interfaces, 36(4), 759–775. doi:10.1016/j.csi.2013.12.010

Krok, A. (2016, June 6). British security firm hacks Mitsubishi Outlander via mobile app, Wi-Fi - Roadshow. Retrieved June 12, 2016, from

Lohr, S. (2016, June 9). Tony Fadell steps down amid tumult at nest, a Google acquisition. Technology. Retrieved from

Malik, O. (2015, December 30). In Silicon valley now, it’s almost always winner takes all. The New Yorker. Retrieved from

myDevices. (2016). First IoT project builder - myDevices cayenne. Retrieved March 19, 2016, from

Nest Labs, Inc. (2016). Nest app (Version 5.2.2)

\[Mobile application software\]

. Retrieved from

O’Neill, O. (2002). A question of trust: The BBC Reith lectures 2002 (4th ed.). United Kingdom: Cambridge University Press.

O’Neill, O. (2013, September 25). How to trust intelligently

\[Blog post\]

. Retrieved from [http://blog.ted.com/ how-to-trust-intelligently/]( how-to-trust-intelligently/)

Pavlidis, M., Islam, S., Mouratidis, H., & Kearney, P. (2014). Modeling trust relationships for developing trust- worthy Information systems. International Journal of Information System Modelling and Design, 5(1), 25–48. doi:10.4018/2014010102

openHAB. (2016). OpenHAB. Retrieved June 13, 2016, from Rogers, C. Martha Lane Fox interviewed by the house magazine Retrieved from

Sasse, A. (2015). Scaring and bullying people into security won’t work. IEEE Security & Privacy 13(3), 80-83. doi:10.1109/MSP.2015.65

Scoseria, I. (2016). MyDevices launches cayenne, the world’s First drag-and-drop IoT project builder. Retrieved 19 March 2016, from

Secure Tropos. (2013). SecTro2 (Version 2.1)

\[Computer software\]

. Retrieved from

Sempers, P. (2015, October 19). Samsung Smartthings app tour on galaxy s6 - #ThinkSmartThings Retrieved from

Seuss (1999). The cat in the hat (5th ed.). New York: Random House USA Children’s Books.

Spary, S. (2016, January 6). Online criminals are tageting Fitbit user accounts. BuzzFeed News. Retrieved from

SmartThings, Inc. (2016). SmartThings Mobile (Version 2.0.7)

\[Mobile application software\]

. Retrieved from

Wollerton, M. (2016, May 23). The best smart hub. Retrieved from

Woods, B. (2016, January 19). Hippocratic oath for connected medical devices. Retrieved June 12, 2016, from

My current personal hero:

Reflection: The search for the best notetaking -or rather handwriting- app

Sat, 27 Sep 2014 00:00:00 +0000

Introduction

In February I shall be starting an MSc in User Experience Design and as a consequence my thoughts have turned to the study tools, which I wish to make use of as a student. As part of this process I have been considering my arsenal of apps. I’ll likely talk about the full extent of my app choice plotting in future posts. In this post I shall provide my reflections on notetaking apps in-particular. In my experience early preparation has always been the best strategy when considering any new academic venture, so I look forward to sharing some of my findings on this blog in the lead up to and during my forthcoming period of study.

Productivity and notetaking apps that I use

In my professional life I have become a devotee of . I was not by any means an early adopter or rather I was but I got burned by a glitch circa 2009 which resulted in the loss on my web-based notes (at that time using it in-browser). I must stress that such a loss is not likely to happen with Evernote now but back then it was a relatively new thing and when on the cutting edge you may occasionally experience virtual paper cuts (thankfully I only lost a few notes)! However last year Evernote won my heart again when I decided that I wanted a solution with note tagging (keywords), multi-platform compatibility (in my case, Mac, PC, iOS, Android) and OCR capabilities (text recognition). After looking at a few app-based solutions it was the only option which gave me the flexibility I was craving. In my work I have come to rely on Evernote as an excellent option for recording meetings and consultations, being able to send a record of what was discussed and any actions to a staff person immediately after the meeting. I then link this information to my to-dos in (I’ll write about the wonders of Trello some other time). Sometimes when I’m particularly busy I quickly jot ideas or tasks down on paper and then use Evernote’s document capture function to take a photo. I am always impressed by the OCR capabilities of Evernote when it comes to recognising my squiggly handwriting and making it searchable (the detects words in handwriting rather than converting handwriting to type). Also when you add in the photo annotation tools made possible through Evenote’s partner app I am one happy customer. But…and you knew that this was coming, there is something to be said for handwriting and when it comes to deeper notetaking and truly learning concepts; I personally need to write concepts down to retain and understand them. When the iPad first came out in 2010 (Apple, 2010).

Handwriting in apps

File management

I was an early adopter and one of the first apps I fell in love with was . This app lets you draw or write with a stylus or your finger in virtual notebooks, later they added being able to add photos and voila it became a virtual sketchbook! I no longer wanted to carry a moleskin and an iPad and for a while Penultimate served me well for quick notetaking. Penultimate was acquired by Evernote in 2012 (Libin, 2012) and with that came the OCR capability of being able to ‘search’ your handwritten notes. However there were three functions which I have always felt are missing from Penultimate app which eventually caused me to abandon it. The first is the absence of a adequate notebook file management system, in apps like , and , although more strictly for annotation of imported files, these apps allowed a far superior filing system. For example in iAnnotatePDF you can tag files with keywords, create folders and connect to Sharepoint (MyFiles) via WebDAV for backup purposes. In Penultimate, you just have an ever growing pile of notebooks.

iAnnotatePDF, the tagging function is shown.

Background colour

The second issue is the background colour, from my you’ll know that background colour is very important to my efficiency when reading and writing. You do have the option of importing a photo to use as a background, so in theory that is a workaround and you can purchase notepaper types from Evernote Market, there are some good ones but these are more to do with line based layouts than page background colour. I have also found this which allows you to create your own templates for Penultimate as well as use templates which other’s have created, in particular I was happy to find a template after the recent presentation about it. With any drawing/handwriting app, as a workaround, you could draw a template on the page, but then it becomes tricky when you need to cut and paste your written sections as the background gets confused with your written content.

Notes Plus - the background colours and template options available in Notes Plus.

On-screen wrist protector

The third issue is the lack of an adjustable on-screen wrist protector. Penultimate allows you to define your wrist position but as you will see from the image below, it has trouble deciding which marks my stylus is making and which marks my wrist is making. This was the deal-breaker, I’d be mid-flow in writing and half of what I’d written would fail to show up as in Penultimate’s view my wrist had been doing the writing!

Penultimate - the effect of wrist shown.

Cornell Notes template shown above from

So after four years of on and off trial and error, with periodic abandonment of the idea of handwriting on my iPad other than using very helpful PDF annotation apps for small comments (another post about these apps specifically in the future), I think that I have finally come up with my ideal list of functions which a handwriting app needs - and one app fits almost all of them - Notes Plus with Notability taking a close second place.

My ideal list of functions

File management and ideally creation of folders or notebooks for storage of different note types
Background page colour and template adjustment
Adjustable on-screen wristguard

iAnnotatePDF - this is a pretty typical wristguard which you can adjust downward as you fill the page. A simple thing, but important.

Good virtual ink flow
Ink customisation and style
Two-fingered scroll and zoom support
Easy drag and drop customisation of already written text
Dropbox and/or WebDAV backup support - just in case
Hand-drawn shape recognition - I draw a circle or square and the app tidies it up for me automatically
Close-up mode - I not good at keeping to the lines or within box areas otherwise due to my squiggly writing

Two Examples of Close-up mode

Notes Plus

Also shows the excellent Ink customisation options.

Notability

Audio memos - for when my writing isn’t fast enough!
Presentation mode: can this app be shown in a classroom, to demonstrate annotation or to draw quick diagrams?
Good tutorial materials to make the most of the app
- Bonus:
  - PDF and word doc import - is it an annotation app too!
  - Layers - ‘send to back’ and locking options
  - Built-in Cornell Notes template
  - Handwriting to text converter (!) - in app purchase available in Notes Plus

Handwriting to Text Converter in Notes Plus

Select the text by drawing a circle around it. Select the conversion option.

It is accurate even with my horrendous handwriting.

Analysis

I analysed four apps based on these criteria: Notes Plus, Notability, iAnnotatePDF and Penultimate. The results are below, I have awarded 2 point for each “X”, the “+” signs indicate exemplary functionality. Bonus features are not counted towards possible total of 26.

New: Notability have just released a .

Criteria	Apps				Notes
	Notes Plus	Notability	iAnnotatePDF	Penultimate
File Management	X	X	X+		iAnnotatePDF:has excellent file management options - tagging, folders, search etc.
Background page colour	X	X+			Notability: will even allow you to change the background colour of PDFs.
On-screen wristguard (adjustable)	X	X	X
Good virtual ink flow	X+	X	X	X	iAnnotate is not quite as good as the others on this point.
Ink customisation	X+	X	X	X	Notes Plus has highly customisable and rather beautiful ink - it actually improves my handwriting.
Two-fingered scroll and zoom	X	X	X	X
Easy drag and drop of text	X+	X	X+	X
Backup options	X Dropbox Google Drive	X WebDAV Dropbox	X Dropbox Box Google Drive OneDrive WebDAV	X Evernote Dropbox	Of course I would love all these apps to be able to sync with Evernote some how, but I would like to see all of them offer a WebDAV option and ideally also Microsoft OneDrive.
Drawn shape recognition	X+				Notability does offer a nice function for drawing shapes and figures, but no shape recognition. This is where iAnnotate is more of an annotation programme, the ‘stamp’ tool has some shapes but it is limited.
Close-up mode	X	X			iAnnotatePDF: does let you zoom in and type and it also has a signature tool for close-up signing on PDFs, but these are less well suited to original notetaking. Penultimate: has drift mode for this kind of writing experience, but I found the enforced motion quite difficult and also frustrating to get out of.
Audio memos	X	X	X+		iAnnotatePDF: lets you place notes in-context throughout your document (in-place, a microphone icon is shown next to areas of text). Really helpful for formative feedback. Notes Plus and Notability: will link audio notes to the specific pages rather than areas of the page.
Presentation mode or allows projection	X+	X	X		Further testing needed: Notes Plus has a VGA connection view which is great. Notability does not have a specific mode, but does project well, as is the case with iAnnotate. Penultimate in my experience has a strange presentation mode and in prior versions would not show when connected via VGA to a projector.
Tutorial materials	X+	X	X	X	Notes Plus: has a lovely developer website as well with a forum and they have responded very positively to my features suggestions in the past. iAnnotate: also have a superb website with tutorials and FAQs.
Bonus
PDF and Word document import	X Converts to PDF	X Converts to PDF	X Converts to PDF
Layers	X+
Cornell Notes Template (built-in)	X
Handwriting to text converter	X+				Notes Plus: offers an in-app purchase for handwriting to text conversion. It is very accurate for small sections of text and immensely useful.
Totals (26)	26	24	20	12

Conclusion

For written notes Notes Plus wins hands-down and it is also superb for combining PDFs, Word documents and written notes into self-contained notebooks or virtual binders. I have resolved to use it for the purpose of textbook related notes over the next few months. I’ll report back on how it goes. For decent notetaking and excellent PDF annotation Notability has clear benefits. iAnnotatePDF’s clear advantage over the other apps is its excellent file management system and also the ability to place audio comments in context within a document.

References:

Apple, Inc. (2010) Apple Launches iPad [Online]. Available: (Accessed: 28 September 2014).

Libin, P. (2012) Evernote Acquires Penultimate. Evernote Blog [Online]. Available from: (Accessed: 28 September 2014).

Accessibility | Fiona MacNeill | Macknowlogist

Reblog - What makes an online space inclusive?

A crowdsourced blog post and reflection

What happened during the event?

Setting the scene:

Examples to illustrate ‘format’

Questions for the audience

1. What was it like at the last online learning event that you attended?

2a. What supported your focus at the online learning event?

2b. Was there anything that disrupted your focus at the online learning event?

3. Think of a positive experience at an online event. What helped you to feel engaged?

4. What helped you to feel included at the event?

5. What excludes you or makes you feel excluded during an online event?

Personal Introspective

Part 1: Human Factors

Part 2: Technology Factors

Results and Summary

Things that help

Things that do not help

Meta Level

How I positioned myself

How I positioned the format of the space itself

Things that I did to help make this session feel inclusive

Ways that Jisc supported this session

Things that I would do differently next time

Considerations for teaching

Bonus content

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

Building the grid

References

Business Model Canvas and more tweaks

More to come on the to-do list:

References

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

Theme testing

The testing process

Testing results and observations

The final two contenders

The final verdict

Techie stuff

Analysis tools used:

Guidelines used and referred to:

Software and developer tools used:

References

[Talk] Factors of Trust in IoT App Interfaces Redux

Talk presented at UX Camp Brighton 2016 - Redux on 14/06/16 at 68 Middle Street

Session description:

About SenSe

Preliminary recommendations:

References

My current personal hero:

Reflection: The search for the best notetaking -or rather handwriting- app

Introduction