1 / 54

User Experience and Interface Design for Web Apps

Learn how to create effective web app designs by focusing on user needs, business goals, and utilizing UI patterns like InfoWindow and RichMarker, along with cartography strategies. Understand the importance of user-centered design to achieve success.

micahh
Download Presentation

User Experience and Interface Design for Web Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Experience and Interface Design for Web Apps @MichaelGaigg @AL_Laframboise

  2. WhatisgoodDesign?

  3. Whichdesignisbetter? A B

  4. Whichdesignisbetter? A B End-UserNeeds BusinessNeeds

  5. Strategy:End-UserNeeds Who are our users? What are they trying to accomplish? How successful are they doing that?

  6. Strategy:BusinessNeeds Where are we now? Where do we want to go? How do we get there? How do we define success?

  7. WhatisgoodDesign? It has a Purpose => Define Strategy => Define Success

  8. KnowyourUser

  9. usinessNeeds External Users impatient demanding in a hurry in control Make/Save$ skilled trained forced Internal Users

  10. How to create Better Designs?

  11. Consider the Empty State

  12. BetterDesign

  13. Use Task-focused Workflows

  14. Utilize UI Patterns

  15. WhatareUIPatterns? Solutions to common design problems Help to avoid re-inventing the wheel Defined as Problem / Context / Solution

  16. Pattern:InfoWindow hat problem does it solve? o much information on the map. eds user interaction to disclose. http://www.designingmapinterfaces.com/patterns/info-window/

  17. Pattern:InfoWindow

  18. Pattern:InfoWindow hat's the solution? Show useful information Include contextual actions (e.g. buttons, links) Avoid displaying default column names Avoid meaningless data like ID's or Lat/Long

  19. Anti-Pattern:EmptyInfoWindow http://www.designingmapinterfaces.com/patterns/empty-info-window/

  20. Anti-Pattern:EmptyInfoWindow

  21. Pattern:RichMarker hat problem does it solve? ed to make a decision but clicking each feature to popup an oWindow is too cumbersome. http://www.designingmapinterfaces.com/patterns/rich-marker/

  22. Pattern:RichMarker hat's the solution? Show key metric or performance indicator Use when the content of the markers is important to make a decision and needs to be seen at a glance Must be related to task Result set is limited

  23. UtilizeUIPatterns http://www.designingmapinterfaces.com/ tps://www.pinterest.com/michaelgaigg/map-ui-pattern

  24. InvestinCartography

  25. SSttrratateeggyy:: EEnndd--UUsseerr NeNeeeddss Who are our users? What are they trying to accomplish? How successful are they doing that?

  26. SSttrratateeggyy:: EEnndd--UUsseerr NeNeeeddss Who are our users? What are they trying to accomplish? How successful are they doing that?

  27. Howtoimprove Cartography Follow well established domain conventions & cartographic rules Avoid simultaneous contrast and color movement Choose your colors wisely

  28. KnowyourData

  29. orbetter Know what your User knows about your Data

  30. Demo http://www.usda.gov/wps/portal/usda/usdamedia?navid=kyf-compass-map

  31. Optimize Visible layers (toggle by theme) Cartography (based on 1 select basemap) Info windows (customized to features) Data display (meaningful grid)

  32. Select the correct Layout

  33. PartialMap FullMap ReferenceMap NoMap

  34. FullMapMapisthefocusandthecorevalue

  35. Partial MapWorkflow driven

  36. WizardwithMapStep

  37. Reference MapFornavigationandreferencepurposes

  38. NoMapTaskdoesn'trequireamapbututilizespowerofGIS

  39. TogglebetweenLayouts

  40. FocusontheSubject

  41. Focusonthe Map

  42. LayoutsSummary Full Partial Reference MMapap Level of Detail Level of Control Tools Interaction high high low tomed high medtohigh nonetolow advanced in workflows none/few advanced advancedok limited Cartography veryimportant important few distractions

  43. ProvideNavigation

  44. 10% of time is spent on navigation from one point to another

  45. Unified Search Problem: Aggregate different data sources into one disambiguated set of search results. http://www.designingmapinterfaces.com/patterns/unified-search/

  46. Unified Search Solution: Provide single input field that allow searching multiple sources Indicate source or nature Show meaningful results Remove duplicates and order by relevance

More Related