Differences between revisions 1 and 2468 (spanning 2467 versions)
Revision 1 as of 2010-12-01 23:35:42
Size: 109
Editor: shoobe01
Comment:
Revision 2468 as of 2011-03-20 02:58:45
Size: 5253
Editor: eberkman
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
 * [[Ordered Data]]
 * [[Tooltips]]
 * [[Avatar]]
 * [[Wait Indicators]]
 * [[Reload, Refresh, Stop]]
#acl EditorGroup:read,write,revert All:read

== Down Under and Backwards ==
Having recently moved to Australia from the US, I’ve been encountering many cultural differences that I have been forced to quickly adapt to. Not all have been so easy to grasp. Here’s just a few:

=== Phone numbers ===
The Australian Communications and Media Authority, who maintains and administers the telephone numbering plan, established a Full National Number (FNN) that is made up of 10 numbers - 0x xxxx-xxxx. The first two digits are the area code, the next four generally make up the Call Collection Area and Exchange. The last four numbers define the line number at the exchange.

Mobile numbers also have 10 digits but follow a different structure. 04yy yxx-xxx. Originally, the y digits indicated the network carrier. But now that Australia allows for Wireless Number Portability (WLNP), like the US, there is not a fixed relationship between these numbers and the mobile carrier.
So giving my new mobile number out to people was bit confusing. I was always following the landline format xx xxxx-xxxx and getting a few confused looks.

=== Gas Types and Pricing ===
So much to choose from, and so little knowledge! There’s E85, ULP (Unleaded) E10 (ULP + 10% ethanol), PULP (Premium), UPULP (Ultra Premium), Diesel, and LPG (Liquefied Petroleum Gas). Unlike the States, who sells per gallon, Australia sells it by the liter and is priced in cents. A typical petrol price of ULP may be 135.9. Having a US pricing format embedded in my head, I was shocked at first to think that gasoline was $135 per liter, though my sense quickly rationalize this was a wrong deduction.

=== Date Formatting ===
My first experience to this confusion occurred when I was applying for both my Visa and overseas health insurance and had to enter my date of birth. The visa application was clear in the format I had to enter: day/month/year. The insurance form was not. It was a paper form with blank squares for each separate character:

The empty boxes had no label under them. Just: ☐☐-☐☐-☐☐☐.

In Australia, this format is a culturally understood. However, for me, it’s quite unclear. Do I enter my month or day first? Each of those fit within the constraints of provided format. Yet each clearly yields an entirely different result.

== Understanding our users ==
As designers, we can limit these confusions by designing better UIs. We must consider who are users are and the type of prior knowledge they have, as well as the context in which the device will be used.

=== Users and their prior knowledge ===
Mobile users come from a variety of cultures with a multitude of experiences and expectations. If the devices’ UI cannot meet these users expectations, their experiences will quickly turn into frustrations. If our users are unfamiliar with the interface, will they need displayed assistance? If they are experienced, can they have the ability to customize and streamline the UI for their particular needs?

We can find answers to these questions by identifying the stakeholders early in the design process. Use methods of observation, interviews, personas and storyboards to gain insight into their needs, motivations and experiences. Refer to this collected rich data to validate and guide your design decisions throughout the design process.

=== Context of use ===
Unlike desktop, mobile users will use the device anywhere and anytime. These users may be sending an email while walking down the street, snapping photos during a design GUI jam, or lying in bed reading playing a game.

In all of these places, external stimuli are forever changing and appearing which affect the amount of attention focused on the task at hand: lighting conditions, external noise, body movements. Consider the effects of how bright sunlight on a glossy screen limits our ability to distinguish details, colors and character legibility. Or when the device is shaking up and down in the hands of the user as they walk down the street, selecting and element on the screen becomes prone to error.
These external stimuli are not always controllable, but the device’s UI can at least be designed to limit their affects on the user experience.


== Patterns for Labels & Indicators ==
Using appropriate and consistent Label & Indicator widgets will provide an alternative way to present and manipulate content hierarchically. Within this chapter, the following patterns will be discussed, based on how the human mind organizes and navigates information:


 * [[Ordered Data]] Presents textual information in the most appropriate and recognizable format for the context and viewer while considering user expectations, norms, and display size constraints.
 * [[Tooltip]] A small label, descriptor or additional piece of information is displayed to further explain a piece of content, a component or a control.
 * [[Avatar]] An iconic image or profile used to represent or support the label for an individual.
 * [[Wait Indicator]] An indicator used to inform the delay status of a loading component.
 * [[Reload, Synch, Stop]] Provides the user override options to a component’s current loading status.

Down Under and Backwards

Having recently moved to Australia from the US, I’ve been encountering many cultural differences that I have been forced to quickly adapt to. Not all have been so easy to grasp. Here’s just a few:

Phone numbers

The Australian Communications and Media Authority, who maintains and administers the telephone numbering plan, established a Full National Number (FNN) that is made up of 10 numbers - 0x xxxx-xxxx. The first two digits are the area code, the next four generally make up the Call Collection Area and Exchange. The last four numbers define the line number at the exchange.

Mobile numbers also have 10 digits but follow a different structure. 04yy yxx-xxx. Originally, the y digits indicated the network carrier. But now that Australia allows for Wireless Number Portability (WLNP), like the US, there is not a fixed relationship between these numbers and the mobile carrier. So giving my new mobile number out to people was bit confusing. I was always following the landline format xx xxxx-xxxx and getting a few confused looks.

Gas Types and Pricing

So much to choose from, and so little knowledge! There’s E85, ULP (Unleaded) E10 (ULP + 10% ethanol), PULP (Premium), UPULP (Ultra Premium), Diesel, and LPG (Liquefied Petroleum Gas). Unlike the States, who sells per gallon, Australia sells it by the liter and is priced in cents. A typical petrol price of ULP may be 135.9. Having a US pricing format embedded in my head, I was shocked at first to think that gasoline was $135 per liter, though my sense quickly rationalize this was a wrong deduction.

Date Formatting

My first experience to this confusion occurred when I was applying for both my Visa and overseas health insurance and had to enter my date of birth. The visa application was clear in the format I had to enter: day/month/year. The insurance form was not. It was a paper form with blank squares for each separate character:

The empty boxes had no label under them. Just: ☐☐-☐☐-☐☐☐.

In Australia, this format is a culturally understood. However, for me, it’s quite unclear. Do I enter my month or day first? Each of those fit within the constraints of provided format. Yet each clearly yields an entirely different result.

Understanding our users

As designers, we can limit these confusions by designing better UIs. We must consider who are users are and the type of prior knowledge they have, as well as the context in which the device will be used.

Users and their prior knowledge

Mobile users come from a variety of cultures with a multitude of experiences and expectations. If the devices’ UI cannot meet these users expectations, their experiences will quickly turn into frustrations. If our users are unfamiliar with the interface, will they need displayed assistance? If they are experienced, can they have the ability to customize and streamline the UI for their particular needs?

We can find answers to these questions by identifying the stakeholders early in the design process. Use methods of observation, interviews, personas and storyboards to gain insight into their needs, motivations and experiences. Refer to this collected rich data to validate and guide your design decisions throughout the design process.

Context of use

Unlike desktop, mobile users will use the device anywhere and anytime. These users may be sending an email while walking down the street, snapping photos during a design GUI jam, or lying in bed reading playing a game.

In all of these places, external stimuli are forever changing and appearing which affect the amount of attention focused on the task at hand: lighting conditions, external noise, body movements. Consider the effects of how bright sunlight on a glossy screen limits our ability to distinguish details, colors and character legibility. Or when the device is shaking up and down in the hands of the user as they walk down the street, selecting and element on the screen becomes prone to error. These external stimuli are not always controllable, but the device’s UI can at least be designed to limit their affects on the user experience.

Patterns for Labels & Indicators

Using appropriate and consistent Label & Indicator widgets will provide an alternative way to present and manipulate content hierarchically. Within this chapter, the following patterns will be discussed, based on how the human mind organizes and navigates information:

  • Ordered Data Presents textual information in the most appropriate and recognizable format for the context and viewer while considering user expectations, norms, and display size constraints.

  • Tooltip A small label, descriptor or additional piece of information is displayed to further explain a piece of content, a component or a control.

  • Avatar An iconic image or profile used to represent or support the label for an individual.

  • Wait Indicator An indicator used to inform the delay status of a loading component.

  • Reload, Synch, Stop Provides the user override options to a component’s current loading status.

Labels and Indicators (last edited 2011-12-13 16:48:09 by shoobe01)