Address

An address pattern refers to a standardized format or template for collecting or displaying address information. This pattern ensures consistency and clarity, helping to avoid confusion or misinterpretation of location details.

By adhering to a unified structure, government etities, businesses, delivery services, and other entities can efficiently process, sort, and utilize address data.

A unified address pattern facilitates seamless communication and operations across various sectors.

The address pattern

The pattern is defined by understanding the geography of the United Arab Emirates and how locations are classified. For a better user experience:

  • Use a select box or a dropdown to select the Emirate and city.
  • On selection of an Emirate, autoload content for the city and area. Also, make sure that the default city is selected.
  • If the user selects a different city, autoload the details about the area within that city.

Within the country

The following is a pattern to apply when you need the user to enter their address within the United Arab Emirates. Since the address being asked is within the country, there is no need for a user to select a country.

Outside the country

The following is a pattern to apply when you need the user to enter their address which is based outside the country. A federal government entity may have a service that is applicable to an audience that is currently based outside the country.

Additional data

  • The Emirates of Dubai, Ajman, Fujairah, Ras Al Khaimah, and Umm Al Quwain have implemented Makani - the official geographic addressing system in the emirates. You may add this as an additional field, making sure it is not mandatory.
  • You may add an additional field (text input or a dropdown) for the user to mark if the address is their primary address, secondary address, home, office or others.
  • While collecting data from the user about their address, you may optionally add a map for a user to add their exact location. This may have an accessibility impact, hence it must not be the first choice.

Why did we ask for Emirates and City first?

Best practice for user experience and research conducted suggests that when you auto load content into a select box, it is always suitable to load the broadest information first, and accept data from a user first that causes a change on a form.

For example, when you ask the user to select an ' Emirate ', it will essentially cause the value of ' City ' and ' Area ' to change dynamically. Similarly, when a user selects the value for a ' City ', the options in ' Area ' would dynamically change.

Hence, selection of data that causes an affect must always flow downwards in order.

Assume - if you had placed the order of the fields as ' Area ', ' City ' and then ' Emirates '. In this case, if a user filling the form using their keyboard alone was to go through it, they would need to select a value for ' Area ' first. However since the value is dependent on the selection of a ' City ', the user would have to skip this field, and come back to it after the other fields are filled in.

It is, therefore, recommended to use the pattern as suggested only when :

  • You are accepting data of a user's address which is based within the country.
  • There is dynamic data loaded into select boxes based on the user selection of another value.

Displaying an address card

706, The Metropolitan Tower B
Marasi Dr., Business Bay
P.O.box : 123456
Dubai, Dubai

Usage

Here are common use cases where asking for an address from a user would be useful.

  • On the profile page of a user, where a user may add multiple addresses.
  • On the profile of a company.
  • Within the service workflow (if required).
  • If a certain additional step requires a user to enter an address other than what is listed on their profile.
  • When a user needs to add the address of a location that does not belong to them.

Previous
Patterns
Next
Name
Sign up for our newsletter
Receive the latest updates from the UAE Design System
TDRA empowers youth for a sustainable future
What's new
Sustainable by design

Sustainable web design is the practice of designing and developing websites that have a low environmental impact.

Read More