Your SlideShare is downloading. ×
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti

374
views

Published on

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
374
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. @fernando_cejas
  • 2. Who am I? •  Barcelona GDG Organizer. •  Software Engineer. •  Android lover. •  Geek.
  • 3. Who am I? •  Not a UX/UI guy…. I'm a coder... •  So what the hell I’m doing here?
  • 4. Agenda •  User Interface •  User Experience •  Usability •  Android Design Patterns •  Examples •  Advices •  Conclusion  
  • 5. Why this talk?
  • 6. WTF?
  • 7. WTF?
  • 8. WTF?
  • 9. 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.
  • 10. Elements of a User Interface
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 14. Usability Iceberg Interaction Techniques. Keyboard and mouse mappings, menus, feedback, etc. Visuals. Cues, feedback, and aesthetics.
  • 15. Android Design Patterns
  • 16. 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.
  • 17. Things change… Isn’t it?
  • 18. Things change… Isn’t it?
  • 19. Ice Cream Sandwich! Android 4.0 •  A big quality step. •  Mature, stable and elegant.
  • 20. For Smartphones and Tablets •  Different devices have different usability.
  • 21. Android Main Themes •  Holo Light and Holo Dark.
  • 22. 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.
  • 23. Gestures •  Gestures allow users to interact with your app by manipulating the screen objects you provide
  • 24. Gestures •  Gestures allow users to interact with your app by manipulating the screen objects you provide
  • 25. Gestures •  Gestures allow users to interact with your app by manipulating the screen objects you provide
  • 26. Application Structure
  • 27. Navigation with Back and Up
  • 28. Action Bar
  • 29. Action Bar •  Consider split it when having many elements
  • 30. 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.
  • 31. Multi-pane Layouts
  • 32. Multi-pane Layouts
  • 33. Compound Views and Orientation Changes
  • 34. Compound Views and Orientation Changes
  • 35. Compound Views and Orientation Changes
  • 36. Compound Views and Orientation Changes
  • 37. Swipe Views •  Navigate with gestures through the content.
  • 38. Contextual Action Bar
  • 39. Notifications •  The notification system allows your app to keep the user informed about events, such as new chat messages or a calendar event.
  • 40. Pure Android
  • 41. Google Glass…
  • 42. 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.
  • 43. Design for Glass…. •  Design interfaces that use imagery, colloquial voice interactions, and natural gestures.
  • 44. 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.
  • 45. 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.
  • 46. 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.
  • 47. 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.
  • 48. UI/UX Examples Beautiful… Sweeeet!!!!
  • 49. UI/UX Examples Grand St.
  • 50. UI/UX Examples Banjo
  • 51. UI/UX Examples Timely Alarm Clock.
  • 52. 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.
  • 53. Some advice… •  Innovate but don't go further than standards •  Build better products, not more features
  • 54. Any questions?
  • 55. Thanks! @fernando_cejas www.fernandocejas.com