Advanced and Engaging UI in Flutter software engineering principles for creating a standard UI in your application By Ali Yazdi yazdi.dev linkedin.com/in/aliyazdi75

Interrupt me if you have any questions, thanks!

References

“ There are essentially two basic approaches to design: the artistic ideal of expressing yourself and the engineering ideal of solving a problem for a customer. — Jakob Nielsen

Place the user in control Reduce the user’s memory load Make the interface consistent THE GOLDEN RULES + + +

A system that reads my mind. It knows what I want to do before I need to do it and makes it very easy for me to get it done. That’s all, just that. Place the user in control

● Define interaction modes in a way that does not force a user into unnecessary or undesired actions. An interaction mode is the current state of the interface. Place the user in control

● Provide for flexible interaction. Because different users have different interaction preferences, choices should be provided. For example, software might allow a user to interact via keyboard commands, mouse movement, a digitizer pen For example using Tab to go to the next FocusNode Place the user in control

Place the user in control

● Allow user interaction to be interruptible and undoable. Even when involved in a sequence of actions, the user should be able to interrupt the sequence to do something else Place the user in control

● Streamline interaction as skill levels advance and allow the interaction to be customized. Users often find that they perform the same sequence of interactions repeatedly. It is worthwhile to design a “macro” mechanism that enables an advanced user to customize the interface to facilitate interaction. Place the user in control

A well-designed user interface does not tax a user’s memory because the more a user has to remember, the more error-prone the interaction will be. Reduce the User’s Memory Load

● Reduce demand on short-term memory. The interface should be designed to reduce the requirement to remember past actions, inputs, and results. Reduce the User’s Memory Load

● Establish meaningful defaults. The initial set of defaults should make sense for the average user, but a user should be able to specify individual preferences. Reduce the User’s Memory Load

● The visual layout of the interface should be based on a real-world metaphor. For example, a bill payment app uses void check for auto deposit, we need a picture of void check explaining the information’s numbers to guide users through the process. This enables the user to rely on well-understood visual cues, rather than memorizing an arcane interaction sequence. Reduce the User’s Memory Load

Consistency in interface design helps users understand and navigate the interface more effectively, reduces cognitive load, and creates a more intuitive and familiar user experience. Make the Interface Consistent

Make the Interface Consistent

Make the Interface Consistent

User interface (UI) design patterns provide standardized solutions to common design problems, ensuring a consistent and user-friendly experience. User Interface Design Patterns Common Design Issues: ● Response Time. Length (too long) and Variability (a consistent 1-second response time is preferable to a response that varies from 0.1 to 2.5 seconds) ● User Help Facilities. Interactive systems should provide online help facilities to enable users to resolve issues without leaving the interface. ● Error Handling. Describe the problem in understandable terms and Provide constructive advice for recovery.

User Interface Design Patterns Application Accessibility (a[11]y) Accessibility requirements and goals are documented across component pages and guidelines. Understanding your product’s accessibility can enhance usability for all users, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments, or situational disabilities (such as a broken arm). Guidelines for accessibility include: ● Following accessibility standards (e.g., W3C guidelines). ● Ensuring high contrast for readability (Will discuss later for Material)

User Interface Design Patterns Application Accessibility ● Providing scalable fonts and screen reader support.

User Interface Design Patterns Application Accessibility ● Providing scalable fonts and screen reader support.

User Interface Design Patterns Internationalization (i[18]n) and Localization (l[10]n) Creating user interfaces for different locales and languages involves more than just translation. It requires designing “globalized” software with localization features for specific markets. Techniques used include: ● Extracting text strings from the code into resource files. ● Designing layouts that can accommodate different text lengths and directions. ● Translating text strings into the target language. ● Adapting date, time, and number formats to the target locale. ● Adjusting graphical elements to be culturally appropriate. Don’t use Padding to have a consistent ltf and rtl!

A comprehensive design system that provides guidelines for creating user interfaces that are visually appealing, consistent, and accessible. The core principles include: ● User-Centered Design: Focus on user needs and preferences. ● Consistency: Maintain uniformity in design elements and interactions across the app. ● Responsive and adaptable layouts: Adapt layouts to compact, medium, expanded, large, and extra-large window size classes that be responsive to any device such as desktop, foldable, mobile Material Design

Material Design Accessibility and Assistive Technology ● Screen Reader Support ● Color Contrast ● Scalable Fonts

Material Design Do’s and Don’ts: ● Use Labels, Semantics, and Focus Nodes ● Use SeedColor ● Consider dynamic color from user chosen color ● In case of custom colors, use tools to make sure contrast ratio is ok ● Use flexible components for Magnifiers that change size to fit their content ● Don’t hard code anything, text, color, size, style, instead first make sure your custom UIs respect the rules and then use theming and reusable components

Material Design Motion Makes a UI expressive and easy to use, It’s not only about beauty, third rule (Reduce the User’s Memory Load: The visual layout of the interface should be based on a real-world metaphor): ● Purposeful Motion: Enhances user interactions by providing feedback and maintaining continuity. ● Natural and Responsive: Motion should feel natural and responsive, mimicking real-world physics. ● Expressive and Efficient: Motion should be expressive but not distract from functionality. Don’t use motions without any purpose or to make your application more complicated!

Material Design Transition A quick animation that connects two discrete states in a UI. When implemented well, they help users understand how an app works by showing the relationship between the UI elements.

Material Design Transition Use animation package: Codelabs: https://codelabs.developers.google.com/codelabs/material-motion-flutter

Keep in mind that your users are differents Consider Golden Rules when you create UI + Use responsive and adaptive components in mind if you develop for multi-platforms Don’t hard code any texts and style Summary + + +

m3.material.io medium.yazdi.dev Want to learn more

THANK YOU! v