Considerations for Accessible Mobile Application GUI Design
Greg Fields, Accessible Product Manager
Blackberry, Research In Motion (RIM)
Speaker: Robin Christopherson
My pleasure to introduce Greg Fields accessibility product manager at BlackBerry and is trying to raise awareness about accessibility issues for Smartphones and increase accessibility of BlackBerry products and will talk about guest practice in GUI’s for applications that will end up mobile devices, thank you, Gregg.
Speaker: GREG FIELDS
For everybody who has met Christian, I don’t have the hair , I don’t have the same type of delivery he would have. In advance, excuse the fact I am not Christian. For the Palantypist stars who will try to catch up let me know if I am going too fast, just give me a nod.
Today I thought I would talk about practical, tactical as posed to here as AIPI, here is what thou shalt do at high level interfaces and design not specific to web and application but mobile web. I am told I have 15 minutes then questions thereafter. Can everybody hear me all right. Also, thanks to Cath for actually inviting me to this. Coming from Greece so I could make it for this day.
Topics to present, a quick scope, background corpus, some high level guidelines of best practices. 15 minutes we won’t do a demonstration but you can meet me afterwards for a chat.
I would look to look at developer tools and additional information. Session scope. 15 minutes, not 20. Design not development; talking specifically about user interface design not specifically mobile development, not wondering which includes you need to have but designing user interface, which I thought might be applicable for this audience.
I think there are a lot of designers in the room?
I see nods.
Design experience and web and web ap not necessary but these are for most of the room topics you probably have already heard of used, taught, had talks on, so it should be a quick review for many and then just introduction for some.
Focused on mobiles specifically, that’s where I work. And focused specifically on universal design and access, the topic we are talking about here.
There are a lots of existing standards, guidelines, while not specifically related to mobile that apply from a user interface
perspective. What is listed on the screen are existing standards including WCAG 2.0, best practices from W3C, HFES as well and application developers that develop for BlackBerry that I have to go after and police and say, please can you do this.
What works and what doesn’t work
In the experience we have in our own teams I am sure many in the room would have not put BlackBerry and accessibility together in the same sentence up until a few years ago or maybe even yesterday as we had our heads down doing a lot of work and didn’t say a lot until now.
So design guidelines. Ten of them.
We are going through each one relatively quick with screen shots where applicable, I will describe the screen shots where I can. Native UI libraries, colour and contrast, how you can ensure use of colour and contrast is most applicable. Inheriting global settings, what the cost and benefit is for doing that. Error messages in creating effective error messages.
Focus placement which is going to be ,the a lot of different environments. Contextual menus, making sure the tasks are operable in context to minimised task time increased satisfaction, etcetera, consistency, we’ll talk about progressive disclosure, grouping, chunking and keyboard navigation I am hoping that none of these are new to most people in the room and we’ll take a different look at it from a mobile perspective.
Native UI libraries.
For a mobile there are multiple libraries you can apply. There is the Java 2 micro edition, CDC and CLDC formats mid-P, your own way of doing things. Wherever possible try to render using the native user interface components already deployed on that platform.
The reason why is there are no two mobile platforms for accessibility, one BlackBerry one apple iPhone. If a … UI designer and associated API developer have worked hard to make sure all APIs and all the specific building blocks the objects used to create a screen render a screen, are accessible, a lot of work is done for you.
It helps ensure consistency across platforms. What is described on the scenes an image of a list view an email application that implements the list view there are examples of couple of emails, focus – in this case a gradients letting us know my friend Monica is sending me some information. This is all that exists to the AT all the information described is available if you were to use similar list but that your own gradient to highlight the child state information its role in context you can do yourself but if you can use what is there neighbourly it saves work.
If you did your own nice cute thing and the platform didn’t offer, many cases you want to do that because the platform does do everything but there is additional effort so if you are looking to do an analysis of what you wanted a relative to what isn’t there now there is additional effort if you want to do what the platform doesn’t do.
What I have described on screen is another list view for another application a calendar context application sorry. And what is described at the top right hand corner is the screen is normal format and below it is the same screen bundle reverse contrast so all BlackBerry it would be reverse contrast, on apply iPhone white on black or black on white.
As you design applications, being mindful your users might be switching and doings things other than what you had planned initially you might want to take a look at it to make sure what you are doing still works.
In this case, while on the original normal view the average contrast ratio is good 17 to 1. Once we go reverse contrast, the find text associated label for text input box is closer to 6 to 1, which – 7 to 1 is really hard to see.
Up coming editions this will be fixed I thought I would show forwards of our application before I show others.
Contrast ratio 7 to 1 for foreground and background adjacent objects
Adjacent objects so you can differentiate between the two. Leverage semantic colours where possible so colours for which there already exists meaning in the mind of users. Avoid red greens for the males in the room who will become red green deficient.
That’s just a problem. Luckily, the traffic lights are positioned so it is no doubt problem for me, except – avoid communication by means of colour alone.
So if the only way that your application is communicating to an intended user is by means of colour and if they can’t see colour and/or reverse contrast is applied, and the colour intent is not what you meant then your intent actually has not been successful so if at all possible try take sure there is multiple ways of getting information .
Inherent global setting, what we have described on the top right is a screen shot of a device where you are in a screen keyboard staying mode increasing the size of the font on this case up to 14 point.
The screen below is Google maps screen shot, where in this case they use their own UI objects and didn’t inherit the global system settings so it needs the extra bold and specific font. As you see the only thing really visible is the term walking direction, the title. But the directions for which you need is really hard to see. . Use system settings where possible this wouldn’t conflict with the users defined settings. So one of the tendency to always try to follow is not to create an obstacle for an individual who already has AT on their device.
And enables your application to look and feel like everything else.
Effective error messages
What is described on screen is another screen shot. In this case, I was trying to download a framework project 7 – actually 6 deliverable from friends in Greece a non-visual way minding map application. In the specific case the location of the files I tried to download didn’t exist or it was an error in some way. The error message on the screen is, this application doesn’t contain a signature.
It might not be from a trusted source, do you want to proceed, yes or no. At first it seemed like a pretty helpful description because it is clear, the intent of the error is there, the context is there and leading instructions are provided to resolve but in this specific case the error message doesn’t match the error. There was a link between files that didn’t work. Another thing to be fixed if the goal is to help users recover and avoid in the future, providing really specific very clear and leading directions for recovery of errors will help improve a lot.
NEW SPEAKER – question from audience:
Can you try to be nearer to the microphone, please?
Certainly, my apologies.
Use active voice
Minimising the additional words used is always helpful but you sins active office directs a sentence and makes it easier to understand, specially for individuals for whom which critical reasoning through whatever the impairment is, might be difficult. And the call to action in this cues a button a question, two buttons, you say yes or no based on the questions so you don’t have to worry about what you are trying to do. It happens the screen shot the coordinator took doesn’t help help my case here.
Placement of focus, ensuring highly visible focus
Make sure the placement of the focus aligns with the users mental model so if there is an section on rendering of a screen I am going to a screen to do something, if there is an interactive object that I can in turn interact with, is that not the place where the focus should be?
It is always going to be relative to the screen text and the features on the screen, what you can do.
Contextual menus, a two screen shot.
The top right is a record in a contact it is actually my record with travel numbers , and facts. The default focus placement was on the first interactive object, which as is an email address. The screen shot below that is the first instance of pressing menu. The option in the menu list which is in focus is contextually related to what the previous focus was. The cursor was on G fields at my BlackBerry.com.
If I press menu I would expect to be able to email Gregg fields, the first menu option listed the advantage is the frequently used menu options in place information discuss.
Decrease task time, increases trust
Something Microsoft is doing a good job talking about trustworthy applications but creating trust in your application leads to individuals wanting to try to navigate and go to areas they wouldn’t have gone before and they don’t worry about running into a dead end because they think there will be a safe harbour. It contributes to user perceptions that things just work, way beyond maybe ten years ago which was – actually it is RIM and BlackBerry’s 10th anniversary of the BlackBerry Smartphone.
When it first came out it was so simple, not in colour, pretty mono but did what it was as opposed to and the expectation was it world just work that more complex and more features the device had, we steered away from that a bit, and now we are trying to go back to it. From an application developer perspective, that’s ideal.
Intra navigation presentation inertaction methods
The way users interact with your application this same throughout the screens. If you have your only unique UI object to enable a task action that should be the same type that you use for other tasks in your application. If at all possible it should be the same that is already on the device.
Examples would be – I will say buttons for lack of a different term. A button if it already exist on the device and you have your own unique UI control for whatever reason ensuring you use that throughout all the instances of a button in your ap and it should look like a button. It might want to look like a button already there.
This decreases learning time because most likely your application isn’t the first thing a user tried on the mobile phone, they had to download it at some point so they had to use the phone previously so the experience already set is the mobile platform, be it Android, BlackBerry, iPhone whatever. Because that is the case it becomes the mental model for the individuals.
These are things that are used well on websites and web applications already, no different to mobile, providing individuals a sense as to what step they are in, and how many steps there are. This is applicable when you think about multi-tasking. If you are trying to do something and a call comes in it is a mobile phone you have to be able to go back to where you were previously. Knowing I was step 2 of 5 helps me understand do I really want to do this task, do I want into put the effort, what is the reward for me right now and can I come back to it after the phone call.
Grouping and chunking
I have got a picture on here of another contact record from my friend at AT and T war less, the information organised is organised into three areas, name, title and organisation because those are static pieces of information. Secondarily phone and mobile and email, things to which I would interact as a second chunk, then work address information , I might interact with delivered, perhaps through Google maps BlackBerry maps or something else.
Limit things to three to fiver chunks, basic types of things individuals can use.
Helps pre- process
An important context. If you can pre- process it makes things go quicker and helps an individual go through their task, it it is means think they less. If we go back to instances where this an application that your mother is trying to – I am not saying mothers are different than fathers – but this might be easier. The rest, the deck will be thereafter feel free to take a look. I am getting the tug that time is over.
There is tighter URLs for most things and this deck will be available ever after on whatever websites the files are hosted.
Contact information, G email@example.com or the Twitter access is @berryaccess.
That’s it, thank you very much.
Speaker: Robin Christopherson
I think there are two minutes, not five for questions.
Speaker: Kath Moonan
If you have questions for Greg we’ll park them until the mobile Panel because I am aware we are eating into the next speaker.
Speaker: Robin Christopherson
She is very strict!
Fascinating and speaking from personal experience the screen reading was incorporated in the BlackBerry OS overture is fantastic, the. I now have embedded full screen reading software in both BlackBerry and iphones is a fantastic Vista opening experience. Recently somebody hearing the screen reader on the iPhone said it is kind of annoying but useful for some people. Like saying a guide dog is annoying because it gets hairs on your suit.
The next speaker is Christian, set up and ready to go.
NEW SPEAKER: We are trying to be strict about time, is everybody going to be all right if we had 25 minutes break, which means we can get Christian back to 35 minutes it needs you will get your coffee down it quite quickly.
That was a joke actually by the way.