android ux-ui design for fun and profit
DESCRIPTION
Even though we are developers dealing with source code, it is good to know how to deal with UI/UX when building our user interfaces by applying tips and best practices. So, in this session, we are gonna talk about android usability patterns, based on real cases and experiences with mobile development.TRANSCRIPT
![Page 1: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/1.jpg)
@fernando_cejas
![Page 2: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/2.jpg)
Who am I?
• Barcelona GDG Organizer. • Software Engineer.
• Android lover. • Geek.
![Page 3: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/3.jpg)
Who am I?
• Not a UX/UI guy…. I'm a coder...
• So what the hell I’m doing here?
![Page 4: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/4.jpg)
Agenda
• User Interface • User Experience • Usability • Android Design Patterns • Examples • Advices • Conclusion
![Page 5: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/5.jpg)
Why this talk?
![Page 6: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/6.jpg)
WTF?
![Page 7: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/7.jpg)
WTF?
![Page 8: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/8.jpg)
WTF?
![Page 9: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/9.jpg)
What is User Interface? (UI)
• A common boundary or surface between the interactive system and the user.
• All elements which provide communication
between the interactive system and the user.
![Page 10: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/10.jpg)
Elements of a User Interface
![Page 11: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/11.jpg)
What is User Interface Design?
• User interface design is the process of supporting the tasks (goals) of the user, ideally in a friendly and articulate manner.
![Page 12: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/12.jpg)
What about User Experience (UX)? • User experience (UX) is about how a person feels about
using a product, system or service. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system.
![Page 13: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/13.jpg)
What is Usability?
• Usability means that a person using a system finds it easy to understand and use.
• A usable system allows a person to focus on their tasks, and not on the system itself.
• A usable system most often does what a! person expects.
![Page 14: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/14.jpg)
Usability Iceberg
Interaction Techniques. Keyboard and mouse mappings, menus, feedback, etc.
Visuals. Cues, feedback, and aesthetics.
![Page 15: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/15.jpg)
Android Design Patterns
![Page 16: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/16.jpg)
What is a Design Pattern?
• It’s a design solution to a recurring problem. • It’s also about not reinventing the wheel. • People want to use what they have learnt
already using the phone.
![Page 17: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/17.jpg)
Things change… Isn’t it?
![Page 18: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/18.jpg)
Things change… Isn’t it?
![Page 19: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/19.jpg)
Ice Cream Sandwich! Android 4.0
• A big quality step. • Mature, stable and elegant.
![Page 20: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/20.jpg)
For Smartphones and Tablets
• Different devices have different usability.
![Page 21: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/21.jpg)
Android Main Themes
• Holo Light and Holo Dark.
![Page 22: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/22.jpg)
Your branding • Consistency has its place in Android, but you also have the flexibility
to customize the look of your app to reinforce your brand.
![Page 23: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/23.jpg)
Gestures • Gestures allow users to interact with your app by
manipulating the screen objects you provide
![Page 24: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/24.jpg)
Gestures • Gestures allow users to interact with your app by
manipulating the screen objects you provide
![Page 25: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/25.jpg)
Gestures • Gestures allow users to interact with your app by
manipulating the screen objects you provide
![Page 26: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/26.jpg)
Application Structure
![Page 27: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/27.jpg)
Navigation with Back and Up
![Page 28: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/28.jpg)
Action Bar
![Page 29: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/29.jpg)
Action Bar
• Consider split it when having many elements
![Page 30: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/30.jpg)
Navigation Drawer • The navigation drawer is a panel that transitions in from the left
edge of the screen and displays the app’s main navigation options.
• The user can open the drawer panel by touching the navigation drawer indicator.
![Page 31: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/31.jpg)
Multi-pane Layouts
![Page 32: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/32.jpg)
Multi-pane Layouts
![Page 33: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/33.jpg)
Compound Views and Orientation Changes
![Page 34: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/34.jpg)
Compound Views and Orientation Changes
![Page 35: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/35.jpg)
Compound Views and Orientation Changes
![Page 36: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/36.jpg)
Compound Views and Orientation Changes
![Page 37: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/37.jpg)
Swipe Views
• Navigate with gestures through the content.
![Page 38: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/38.jpg)
Contextual Action Bar
![Page 39: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/39.jpg)
Notifications • The notification system allows your app to keep the user informed
about events, such as new chat messages or a calendar event.
![Page 40: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/40.jpg)
Pure Android
![Page 41: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/41.jpg)
Google Glass…
![Page 42: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/42.jpg)
Design for Glass…. • Users typically have multiple devices that store and display
information for specific time periods. Glass works best with information that is simple, relevant, and current.
• Don't try to replace a smartphone, tablet, or laptop by transferring features designed for these devices to Glass. Instead, focus on how Glass and your services complement each other, and deliver an experience that is unique.
![Page 43: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/43.jpg)
Design for Glass…. • Design interfaces that use imagery, colloquial voice
interactions, and natural gestures.
![Page 44: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/44.jpg)
Android Wear…. • Android wearables provide just the right information at just
the right time, allowing you to be connected to the virtual world and present in the real world.
![Page 45: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/45.jpg)
Android Wear - Pages • Pages are additional cards that can appear to the right of
your main card in the stream. If your core message is longer than a short snippet, do not sacrifice glanceability by packing a lot of information into your primary notification. Instead, use pages to provide additional content.
![Page 46: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/46.jpg)
Android Wear - Notification Stacks • Stacks are a way of adding multiple useful notifications
without overwhelming the user’s stream. If your application may produce multiple concurrent notifications, consider combining them into a stack.
![Page 47: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/47.jpg)
Android Wear - Pages • Voice replies are primarily used by messaging applications to
provide a hands-free way of dictating a short message. You can also provide a up to five suggested replies or “canned responses” that are useful in a wide range of cases.
![Page 48: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/48.jpg)
UI/UX Examples
Beautiful… Sweeeet!!!!
![Page 49: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/49.jpg)
UI/UX Examples
Grand St.
![Page 50: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/50.jpg)
UI/UX Examples
Banjo
![Page 51: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/51.jpg)
UI/UX Examples
Timely Alarm Clock.
![Page 52: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/52.jpg)
Some advice… • Don't port the UI from other platforms. • Don't override the behavior of system buttons.
• Know your user and get feedback from him.
• Test on real users, early and often.
• Do what the user expects.
• The most common operations should be visible.
• Don't reinvent the wheel.
![Page 53: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/53.jpg)
Some advice…
• Innovate but don't go further than standards • Build better products, not more features
![Page 54: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/54.jpg)
Any questions?
![Page 55: Android UX-UI Design for Fun and Profit](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c76f024a795909048b4639/html5/thumbnails/55.jpg)
Thanks!
@fernando_cejas www.fernandocejas.com