Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing maps interface and crafting elements in modern map applications by Suttikarn Toungtee, Jirayut Naksin, Sasitorn Chookainoo

Designing maps interface and crafting elements in modern map applications by Suttikarn Toungtee, Jirayut Naksin, Sasitorn Chookainoo

Designing maps interface and crafting elements in modern map applications
by Suttikarn Toungtee, Jirayut Naksin, Sasitorn Chookainoo

Vallaris Maps Platforms

November 30, 2023
Tweet

More Decks by Vallaris Maps Platforms

Other Decks in Design

Transcript

  1. 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

    View full-size slide

  2. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 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.

    View full-size slide

  6. 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.

    View full-size slide

  7. 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.

    View full-size slide

  8. 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.

    View full-size slide

  9. 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

    View full-size slide

  10. Map Interface Evolution
    Map Interface on Devices

    View full-size slide

  11. Map Interface Evolution
    Map Interface on Devices

    View full-size slide

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

    View full-size slide

  13. 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.

    View full-size slide

  14. 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.

    View full-size slide

  15. 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.

    View full-size slide

  16. 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.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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.

    View full-size slide

  21. 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.

    View full-size slide

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

    View full-size slide

  23. 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.

    View full-size slide

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

    View full-size slide

  25. 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.

    View full-size slide

  26. 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.

    View full-size slide

  27. 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.

    View full-size slide

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

    View full-size slide

  29. 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.

    View full-size slide

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

    View full-size slide

  31. 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.

    View full-size slide

  32. 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.

    View full-size slide

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

    View full-size slide

  34. 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.

    View full-size slide

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

    View full-size slide

  36. Tip 01
    Avoid Using Bad Color Schemes

    View full-size slide

  37. Tip 02
    Avoid Ambiguous Spacing

    View full-size slide

  38. Tip 03
    Padding

    View full-size slide

  39. Tip 04
    Border Radius

    View full-size slide

  40. Tip 05
    Pattern Repetition

    View full-size slide

  41. Tip 06
    Use Full-Width Button

    View full-size slide

  42. Tip 07
    Icon Consistency

    View full-size slide

  43. Tip 08
    Image Resolution

    View full-size slide

  44. Tip 09
    Menu Representation

    View full-size slide

  45. Tip 10
    Be Consistent with Weight

    View full-size slide

  46. Tip 11
    Search Input

    View full-size slide

  47. Tip 12
    Avoid Writing When Possible

    View full-size slide

  48. Tip 13
    Contrast

    View full-size slide

  49. Tip 14
    The Gutenberg Principle

    View full-size slide

  50. Tip 15
    Descriptive Option

    View full-size slide

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

    View full-size slide

  52. 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.

    View full-size slide

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

    View full-size slide