Mobile Archives - Page 2 of 7

Improving numerical data entry on mobile devices

Rachele DiTullio16 February 202117 February 2021Mobileaccessibility, usability

When I order something online, usually from my phone, I have to enter different pieces of numerical information. If you use a mobile device, you’ve probably noticed that depending on what kind of information a form field requests, you’re sometimes presented with different on-screen keyboards.

Here is a side-by-side example for entering a credit card number:

a credit card number form input showing a numerical keyboard when the field is in focus — *Numbers keyboar*d

a credit card number field on a form showing the regular A-Z keyboard on screen — Standard keyboard

Which of these keyboards makes it easier to enter a credit card number? For most people, it’s going to be the numbers keyboard.

Reduces time on task: There’s no need to switch to the numerical view of the standard keyboard when the UI provides access to the numbers keyboard.
Lessens cognitive load: You’re presented with a telephone keypad which centers numerical inputs over letters or symbols.
Increases accuracy: The number keys are over three times the size of the standard keyboard which reduces entry errors.

Use the proper input type

Enabling the numbers keyboard for certain input types is a great usability improvement. But what about accessibility? We need to ensure we’re programmatically indicating what kind of numerical data the input requires and that we’re displaying the right version of the numbers keyboard as there are slight variations.

The HTML specification includes 21 input type attributes. One of the types is actually number but its intended use is for setting a value in a range rather than for just anything that might be numeric:

The input element represents a control for setting the element’s value to a string representing a number.
4.10.5.1.12 Number state

<label>How much do you want to charge? $<input type="number" min="0" step="0.01" name="price"></label>

We also need to keep in mind success criteria 1.3.5: Identify Input Purpose which requires setting autocomplete attributes to ease data entry. Let’s look at how to properly mark-up inputs for telephone number, zip code and credit card number.

Telephone number

Use input type="tel" to enable the numbers keyboard. With the autocomplete="tel" attribute included, we can see how iOS offers telephone number suggestions as well.

<input autocomplete="tel" name="phone_number" id="phone_number" type="tel" value="">

telephone form field on Twitter which displays the numerical telephone keyboard on focus — Telephone input

Zip code

Since all postal codes are not numbers-only like US zip codes, use input type="text" and set the pattern attribute to enable the numbers keyboard. Include autocomplete="postal-code".

This example is for US zip code entry of 5 digits, 0-9.

<input type="text" id="deliveryZipInput" value="" maxlength="5" autocomplete="postal-code" pattern="^([0-9]{5})$">

a zip code input displays the numbers keyboard — Zip code input

Credit card number

Again, use input type="text" and include the pattern attribute for a 16-digit number. If you want to validate against different credit card types, use the appropriate regular expressions in your pattern attributes such as this one for Visa: ^4[0-9]{12}(?:[0-9]{3})?$

<input type="text" id="x_card_num" maxlength="16" name="x_card_num" pattern="[0-9]*" value="" autocomplete="cc-number">

screen shot of a payment screen with credit card number field in focus and numbers keyboard displayed on screen — Credit card number input

Other types

Other numerical types you might want to experiment with include date, month, time and range. Just don’t default to input type="tel" when the goal is to display the numbers keyboard.

AccessNow app

Rachele DiTullio20 March 201811 February 2021In Real Life, Mobileaccessibility

A new app out of Canada, AccessNow, aims to crowdsource the accessibility of communities. Maayan Ziv, a wheelchair user, has made it her life’s work to help others know which places are accessible before going out.

As she told CBC News in Access Now uses crowdsourcing to pinpoint accessible businesses

“Recently, I went to a place and there were three steps at the entrance, and I was told it was accessible. I get to the entrance, and there are those steps and then I’m stuck in the middle of the street without any options.”

I downloaded this app for iPhone to check out what’s going on in Austin. The app doesn’t have many places reviewed here just yet, with only four entries showing up for the Central Austin/UT Campus/Downtown area.

AccessNow map viewIn addition to a searchable map display, the app also has a list view. Icons from a green thumbs up for accessible to a red thumbs down for inaccessible help users know what to expect when experiencing a mobility impairment.

screenshot showing 4 map pins — AccessNow map view

Users can outline specific issues in a description.

screen shot explaining the accessibility issues with the Austin Panic Room — *AccessNow app place details*

Per the Americans with Disabilities Act of 1990, new construction and any existing construction that undergoes major renovations are supposed to be accessible. I see how this app would be especially useful for rating those places that were built before the act went into effect.

Users who have created an account can add new entries by tapping the ‘add pin’ icon, searching for a place, then entering details. The app provides several tags like accessible parking, automatic door and ramp, as well as an area to type out a description.

screen shot of the add place screen with options to rate how accessible it is — AccessNow add new place screen

Learn more from this interview with the creator.

Podcasts App Changes in iOS11

Rachele DiTullio19 December 2017MobileApple, apps, iOS

I’ve written about my frustrations with the iOS Podcasts app on the iPhone before. With iOS11, Apple decided to change how the interface works in a major way (again). I had adapted to the iOS9 UI, easily adding items to the “Up Next” queue and figuring out that I could reorder and delete episodes.

Queue Management

What I want from a podcast app is to be able to create a queue of episodes that I can manage by adding/removing/reordering with ease.

screenshot of the podcasts app player screen — *Play episode screen*

As with the previous version of the app, you tap the menu icon in the lower right to bring up play options.

Episode menu screen — *Screenshot of menu options for an episode*

The options under this menu have changed. No more history and no way to see the contents of the queue. You can choose to play the current episode next with the “Play Next” option or add it into the black hole queue with “Play Later”.

screenshot of the added to queue notification for a podcast episode — *Added to queue notification*

I say black hole because I cannot find the queue.

It’s hard to use this app if I can’t manage which episodes are playing. I’ve already had times where I added an episode twice or wanted to play a different episode before another one I just added to the queue. I’m stumped and upset.

Library

Some readers may have noticed there is a new option in that menu called “Add to Library”. I was really hoping the library was the queue. Instead it appears to replace the “My Podcasts” icon from the previous app version. Best I can tell, this is a list of the latest episodes the podcast thinks you would be interested in.

It is useful for navigating podcast feeds and episodes with the option to download to your device.

Listen Now

This was my last hope. I really thought this would be a list I could curate, but again, disappointment.

What we see is another list of latest episodes which I think excludes ones you’ve listened to already. So where is the queue? I guess it’s time to search for the answer. The first hit had a great response:

The fact that we have to Google how iOS screen design works shows how iOS screen design doesn’t work any more. I hate iOS 11.

The answer for how to view the queue–swipe up on the screen where the current episode is playing–isn’t working for me. I guess I’ll keep trying but seriously, I don’t understand why Apple obfuscates functionality with obscure gestures.

Update: So if you have episodes in the queue, you can scroll to the bottom of the currently playing episode screen to see what’s “Up Next”. However, if you have nothing in the queue, the section simply isn’t there.

screenshot of the Up Next queue at the bottom of the player screen — *Up Next list*

My design suggestions would be to make the queue more obvious and to call it a queue. I’d love to see a “Queue” icon at the bottom of the app. Calling it “Up Next” is confusing.