[Dmytro Danylyk] Planning Android Screens

Presentation from GDG DevFest Ukraine 2015 - the biggest Google related event in the country. October 23-24, Lviv. Learn more at http://devfest.gdg.org.ua/

Transcript

1. Dmytro Danylyk Timee GmbH. Planning Android Planning Android Screens Screens
2. What is it? What is it? "Screens Planing - is a process of preparing app flow, screens logic, layout & design - before programmer writes the first lines of code."
3. Sound like designer job Sound like designer job "Designer should not be the sole decision-maker". "Be sure your lead developer/architect is involved very early in the screen planning process".
4. Why developer must be involved? Why developer must be involved? "Developer will be able to give your design team visibility into areas of the design that can either become costly to implement, or present performance challenges for the app."
5. Why screen planning is important? Why screen planning is important? "To prevent development surprises and cost overruns during the project".
6. Screen planning process Screen planning process Answers question: "Is this screen necessary?" App flow diagram App flow diagram
7. Screen planning process Screen planning process Answers question: "How other applications solve similar problems?" App flow diagram App flow diagram Research other apps Research other apps
8. Screen planning process Screen planning process Answers question: "What is this screen responsible for?" App flow diagram App flow diagram Research other apps Research other apps Screen logic Screen logic
9. Screen planning process Screen planning process App flow diagram App flow diagram Research other apps Research other apps Screen logic Screen logic Layout & Design Layout & Design Answers question: "How this screen will look like?"
10. Let's plan Sign In screen Let's plan Sign In screen
11. App flow diagram App flow diagram Draw simple relationships diagram.
12. Research other apps Research other apps Download few applications which have Sign In screen and check how they solve problems like: 1. Internet is not available 2. Input data is not valid 3. Loading indicator 4. ...
13. Network check Network check Vine application checks if network is available, after the user clicks on the Sign In button. Vine application
14. Airbnb application tracks when text inside login and password input fields changes. Log In button stays disabled until input data is valid. Data validation: Data validation: "as user type" "as user type" Airbnb application
15. Data validation: Data validation: "lazy" "lazy" Keep application validates data after user clicks on Done button. Keep application
16. Swarm application disables login, password and sign in widgets, and replaces sign in button text with loading indicator. Loading indicator: Loading indicator: button button Swarm application
17. Swarm application disables login, password and sign in widgets, and replaces sign in button text with loading indicator. Loading indicator: Loading indicator: button button Swarm application
18. Vine application displays standard progress dialoge. Loading indicator: Loading indicator: dialoge dialoge Vine application
19. Duolingo application disables login, password and sign in widgets without displaying any loading indicator. Loading indicator: Loading indicator: none none Duolingo application
20. Duolingo application disables login, password and sign in widgets without displaying any loading indicator. Loading indicator: Loading indicator: none none Duolingo application
21. Pre-fill data Pre-fill data Pinterest application pre-fills email field so we don't have to type it manually. Pineterst application
22. Airbnb application greatly improves user experience because allows to Sign In with a simple tap. Social Sign In Social Sign In Airbnb application
23. Keyboard done Keyboard done button button By default when user presses keyboard Done button – it closes keyboard. Tumblr application handles this click and performs Sign In request. Tumblr application
24. 1. Perform Sign In 2. Handle network state 3. Handle data validation 4. Display loading indicator 5. Pre-fill data 6. Social Sign In Screen logic Screen logic Write down a list of Sign In screen features.
25. Layout & Design Layout & Design Write down few suggestions regarding Sign In screen design.
26. Do not place important functional buttons at the bottom of your screen. At least make sure they are moved to top when keyboard is displayed. Tumblr Android
27. Do not place important functional buttons at the bottom of your screen. At least make sure they are moved to top when keyboard is displayed. Tumblr Android
28. Do not force users to make unnecessary clicks, show keyboard automatically. Remember the 3 clicks rule: with every three clicks you lose 50% of your audience’s attention. Pinterest application
29. Make sure keyboard doesn't overlap your Sign In button or any other top componenets. At least make your container scrollable. Foursquare application
30. Development Tips Development Tips
31. public boolean isEmailValid() { return Patterns.EMAIL_ADDRESS.matcher(getEmail()).matches(); } public String getEmail() { return mEditEmail.getText().toString().trim(); // mEditEmail } To validate email you can use Patterns.EMAIL_ADDRESS 1.
32. String phoneNumber = "044 668 18 00" // Switzerland phone number PhoneNumberUtil phoneUtil = PhoneNumberUtil.getInstance(); PhoneNumber phoneNumberProto = phoneUtil.parse(phoneNumber, "CH"); // CH - Switzerland country code boolean isValid = phoneUtil.isValidNumber(phoneNumberProto); // returns true // Produces "+41 44 668 18 00" phoneUtil.format(phoneNumberProto, PhoneNumberFormat.INTERNATIONAL // Produces "044 668 18 00" phoneUtil.format(phoneNumberProto, PhoneNumberFormat.NATIONAL // Produces "+41446681800" phoneUtil.format(phoneNumberProto, PhoneNumberFormat.E164) To validate/format phone number you can use google libphonenumber 2.
33. Pattern emailPattern = Patterns.EMAIL_ADDRESS; Account[] accounts = AccountManager.get(context).getAccounts(); for (Account account : accounts) { if (emailPattern.matcher(account.name).matches()) { String possibleEmail = account.name; } } To pre-fill user data you can use AccountManager 3.
34. Don't forget to set EditText attributes 4. – hint text to display when the text is empty. – constrains the text to a single horizontally scrolling line instead of letting it wrap onto multiple lines. – the type of data being placed in a text field, used to help an input method decide how to let the user enter text. (E.g. textPassword, phone, textEmailAddress) android:hint android:singleLine android:inputType
35. Handle keyboard done button 5. mEditPassword.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean onEditorAction(TextView v, int actionId, KeyEvent event) { boolean isValidKey = event != null && event.getKeyCode() == KeyEvent.KEYCODE_ENTER; boolean isValidAction = actionId == EditorInfo.IME_ACTION_DONE; if (isValidKey || isValidAction) { // do login request } return false; } }); Note: some keyboards support changing keyboard action button text android:imeActionLabel="SignIn".
36. Provide meaningful error messages 6. if(!isEmailValid()) { showToast("Please enter valid username."); } else if(isPasswordEmpty()) { showToast("Please enter password."); } else if(!isNetworkOn()) { showToast("You don't have internet connection."); } else { doSignIn(); } Note: error message should answer a question "What is wrong?" and in some cases give user a hint how to fix it.
37. When you try to Sign In to Airbnb application without internet connection it displays error dialog with advice "Please try again". Airbnb application
38. Trying to use Social Sign In inside Airbnb application without internet connection, ends with obscure error message and infinity loading dialogue. Airbnb application
39. Provide cancellation mechanism 7. class SignInRequest extends AsyncTask { // implementation omitted } SignInRequest mSignInRequest; void showLoadingDialog() { ... alertDialog.setOnDismissListener(new DialogInterface.OnDismissListener() { @Override public void onDismiss(DialogInterface dialog) { // guarantees that onPostExecute() is never invoked mSignInRequest.cancel(false); } }); alertDialog.show(); }
40. Vine application 1. Type your email & password 2. Press Sign In button 3. Once the loading dialog appears, press system back button
41. Vine application 1. Type your email & password 2. Press Sign In button 3. Once the loading dialog appears, press system back button 4. Previous action will close the dialog, but won't cancel request
42. Vine application 1. Type your email & password 2. Press Sign In button 3. Once the loading dialog appears, press system back button 4. Previous action will close the dialog, but won't cancel request 5. After some time you will see result of Sign In request
43. Vine application Vine application doesn't ignore http request callback when dialog is dismissed. As a result Toast with error message appears after loading dialog was dismissed.
44. 1. Type your email & password 2. Press Sign In button Tumblr application
45. 1. Type your email & password 2. Press Sign In button 3. Once the loading indicator appears, press Sign Up button Tumblr application
46. 1. Type your email & password 2. Press Sign In button 3. Once the loading indicator appears, press Sign Up button 4. Previous action will switch you to Sign Up view, but won't cancel request Tumblr application
47. Tumblr application 1. Type your email & password 2. Press Sign In button 3. Once the loading indicator appears, press Sign Up button 4. Previous action will switch you to Sign Up view, but won't cancel request 5. After some time you will see result of Sign In request
48. Tumblr application Tumblr application doesn't ignore http request callback when user switch from Log In to Sign Up. As a result error labels appears in wrong state.
49. Use AccountManage and SyncAdapter 8. AccountManager gives users a central point to define their credentials Android decides when is best time to make synchronization via SyncAdapter
50. Sign In screen is not always MAIN 9. <activity android:name=".SignInActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> When you have a sign in screen in your application it doesn’t mean it should be your main launcher screen.
51. Launch Sign In activity Check if access token is valid If access token is valid launch Home activity Typical flow Unnecessary delay, because Sign In activity launch every time user open application. Issues Sign In activity if(isAccessTokenValid()) { startHomeActivity(); finish(); } else { initViews(); }
52. Launch Home activity Check if access token is valid If access token is NOT valid launch Sign In activity Better flow Home activity if(isAccessTokenValid()) { initViews(); } else { startSignInActivity(); finish(); }
53. Summary Summary Take time to plan Take time to plan Keep your technical team involved Keep your technical team involved Research and learn from other apps Research and learn from other apps
54. Planning Animations Planning Animations
55. Why animations are important? Why animations are important? "You can get an application into production without animations, but these little things can be the difference between your app receiving 4 star or 5 star reviews."
56. How to make decision to add How to make decision to add animations? animations?
57. What type of animations we have? What type of animations we have? 1. Functional 1. Functional 2. "Delightful & Cute" 2. "Delightful & Cute"
58. What are functional animations? What are functional animations? "Animations which help to provide context are called - functional. They help brains understand how the information flows".
59. Example Example Click to remove item without animation
60. Example Example Click to remove item without animation
61. Example Example Click to remove item with animation
62. Example Example Click to remove item with animation
63. What are "Delightful & Cute" What are "Delightful & Cute" animations? animations? "Animations which make usage of your app more interesting and fun are called - "delightful & cute". They bring uniqueness to your application and help user to remember you."
64. Example Example Delightful pull-to-refresh weather animation
65. When to start coding animation? When to start coding animation? "Flow and design changes very often during development iteration. That's why development of complex, time- consuming animations is usually postponed to the very end, when core application development is completed."
66. What is animation prototyping? What is animation prototyping? "Animation prototyping is a way to quickly mock up animation without having to write any code."
67. Why it's useful for developers? Why it's useful for developers? "Because you can see order of transformations applied in prototype and convert them into code."
69. High Level Concepts High Level Concepts Pixate creates 100% native app prototypes that run directly on your iOS or Android device. The process works like this: 1. Make changes to your prototype in Pixate 2. As edits are saved, the Pixate app will generate or refresh the native prototype on your mobile device in real-time
70. What I need? What I need? 1. Pixate Mobile Application 2. Pixate Studio 3. Android device
71. Connecting your devices Connecting your devices In order to see and interact with what you're creating, you'll need to connect your device to Pixate Studio. Detailed tutorial is available on official Pixate . knowledgebase
72. Pixate Studio's Pixate Studio's interface interface
73. A - THE TOOLBOX/ASSETS TABS A - THE TOOLBOX/ASSETS TABS The layer list is home to all of the layers in your prototype. The second tab is where you upload images to use in your Prototype.
74. Pixate Studio's Pixate Studio's interface interface
75. B - ACTIONS B - ACTIONS Actions are scripts that can be run to complete common tasks, like setting up a scrollview or aligning a layer.
76. Pixate Studio's Pixate Studio's interface interface
77. C - INTERACTIONS C - INTERACTIONS Interactions are gestures and actions users will perform in your app.
78. C - ANIMATIONS C - ANIMATIONS Animations move, scale and change layers, depending on the interaction performed by the user and the properties you set up
79. Pixate Studio's Pixate Studio's interface interface
80. D - CANVAS D - CANVAS The canvas is the visual representation of your prototype. What you see here, is what you will see in the preview.
81. Pixate Studio's Pixate Studio's interface interface
82. E - LAYER PROPERTIES E - LAYER PROPERTIES This is where you can adjust the layer’s position, size or orientation with values and change the appearance of the layer.
83. Pixate Studio's Pixate Studio's interface interface
84. F - ANIMATION PROPERTIES F - ANIMATION PROPERTIES These are used to define the conditions, ranges of an animation and interaction relationships.
85. Let's prototype Let's prototype animation animation
86. Final Preview Final Preview After user tap on picture, details view slides from left.
87. 'picture' 'detail view' Terms Terms
88. 1. Cut necessary resources and add them to Pixate Studio assets.
89. 2. Drag & drop asset images to canvas and create layers.
90. 3. Move 'detail view' to initial position (off the screen).
91. 4. Select 'picture' and click on 'Tap' interaction.
92. 5. Select 'detail view' and click on 'Move' animation.
93. The layer the animation will be based on. Read as: when someone taps on 'picture'. 'Move' animation 'Move' animation
94. Layer moves with duration, once a set condition is met. 'Move' animation 'Move' animation
95. These options tell the layer where to move to. 'Move' animation 'Move' animation
96. Easing curve you want to use for the animation (optional). 'Move' animation 'Move' animation
97. Read as: when someone taps on 'picture' move this layer '90pt left' with 'spring' easing curve. 'Move' animation 'Move' animation
98. 'Move' animation code 'Move' animation code int tension = 300; AnticipateOvershootInterpolator interpolator = new AnticipateOvershootInterpolator(tension); detailView.animate() .yBy(-90) // left 90 pt .setDuration(2500) // friction 2.5 sec .setInterpolator(interpolator) .start();
99. Final Preview Final Preview After user tap on picture, details view slides from left.
100. Summary Summary Simple process of prototyping Simple process of prototyping Preview on a real Android device Preview on a real Android device Limited basic asset kit Limited basic asset kit
101. @ @dmytrodanylyk dmytrodanylyk dmytrodanylyk.com dmytrodanylyk.com slides.com/dmytrodanylyk slides.com/dmytrodanylyk S S
102. Resources used Resources used Planning Mobile App Design Why Programmers Should Be A Part Of The Design Process Transitional Interfaces Prototyping in Pixate and Development Pixate knowledgebase