Embed Size (px)
Citation preview
Seven UX/UI Design Principles for Better Web & Mobile Applications — By Marco Spies (flyiin / think moto) Webinar, IATA NDC Hackathon Berlin, May 25, 2016
Marco Spies —
Managing Partner & CPO of flyiin, director and co-founder of think moto – a digital design consultancy. Book author: Branded Interactions - Creating the Digital Experience.Marco Spies has been creating effective user experience for the past 15 years. As a creative director and strategic consultant he has been working for global brands like Adidas, T-Mobile, and Nintendo. Alongside his work, Marco Spies has also held teaching positions.
IATAs New Distribution Capability is a big opportunity to completely rethink air travel applications and deliver new products and services with high customer orientation.
However, to leverage the new possibilities you will need to build user experiences that are easy-to-use, task-oriented and compelling.
To help you get the foundation right, we put together some best practice principles from our user centered design approach.
Designing Web & Mobile Applications —
The UX/UI process. —
Discover Define
Take a deep dive into the business, brand and user goals.
Develop UX guidelines with the help of user insights.
11 2
Iterate
Update your prototype and integrate user feedback.
6
Prototype
Create an interactive prototype to test your design in action.
4
Test
Test your concept for usability with the help of users.
5
Design
Develop ideas, concepts and define the look and feel.
3
1. Strategy first —
Strategy first.—
Understanding the business: business model, products, USPs, touchpoints, customer life cycle, content and features
Understanding the brand: it’s meaning for the target group, brand personality, behavior, look & feel, promise and story
User Business
Brand
Understanding the user: tasks, behavior,
environment, context, culture, demography
2. Know your users (and their tasks). —
Understanding your users is essential for building a successful app. Personas are fictional but vivid descriptions of a typical user. By using personas you will be making well-founded design decisions.
Who are we talking to and what’s their main goal? —
Profile Paul is a dutch business man and lives with his girlfriend and three kids in Wiesbaden. As a director of a start up consultancy he travels for business several times per month to US, Asia and within Europe – mostly starting from Frankfurt Airport. A healthy work-life balance balance is quite important to Paul. On the job, he goes for efficiency in order to be able to enjoy his leisure time to the fullest. In his free time Paul likes to ride downhill bike or goes to climbing parks with his family. To keep himself fit he runs and sticks to a healthy diet. However, he appreciates a good glass of wine or a steak with his friends from time to time.
En route Paul always has a packed suitcase ready. By now, he easily finds his way through several international airports and knows Frankfurt Airport by heart. He appreciates being recognized by the ground staff, contributing to his priority service. When booking a hotel, he usualy chooses one with high business standards. Sometimes his tight schedule changes on short notice. If possible, he then takes some days off to see his friends.
Pain Points Flight booking websites are inconvenient and confusing to Paul. They don’t facilitate comparing services or additional offers. Changing his reservation or booking additional luggage is inconvenient and stressful to him. He’s annoyed and feels they’re stealing his time. On the plane he usually leaves his meal untouched as he’s allergic to wheat. Searching for a suitable meal at the airport often stresses him out, despite his excellent orientation.
Expectations - acknowledgment and frequent traveler benefits across airlines
- fast lane booking–He knows the procedure
- special menu to fit his diet
- easier booking process and more flexibility for changing bookings
- guidance/navigation at the airport tailored to his needs
- options for turning waiting time into work or relaxation time
- a relaxing environment or networking options
6400 EUR (gross income)
Bachelor Degree
Media Consumption
Brand Environment
Paul 36, Startup Consultant
"Time is money, when it comes to business. There has to be room for family life, friends and leisure."
»Geschäftlich gilt: Zeit ist Geld. – Und alles andere ist Zeit,die ich für Familie, Freunde und Hobbies haben möchte.«
Kurzprofil
Paul ist Holländer und lebt seit drei Jahren mit seiner Freundin und den beiden gemeinsamen Kindern in Wiesbaden. Als Eigentümer einer Startup-Beratung reist er mehrmals im Monat geschäftlich – meist über den Flughafen Frankfurt – nach Nordamerika, Asien und auch innerhalb Europas. Paul achtet sehr auf seine Work-Life-Balance und legt im beruflichen Alltag wert auf Effizienz, um so die privaten Momente der Entspannung und des Genusses voll auskosten zu können. In seiner Freizeit fährt Paul gern Downhill Bike oder geht mit der Familie in den Kletterpark. Darüber hinaus hält er sich mit Jogging und bewusster Ernährung fit. Er weiß aber auch einen guten Wein zu schätzen und zelebriert das monatliche Steak-Essen mit seinen besten Freunden.
Auf Reisen
Paul hat immer eine nahezu fertig gepackte Reisetasche bereitstehen. Er findet sich inzwischen an vielen internationalen Flughäfen gut zu recht und den Frankfurter kennt er wie seine Westentasche. Es freut ihn wenn er vom Flug- und Bodenpersonal erkannt wird und er das Gefühl hat bevorzugt behandelt zu werden. Bei Hotels legt er Wert auf einen gehobenen Business-Standard. Und wenn es spontane Änderungen an seinem engen Terminplan gibt, bleibt er auch gerne mal ein bis zwei Tage länger um etwas mit Freunden zu unternehmen.
Pain Points
Paul ist von den umständlichen und unübersichtlichen Flugbuchungs-Portalen enorm genervt. Ihm fehlt insbesondere die Möglichkeit, die für ihn wichtigen Service-Zusatzangebote zu vergleichen. Bei Umbuchungen oder wenn Paul gelegentlich mit einem Prototypen o.ä. zurückreist und weiteres Gepäck aufgeben will, kann er die Umständlichkeit nicht nachvollziehen und ärgert sich über die daraus resultierende Verschwendung seiner ihm kostbaren Zeit. Das Essen im Flugzeug muss er häufig fast unangetastet zurückgehen lassen, weil er nirgends angeben kann dass er eine Unverträglichkeit auf Weizen hat. Trotz seiner guten Orientierung an Flughäfen, ist er häufig gestresst wenn er noch etwas Akzeptables zu essen suchen oder etwas besorgen muss und sich dabei immer weiter vom eigentlichen Ziel entfernt.
Erwartungen
• Würdigung und Vorteile als Vielbucher/-flieger unabhängig von der Airline
• Verkürzung des Buchungsprozesses, da immer ähnlich
• für ihn verträgliches Essen
• mehr Flexibilität bei Planänderungen bzw. weniger umständliche Umbuchung
• Leitsystem/Navigation durch Flughäfen basierend auf seinen Bedürfnissen
• Optionen die Wartezeiten effizienter zu nutzen, für Arbeit oder Entspannung
• Ruhe oder eine Umgebung Gleichgesinnter (evtl. Business-Kontakte)
6400 EUR (brutto)
Bachelor Studium
Mediennutzung
Markenumfeld
Paul, 36 | Startup ConsultantUnmanaged Business Traveler and Early AdopterUnmanaged business traveler and early adopter
"It is important to arrive safe AND relaxed. Therefore, I always search for flights that have few to none connections and offer a good level of comfort and service.“
"When my plans change on short notice I try to stay a few days longer to meet some friends. I need to be able to easily change my bookings.“
"When booking a flight, I have to inform the airline about my wheat allergy so that I can get a special menu.“
✓
3. Design for clarity —
Group related elements that facilitate one main task to create clearly distinguishable sections, e.g. navigating, browsing recommendations, ….
Group related elements. —
Good Practice: Wilo – Pump Monitoring App.—
Good Practice: Airbnb. —
Consider dependencies and hierarchies. —
Give users an obvious order in which to view and interact with elements by creating a strong visual hierarchy.
Good Practice: Bookwire MACS. —
4. Be consistent —
Be consistent.—
Being consistent in placement and style of elements as well as interactions makes an app logical and easy to learn. Try out atomic design or similar paradigms.
Good Practice: Duolingo. —
Good Practice: Google Applications. —
Good Practice: Google Material Design Guidelines.—
5. Provide guidance, orientation and feedback —
Where am I now? —
Indicate to users their current position or progress. This is especially important in booking processes.
Good Practice: Bezar.—
Good Practice: Virgin America. —
Good Practice: otelo. —
Did it work? —
Provide the user with visual Feedback throughout the process with interactions like loading animations and errors or dialogues implying success.
Also: consider the tonality of your feedback – this can make your product unique.
Submit Button by Colin Garven
Good Practice.—
Error Modal by Jawad S
Good Practice.—
CakeHR Modal by Jason Li
Good Practice: CakeHR.—
Good Practice: Slack. —
Success Message by Matt Farley
Good Practice.—
What’s next? —
Use Call-to-actions or links with a clear wording to indicate to users what to do next and what to expect after clicking the link or button.
Good Practice: Typeform. —
Good Practice: Slack. —
6. Offer strong and obvious call-to-actions —
Give opportunity to interact
—
Make your web app a lively and interactive application by using strong call-to-actions. Use one striking CTA per screen (ideally above the fold) and subtle buttons or links for remaining CTAs.
Good Practice: Typeform. —
7. Listen and watch early on —
Start prototyping from day one —
Start with a low-fidelity clickable prototype. This way early wireframes can be tested and updated as you progress with your product development.
Prototyping Tool: Invision. —
Test often —
Repetitive tests help identify usability issues at an early stage. Apply expectation tests (What do you expect when clicking XY?) or task based usability tests (Book a flight to XY).
At think moto: Testing learning apps with kids.—
We hope these UX and UI principles help you make educated design decisions and guide your way to creating effective and compelling user experiences for the world of travel.
We wish you good luck and great success in the IATA NDC hackathon.
The book about the process.—
