Android UX-UI Design for Fun and Profit

Slide 1

Slide 1 text

@fernando_cejas

Slide 2

Slide 2 text

Who am I? •  Barcelona GDG Organizer. •  Software Engineer. •  Android lover. •  Geek.

Slide 3

Slide 3 text

Who am I? •  Not a UX/UI guy…. I'm a coder... •  So what the hell I’m doing here?

Slide 4

Slide 4 text

Agenda •  User Interface •  User Experience •  Usability •  Android Design Patterns •  Examples •  Advices •  Conclusion

Slide 5

Slide 5 text

Why this talk?

Slide 6

Slide 6 text

WTF?

Slide 7

Slide 7 text

WTF?

Slide 8

Slide 8 text

WTF?

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

Elements of a User Interface

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

What is Usability? •  Usability means that a person using a system ﬁnds 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.

Slide 14

Slide 14 text

Usability Iceberg Interaction Techniques. Keyboard and mouse mappings, menus, feedback, etc. Visuals. Cues, feedback, and aesthetics.

Slide 15

Slide 15 text

Android Design Patterns

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Things change… Isn’t it?

Slide 18

Slide 18 text

Things change… Isn’t it?

Slide 19

Slide 19 text

Ice Cream Sandwich! Android 4.0 •  A big quality step. •  Mature, stable and elegant.

Slide 20

Slide 20 text

For Smartphones and Tablets •  Different devices have different usability.

Slide 21

Slide 21 text

Android Main Themes •  Holo Light and Holo Dark.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Gestures •  Gestures allow users to interact with your app by manipulating the screen objects you provide

Slide 24

Slide 24 text

Gestures •  Gestures allow users to interact with your app by manipulating the screen objects you provide

Slide 25

Slide 25 text

Gestures •  Gestures allow users to interact with your app by manipulating the screen objects you provide

Slide 26

Slide 26 text

Application Structure

Slide 27

Slide 27 text

Navigation with Back and Up

Slide 28

Slide 28 text

Action Bar

Slide 29

Slide 29 text

Action Bar •  Consider split it when having many elements

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

Multi-pane Layouts

Slide 32

Slide 32 text

Multi-pane Layouts

Slide 33

Slide 33 text

Compound Views and Orientation Changes

Slide 34

Slide 34 text

Compound Views and Orientation Changes

Slide 35

Slide 35 text

Compound Views and Orientation Changes

Slide 36

Slide 36 text

Compound Views and Orientation Changes

Slide 37

Slide 37 text

Swipe Views •  Navigate with gestures through the content.

Slide 38

Slide 38 text

Contextual Action Bar

Slide 39

Slide 39 text

Notiﬁcations •  The notiﬁcation system allows your app to keep the user informed about events, such as new chat messages or a calendar event.

Slide 40

Slide 40 text

Pure Android

Slide 41

Slide 41 text

Google Glass…

Slide 42

Slide 42 text

Design for Glass…. •  Users typically have multiple devices that store and display information for speciﬁc 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.

Slide 43

Slide 43 text

Design for Glass…. •  Design interfaces that use imagery, colloquial voice interactions, and natural gestures.

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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 sacriﬁce glanceability by packing a lot of information into your primary notiﬁcation. Instead, use pages to provide additional content.

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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 ﬁve suggested replies or “canned responses” that are useful in a wide range of cases.

Slide 48

Slide 48 text

UI/UX Examples Beautiful… Sweeeet!!!!

Slide 49

Slide 49 text

UI/UX Examples Grand St.

Slide 50

Slide 50 text

UI/UX Examples Banjo

Slide 51

Slide 51 text

UI/UX Examples Timely Alarm Clock.

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

Some advice… •  Innovate but don't go further than standards •  Build better products, not more features