SATURN 2018 - How do SOFTWARE ARCHITECTS find the way to USER EXPERIENCE? With Google Maps!

A successful software system requires both, a strong software architecture and a great user experience (UX). Although being a quality attribute, UX is surprisingly often neglected by software architects. The characters of people working as UX designers and software architects are often very different, as well as their educational background. Thus, they often don’t understand each other very well and also avoid overly busy communication. This further results in lack of respect for the others’ profession and contribution to the overall success of a software system.

With the example of Google Maps, we show many architectural decisions necessary to achieve an excellent UX, as it is expected from Google: Google-like simplicity, a large number of powerful features, and Google-like integration of all kind of helpful services. We take our audience on a journey through features of Google Maps and always put on question, how they might be realized in Google’s architecture. Among those architecture decisions are also such ones that many architects would not even consider as architecture decisions. We talk about features like seamless panning and zooming, different information overlays and street view, route calculation, or integration with flight-booking systems. We cover architectural concepts like data structures for different level of details, loading data in tiles, global distribution of data centers and data delivery (content delivery networks), optimized data structures and calculations for live changes of routes, …. The journey through Google Maps is explained in episodes with many screenshots to be well understood. Each episode is accompanied with lessons learned about the relationship between architecture and user experience and how architects and user experience designers should collaborate.

We aim at increasing the mutual understanding between architects and user experience designers. To motivate both sides we use many examples from a well-known system, Google maps. By providing concrete guidelines and best practices we encourage concrete and intensified collaboration in order to build excellent software systems.

Transcript

1. How do SOFTWARE ARCHITECTS find the way to USER EXPERIENCE ? With Google Maps ! Marcus Trapp Matthias Naab
2. The following Images were taken from Apple‘s „Get a Mac“ Ad Campaign. © Apple Inc. https://en.wikipedia.org/wiki/Get_a_Mac
48. Visual Layers Vector-Based Map
53. Load on Demand Tile-Based Load
59. Visual Layers Information Density
61. Browser-Based Software
67.  Don’t Copy the Old World  Go for Great UX  Integrated Architecture Decisions
78. Limited Zoom Depth Make vs. Buy
85. Progressive Load Preprocessed Images Tile-Based Load Parallelized Load Visual Layers
86.  A lot of architectural work to enable great UX
87. # Server Requests?
88. Data Acquisition
94. Relevance-Driven Depth
98. Combination of Data Sources and Capturing Times
108. Different Capturing Times at Different Zoom Levels
109.  Great UX ≠ Perfection  Tradeoffs: UX, other Qualities, Time, Budget
110. http://www.gpsbusinessnews.com/Google-Maps-1-Billion-Monthly-Users_a4964.html Same UX for Millions of Concurrent Global Users
111. Use Scalable Google Data Infrastructure (Filesystem, Processing, CDN, …) Content Preprocessing
112.  UX strongly needs performance and scalability  Performance and scalability need strong architecture  UX is a lot about: “the right data at the right point in time at the right place”
120. Create Own Images New Image Lifecycle (Capturing, Processing, Storage, Delivery)
130. Multiplication of Data: Historic Snapshots
131.  Think Differently  Create New Technologies  Economic Reasoning  Supportive Systems
138. Additional Map Data (Speed Limits, Directions, One-Way Streets, …) Route Calculation: Server
140. Internationalization (Labeling, Fonts, Units, …)
146. Performance Optimization (Preprocessing)
150. Native Mobile Apps (iOS & Android) Use Sensor Data (GPS, Gyro)
153. Tradeoff: Performance vs. Accuracy
155. Offline Mode
158. Data Caching Data Download (Details) Space Limitation (1,5 GB) Time Limitation (30 Days) Route Calculation: Client
159.  UX has many Facets (Interaction Concepts, Features, Performance, Internationalization, Offline Capability, …)  Availability of new Technologies: Impact on UX and Architecture (Mobile, Touch Control, GPS Sensors, Gyroscope Sensors, …)  Selection of Adequate Facets: Consistent Cross-Platform UX
162. Dynamic Data (High Change Frequency, Continuous Data Stream, Huge Number of Data Sources) Impact on Route Calculation (Preprocessing, more Data) Visual Layers
163.  High Investment to Increase UX  IoT Application to Increase UX  Synergy with other Products: GPS Positions from Android  Crowd (Waze App)
169. Data Integration (Static and Dynamic Data, Usage and Provision of APIs) Impact on Route Calculation (Preprocessing, more Data) UI Integration
170.  Ecosystem (Domains, Partners, Systems, Business Models)  Integrated UX & Architecture across Ecosystem
171. ARCHITEKTUR DES CARUSO-ÖKOSYSTEMS TELEMATIK, DATEN UND MARKTPLATZ DIGITAL INS ROLLEN GEBRACHT MATTHIAS NAAB (FRAUNHOFER IESE) JENS KNODEL (CARUSO DATAPLACE)
172. Perspective on UX Diversity of Architecture Decisions Importance of Data for UX Explaining Architectural Consequences Communicate & Collaborate! No One is First or More Important! Aim at Great UX and Great Architecture! Perspective on Architecture UX can be Costly and Complex to Achieve Tradeoffs with Time / Budget Small Changes can have High Architectural Impact Remove Barriers! Make Deliberate Tradeoffs!
173. Bringing the people together … Where do we start? Will this cost a lot? Who is involved? Can we do this agile? Won’t this slow us down?
174. Bringing the people together …  … technically  … personally  … physically  … temporally
175. Bringing the people together … technically  Feel the others’ pain  Understand the role of data  Select UI technologies together  Mark UX concepts with architectural impact  Establish basic mutual understanding
176. Bringing the people together … personally  Accept that the others are different  Accept that being different is needed  Avoid a “not my job” mentality  Teach people this mindset  People need to WANT it  Management needs to SUPPORT it  Some will LOVE it, some will HATE it
177. Bringing the people together … physically  Do work actually together  Sit next to each other  Talk to each other often
178. Bringing the people together … temporally  Guide and inspire teams  Don’t expect a mixed team to be enough  Don’t expect a sequence of steps  Don’t expect clear points for handover  Be prepared that it takes time
179. The user is not everything! You are not the user!
180. How do SOFTWARE ARCHITECTS find the way to USER EXPERIENCE ? With Google Maps ! Marcus Trapp Matthias Naab
181. Dr. Marcus Trapp marcus.trapp@iese.fraunhofer.de http://ux.iese.fraunhofer.de Dr. Matthias Naab matthias.naab@iese.fraunhofer.de http://architecture.iese.fraunhofer.de http://mibinu.com/ http://www.iese.fraunhofer.de/