Designing Maps Interface and Crafting Elements in Modern Map Applications Design Team, i-bitz company limited, Thailand FOSS4G ASIA SOUL 28 Nov - 2 Dec 2023 

Content Introduction Get to know our company Our Team Introduce our team and their position in the company About User Experience (UX) Get to know about User Experience About User Interface (UI) Get to know about User Interface How dose UX/UI relate to mapping UX/UI and maps Map Interface Evolution Map design from the past to the present UX For Map Interface Design User Experience principles for map interface design UI For Map Interface Design Design system for designing map user interface UX/UI Tips for Map Interface Design Tips for designing map application UX / UI Trends Guidance UX/UI Trend 2024 for design modern maps application 01 02 03 04 05 06 07 08 09 10 Summary Conclusion Designing maps interface and Crafting elements in modern map Applications 11 

Ref: https://unsplash.com/photos/ucYWe5mzTMU Introduction i-bitz company limited, Bangkok, Thailand 

Sasitorn Chookainoo UX/UI Designer Jirayut Naksin UX/UI Designer Our Team Suttikarn Toungtee Design Team Lead 

What is User Experience (UX) Design? About UX User experience design is a key to maximize user satisfaction, such as ease of use, clear steps to interact with, making users impressed and want to use the applications again. 

What is User Interface (UI) Design? About UI A design to connect users with the system or the product. UI design focuses on graphical layout of the application such as images and buttons layout, font size, color, etc. 

How Dose UX/UI Relate to Mapping ? UX/UI and Map Designing UX/UI is importance for creating web map applications with closely related to cartography. Combination of elegant, appropriate mapping and good user experience and user interface design will make web map applications user-friendly, moreover, it can fulfill user needs which is the main point of UX/UI. 

X 8 Map Interface Evolution Map Interface Design from the Past to the Present Map application development has been continuously evolving due to technological advancements and changing in user requirements. In the past, map application development has focused more on functionality than aesthetics and user experience. 

9 Currently, web map application design focuses on style, usability and good user experience. Whether it's the placement, colors, typography, icons, symbols they must be consistent across with the map and the interface. Map Interface Evolution Map Interface Design from the Past to the Present 

Map Interface Evolution Map Interface on Devices 

Map Interface Evolution Map Interface on Devices 

User Experience For Map Interface Design Principles and Design of Map Interface by UX/UI Designer. 

10 Usability Heuristics for User Experience Design 01 Visibility of System Status Always tell users what is happening ? Where are they? what are they doing ? 02 Match between System and The Real World Designed to meet user expectations and what they are use to. 03 User Control and Freedom Easily to undo and edit when error occur without going through many steps. 04 Consistency and Standard The design should be consistent and have the same pattern. 05 Error Prevention Designed to minimize errors. 06 Recognition Rather than Recall Designed that make users know what they see, what they want, and how to make decisions. 07 Flexibility and Efficiency of Use There are helpers and shortcuts so users can choose any method. 08 Aesthetics and Minimalist of Design There should be no extraneous or unnecessary information for the user. 09 Help and Documentation There are a user's manual and documentation to help user. 10 Help Users Recognize, Diagnose, and Recover From Errors Show error message when have problem and recommend how to solve that. 

01 Visibility of System Status Heuristics The design should always keep users informed about what is going on, what they are doing and where they are. Like displaying the active action on a button or text so that make user knows what command they are using. 

02 Match between System and The Real World Heuristics The design should use words, phrases, and concepts that match the user's familiarity to make it easy for user to learn and remember. 

03 User Control and Freedom Heuristics The design should clearly marked "emergency exit" , like Back or Undo button, to leave the unwanted action without having to go through complicated steps. When it's easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence and also allow users to remain in control of the system. 

04 Consistency and Standard Heuristics The design should meet international standards and be consistent in the same direction. 

05 Error Prevention Heuristics The design should always prevent errors to minimize errors for the user. 

06 Recognition Rather than Recall Heuristics The design should help users easily imagine what they see, what they want, and make decisions easily. 

07 Flexibility and Efficiency of Use Heuristics Should be designed to have helping tools and shortcuts for users, such as having instructions for new users and a skip button for experienced users. 

08 Aesthetics and Minimalist of Design Heuristics The design should avoid placing irrelevant information to prevent confusion and enable users to achieve their goals of using the application well. 

09 Help and Documentation Heuristics The design should always have a help system and documentation to help users understand how to complete their tasks. 

10 Help Users Recognize, Diagnose, and Recover From Errors Heuristics When an error occurs, the design should provide notifications and clearly indicate problems and recommend ways to fix it. 

User Interface For Map Interface Design Principles and Design of Map Interface by UX/UI Designer. 

Design System Determination Designing Map Interface A design system is a collection of reusable UI components. One of the major benefits of a design system is consistency. Design system has things like colors, typography, spacing and other items clearly defined to ensure consistency across the user interface. It also makes the design workflow smoother and faster. 

26 Color Designing Map Interface Colors are very powerful when used correctly and can make the user experience more pleasurable. Designing colors in the map interface requires thinking about the colors of the map and the way that map is displayed which leads to consistency in the same direction, attractiveness and ease to use. 

27 Typography Designing Map Interface One of the most important point of design system is typography. You have to get a handle on as it will need to work smoothly with other elements like icons and UI controls. Your line-heights may even influence many other structural elements like spacing and grids. 

28 Space Designing Map Interface Spacing makes the interface proportional, easy to use, and pleasing to the eyes, enhance a good user experience. 

29 Grid System Designing Map Interface Grid system is a structure consisting of vertical lines and horizontal lines combined which help to arrange the elements in the designs to be continuous and balance. The grid system will help designers work more easily and quickly. 

30 Iconography Designing Map Interface Icons are visual representations of commands, devices, directories, or common actions. 

31 Layout Designing Map Interface Layout is the arrangement of the structure and priorities of data in the user interface. In mapping interface design, there are various layouts, depending on the purpose of use and the display of information on that page. 

32 Component Map interface design Component is an element within a user interface. Examples of UI components include buttons, forms, menus, navigation bars, and modals. These UI components can be combined and arranged in various ways to create the overall layout and design of the user interface. 

Map Component Basic It is a basic component used in map application. Focusing on clean, easy to use, understandable and emphasizing fast display. 

Map Component Advance It is a component that consists of more diverse elements for applications that perform multi functions like processing and displaying a complex format data. 

UX/UI Tips for Map Interface Design UX / UI Tips 

Tip 01 Avoid Using Bad Color Schemes 

Tip 02 Avoid Ambiguous Spacing 

Tip 03 Padding 

Tip 04 Border Radius 

Tip 05 Pattern Repetition 

Tip 06 Use Full-Width Button 

Tip 07 Icon Consistency 

Tip 08 Image Resolution 

Tip 09 Menu Representation 

Tip 10 Be Consistent with Weight 

Tip 11 Search Input 

Tip 12 Avoid Writing When Possible 

Tip 13 Contrast 

Tip 14 The Gutenberg Principle 

Tip 15 Descriptive Option 

UX /UI Trend Guidance UX / UI Trend 2024 for Crafting Elements in Modern Map Application 

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

Summary Designing a contemporary map interface must be keeping up with current trends and applying UX/UI design principles. This is essential for developing a platform or application in the field of mapping that needs to effectively presents information, enable user interaction, facilitate various devices, align with user requirements, and provide user a positive and aesthetically pleasing experience, in accordance with modern standards. 

Ref: https://unsplash.com/photos/ucYWe5mzTMU Thank You for Your Attention