Usability Guidelines
In line with the Digital Transformation vision for Dubai Government, the Digital City Experience (DCX) Usability Guidelines aim to unify and enhance customer experiences during digital service usage. The guidelines focus on optimizing customer interactions by understanding user needs and employing effective design practices. This approach not only improves service efficiency and reduces costs but also boosts customer satisfaction and drives digital economic growth. By following these guidelines, stakeholders can achieve improved quality of life and enhanced service value throughout the city.
Mandatory
U.01 Information Architecture
Provide intuitive, predictable, well-structured, self-explanatory, and consistent navigation.
Intuitive and Predictable Navigation
Design for ease of use with predictable pathways and minimal clicks.
Hierarchical Information Delivery
Sort information from most to least relevant for quick access.
Clear Identification of Functions
Ensure functionalities are easily identifiable and accessible within a few steps.
Consistent Navigation Menu
Maintain consistent navigation menu placement and include a dynamic, easily accessible sitemap.
Prominent Feature Links
Display main feature links on the homepage for at-a-glance functionality overview; provide clear secondary links on inner pages.
Descriptive Titles and Links
Use clear, descriptive titles and links for content and navigational elements.
Navigation Convenience
Optimize navigation for varying screen sizes with essential navigational buttons like ‘back’ and ‘home’.
Card-Sorting Design Method
Implement card-sorting to ensure intuitive user navigation structure.
Regular IA Testing and Optimization
Conduct tree testing to validate user experience and incorporate regular IA optimizations into operational processes.
Effective Browser Navigation Handling
Ensure robust handling of browser 'back' button without disrupting the user experience.
U.02 Consistency
Ensure design patterns/layouts are consistent across all digital channels and a channel’s pages.
Uniform Design Across Channels
Maintain consistent design patterns and layouts across web, email, mobile apps, kiosks, and other channels.
Coordinated Channel Interactions
Ensure that interactions across different channels are harmonized to create a cohesive customer experience.
Benefits of Design Consistency
Familiarity: Builds user confidence through predictable interactions.
Learnability: Enhances user ability to learn the system when using various channels.
Efficiency: Allows users to perform tasks more quickly and efficiently.
Trust: Consistent experiences build trust and credibility with users.
Major and Minor Inconsistencies
Major: Address inconsistencies in layout, color, font, step order, terminology, icons, and interaction patterns.
Minor: Tackle variations in sub-layout, color tones, font emphasis, capitalization, icon size, alignment, grammar, and spelling.
U.06 Clear Labels
Ensure user interface (UI) elements indicate clear and unambiguous functionality and meaning.
Conventional Icons
Utilize logical and widely recognized icons instead of text where suitable. Icons should be clear and self-explanatory.
Adequate Spacing
Keep enough space between buttons, icons, and links to prevent errors and improve usability. Conduct regular user testing to assess spacing effectiveness.
Clear Action Affordance
Clearly label interactive elements like buttons and links for easy interaction on touchscreens. Eliminate gesture ambiguities that cause inconsistent actions.
Consistency and Conventional Interactions
Follow standard UI conventions and interaction patterns to reduce the learning curve. Implement platform-specific standards:
Design according to OS-native interface principles, maintaining core functionalities.
U.07 Alerts
Provide clear methods for alerts that require customer attention or display important information.
Critical Information
Ensure alerts convey crucial details with clear, actionable options.
Clarity and Brevity
Keep alerts brief and straightforward, explaining the reason and suggested actions, with clearly marked buttons.
Minimize Disruption
Issue notifications that are concise and non-disruptive, easy to act on or dismiss.
Non-intrusive Feedback
Provide essential feedback on-screen without hindering ongoing user activities.
Notification Management
Update and clear badges and status notifications only after the user has responded to them.
Progress Indicators
Display clear progress alerts, like "Processing XX%", to inform users.
Avoid Jargon
Use simple language in alerts to ensure understanding across all user levels.
Restrict Pop-ups
Limit pop-up use to essential instances due to general poor reception and browser blocks.
Visibility of Alerts
Position alerts to remain visible beyond the scroll on lengthy forms to ensure they are seen.
Error Recovery
Handle errors smoothly, offering clear recovery options without blocking user progress.
Confirmations
Confirm actions like registrations and payments with a digital notification.
U.10 Horizontal Scrolling
Avoid horizontal scrolling in default screen size.
Avoid Horizontal Scrolling
Design the UI to eliminate horizontal scrolling in the default screen size.
Enable Vertical Scrolling
Support vertical scrolling with clear navigation cues such as visible scroll bars, signs for vertical movement, or prominently marked buttons.
U.21 Upload Limits
Allow reasonable limits on file and image uploads.
Reasonable Upload Limits
Set and regularly test practical file size and dimension limits to match common user needs.
User-Friendly Compression Tools
Include compression and preview tools to simplify uploads without manual adjustments, suitable for all users.
Post-Upload Optimization
Automatically adjust uploaded files on the server, allowing users to review and modify if necessary.
Maintain Aspect Ratio
Preserve the original aspect ratio of images to prevent distortion.
Accessibility and Inclusivity
Ensure upload features are accessible and functional for all users.
Continuous User Testing
Regularly validate the upload process with real users to ensure it meets their needs.
U.22 Pop-ups
Minimize Pop-Up Use.
Minimize Pop-Up Use
Avoid pop-ups, which typically worsen user
experience, particularly on mobile devices.
Employ pop-ups solely when indispensable and no alternative interactions are available.
Remember that many browsers and user settings automatically block pop-ups, affecting functionality and engagement.
Recommended
U.03 Visibility
Ensure visibility of a digital service’s status and system behavior.
Enhance System Visibility
Make the digital service’s status and behaviors clearly visible to improve usability.
Match system visibility with user expectations to aid understanding during interaction.
Consistently display dynamic updates and process statuses, like the full status of a visa application post-submission.
Ensure this visibility reassures users that their actions are recognized, boosting confidence and satisfaction.
U.04 Wayfinding
Provide UI elements to help wayfinding within the system.
Optimizing Form Usability:
Facilitate User Orientation
Help users know their location within the system conceptually and statically, such as within a site map.
Use clear UI elements to indicate current and next steps in processes like applications or registrations.
Display local indicators, such as step markers ("Step 1 of 5"), to show progress in tasks.
Utilize global navigation aids like breadcrumbs to clarify the user's position within the site structure and facilitate easy navigation to previous sections.
U.05 Forms
Obtain service requisite information through simple and easy-to-use mechanisms.
Pre-fetch Customer Data
Auto-fill forms with existing data (e.g., name, address) to reduce manual entry.
Default Values
Use defaults based on last selections or common choices (e.g., today's date for date fields).
Pre-defined Selections
Include dropdowns and pre-defined inputs to lessen manual entry.
Mandatory Data
Mark essential fields clearly with symbols (e.g., '*') to streamline submissions and prevent errors.
Real-Time Validation
Display errors as users type to address issues before form submission, highlighting errors clearly.
Error Handling
Retain valid data upon submission errors, and highlight incorrect fields without forcing a form restart.
Clear Format Specifications
Clearly state required formats next to fields (e.g., DD-MM-YY for dates) with examples.
Units and Data Types
Specify units clearly (e.g., USD for currency; meters for length) next to numerical entries.
Assistive Technologies
Use technologies like auto-completion and spellcheck appropriately, disabling auto-corrections where they may cause errors.
Flexibility with Characters
Support various character inputs (e.g., dashes in names) and provide alternatives as needed.
Alternate Input Mechanisms
Utilize device features for alternative inputs like voice or camera where suitable.
Specialized Keyboards
Provide context-specific keyboards on mobile devices (e.g., with "@" for email fields).
Location Integration
Employ maps for inputs requiring geographic data.
Manage Form Length
Keep forms short or break lengthy forms into sections to reduce user fatigue and improve clarity.
U.11 Animations
Avoid excessive and lengthy animations that do not help in completing tasks efficiently.
Minimize Use of Animations:
Limit Animations
Restrict animations to those that directly aid task completion or enhance interaction, ensuring they do not cause delays.
Duration
Keep necessary animations brief, not exceeding 3 seconds to preserve efficiency.
Functional Priority
Emphasize functional over aesthetic elements, especially in government services focused on task efficiency.
Control Repetition
Avoid repeating animations or splash screens that fail to add ongoing value, as they can delay user tasks unnecessarily.
U.12 Recognition & Recall
Allow users to recognize options rather than having to recall them.
Design for Recognition
Restrict animations to those that directly aid task completion or enhance interaction, ensuring they do not cause delays.
Limit Icon Use
Keep necessary animations brief, not exceeding 3 seconds to preserve efficiency.
Clear Labeling
Emphasize functional over aesthetic elements, especially in government services focused on task efficiency.
Device Compatibility
Avoid repeating animations or splash screens that fail to add ongoing value, as they can delay user tasks unnecessarily.
User Testing
Conduct regular tests with users to balance icons and text effectively, ensuring UI meets diverse user needs and preferences.
U.13 Less is More
Remove unnecessary visual/text elements from the UI.
Streamline UI Complexity:
Evaluate Elements
Understand that each visual and textual component can increase UI complexity, impacting usability.
Utilize Design Aids
Strategically use design elements like colors and boxes to enhance organization and comprehension.
Employ Simplification Techniques
Apply proximity and alignment to create clear groupings and delineations without extra graphics.
Perform Reduction Tests
Regularly remove and assess UI elements to ensure essential clarity and functionality remain. Discard unnecessary decorations like excessive text styling and extra borders.
U.14 Context-Aware
Provide context-aware omni-channel user experience.
Utilize Mobile Features
Leverage mobile device features to support user context, adapting to the variable environments in which they operate.
Adapt to Time-Sensitive Contexts
Modify service elements according to the time of day or user activity, such as disabling unavailable customer support options.
Enhance Visual Experience
Switch UI themes (e.g., day to night mode in mapping apps) to improve visibility and reduce glare during different times.
Utilize Location Information
Use real-time location data to display relevant information like nearby facilities or service operational hours.
Dynamic Content Presentation
Show dynamic elements (e.g., a moving 'blue dot' on maps or real-time balances) to create a lively user experience.
Validate Device Features
Ensure accuracy and reliability in the use of device capabilities to maintain high-quality service.
Encourage Government Adoption
Advocate for government entities to adopt and integrate context-aware features to enhance practicality and benefit user experience.
U.15 Defaults
Deliberately set default settings and options to serve the user.
Strategic Use
Implement default settings to simplify user choices, selecting common or recommended options to streamline experiences.
Transparency
Clearly indicate default settings so users understand the choices made on their behalf. Ensure defaults are visibly marked and easy to change.
User Control
Enable users to easily modify or opt out of default settings, ensuring the process is simple to maintain user autonomy.
Contextual Appropriateness
Align defaults with user context and needs. For instance, auto-recharge features should be convenient but also transparent about their operation.
U.16 Target Size
Provide UI targets at an appropriate size for interaction.
Design Principles
Size interactive elements like buttons according to Fitts' Law, ensuring they are large enough for easy and fast interaction.
Minimize Inconvenience
Ensure targets are sufficiently large for easy activation, especially on mobile devices, to reduce frustration and errors.
Usability Testing
Regularly perform usability tests on target sizes to ensure they meet user needs and detect any issues that could impact usability.
Adherence to Standards
Follow established UI sizing standards to enhance accessibility:
W3C Guidelines on Understanding Target Size: These guidelines serve as a benchmark for ensuring that interactive elements are easily clickable, touchable, and accessible to all users, including those with disabilities.
Minimum Target Size (Level AA): The minimum size for clickable elements should be 24 pixels. This size ensures that users can interact with elements comfortably without the risk of errors, particularly on touchscreen devices where precision is critical.
Continual Evaluation
Consistently review and modify target sizes based on user feedback and changes in interface standards to maintain high usability across devices.
U.17 Text as Image
Avoid the use of text as images, allowing users to use their text flow options.
Avoid Text as Images
Refrain from embedding text in images, which restricts users from adjusting text settings like size and font, impairing readability and accessibility.
Enhance User Control
Provide text in adaptable formats that users can customize to their viewing preferences, improving accessibility.
Support User Interaction
Ensure that text is selectable and can be easily copied, allowing users to transfer information to other applications without hindrance.
Fluid Design Principles
Utilize fluid design to allow text to reflow based on screen size and orientation, enhancing usability especially on mobile devices with limited screen space.
Separate Text from Images
Maintain a clear distinction between decorative images and text to ensure content clarity and readability, ensuring text remains easily accessible and does not blend into background imagery.
U.18 Progressive Disclosure
Reveal UI functionality progressively.
Adopt Strategic Disclosure
Use a design strategy that gradually reveals UI functionality to avoid overwhelming users initially. Display the most commonly used features prominently, with options like "show more" to access additional functionalities.
Prioritize Common Functions
Analyze user interactions to identify frequently used functionalities and prioritize these in the UI layout, enhancing usability and accessibility.
Minimize Visual Clutter
Reduce clutter by concealing less commonly used features initially, maintaining a clean and focused interface that emphasizes primary user tasks.
Ensure Full Accessibility
Maintain accessibility of all functionalities through progressive disclosure, providing intuitive mechanisms for users to find and use hidden features as needed.
User-Centric Design
Regularly reassess and adapt the display of functionalities based on user feedback and behavior, ensuring the interface stays relevant and user-friendly.
U.19 Paragraph Readability
Ensure short horizontal lines of text for easier readability.
Optimize Line Length
Maintain short horizontal lines of text, ideally 50-75 characters per line, to reduce cognitive strain and enhance readability.
Use Column Formatting
Arrange text in narrower columns, mirroring newspaper and magazine layouts, to decrease eye strain and improve line tracking.
Maintain Comfortable Reading Experience
Design text columns and line spacing to ensure a comfortable reading experience, utilizing adequate white space between columns for clear separation.
Adaptive Text Layout
Apply responsive design principles to ensure text layout adjusts effectively across different devices, maintaining a consistent and accessible reading experience on desktops, tablets, and mobiles.
Test and Iterate
Continuously test text layouts with real users, collecting feedback on readability and comfort to refine and optimize text presentations for a diverse audience.
U.20 Conventions
Follow conventions and user expectations, ensuring novelties add significant value.
Follow Established Conventions
Use familiar UI patterns, like the hamburger menu for navigation, to ensure ease of use.
Intuitive Placement of Functions
Keep commonly used functions like language switches in expected places to prevent confusion and enhance efficiency.
Innovate Responsibly
Ensure that innovations improve user experience without sacrificing usability. Innovations should be clearly advantageous and easily understandable.
Test Innovations Thoroughly
Conduct detailed usability testing for new design elements to verify their effectiveness and user acceptance.
Gather Detailed Feedback
Utilize methods like eye-tracking to analyze user interactions with new designs, ensuring they are intuitive.
Validate Innovations
Make sure innovations add substantial value and address specific user needs or problems.
Document Outcomes
Keep precise records of feedback and testing outcomes to inform future design choices and confirm the value of innovations.
Last updated