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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
436
On Slideshare
416
From Embeds
20
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
3

Embeds 20

https://twitter.com 18
http://www.slideee.com 2

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