Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

UI-UX Practical Talking - Mohamed Shehata

1.004 visualizaciones

Publicado el

UI-UX Practical Talking, is presentation for a session I did in the GUC & the ITI, about the meaning and the difference between The UI and the UX, the key principals about building good UX of products, focusing on mobility and mobile design.

Publicado en: Diseño
  • Sé el primero en comentar

UI-UX Practical Talking - Mohamed Shehata

  1. 1. Who am I ! • I used to write some … Basic, ASP, VBS, JS, AS, MDB, SQL even Logo I tried some Pascal/Borland, Java, C, .NET, RoR, even Assembly !. • But people loved my … Web, Mobile & Desktop UI gfx Started at 2000 • 2005 WM, 2006 Nokia, 2009 iPhone, 2010 Android, 2011 Reitna & Nokia S40/S60, 2012 WP & BB10. • Who care !
  2. 2. Let’s talk about • UI/UX Concepts & Key principals • UX of Mobile & Android • Screens, Components & UI Controls. • Visual styles. • Gestures & interactions . • Motivate words & Qs? :-) Why focusing about UI/UX ? • One of the main reasons behind building successful Apps & products. ( Good UI/UX + performance = great app ) * good idea + need (functionality + performance + UI/UX ) • 1) Service answer correctly to Business goals & User goals. • 2) Integrate User Experience, Interaction design with good UI.
  3. 3. What is the UI • The user interface, in the industrial design field of human– machine interaction, is the space where interaction between humans and machines occurs. • Chrome/Visuals • Top Layer
  4. 4. • The user experience, interacting with the machine through the UI What is UX ( aka UXD or UED )
  5. 5. What is UX
  6. 6. What is UX
  7. 7. Enhancing the UI/UX • Process of smoothing & simplify the human interaction with the machine and make it visually appealing !. • A Design Is Only As Deep As It Is Usable !
  8. 8. Enhancing the UI/UX • Functionality + branding.
  9. 9. Enhancing the UI/UX • Functionality + branding.
  10. 10. Design experience for a new product • What the purpose ? • What feelings you want to deliver to product users ? • Who/How people will use it & interact with ?
  11. 11. Design experience for a new product
  12. 12. What make the design usable ? • Responsive and intuitive page elements, • Branding and consistency of theme. • Minimize the learning curve.
  13. 13. Manipulation & Optimization • function specific
  14. 14. Branding • Function + theme
  15. 15. Smart • Prediction & exceeding the expectations!
  16. 16. UX Cannot be designed to everyone • We are different, You cannot design the user! • You cannot design the situation!. MailChimp
  17. 17. Design for UX is about solving problems • Maybe Other Designs Can’t Solve Your Problems ! • 1. Identify or understand your problem. • 2. Devise a plan to rectify it. • 3. Implement your solution. • 4. Review whether it was successful. (If it wasn’t, then you missed • something in the previous steps!)
  18. 18. But we can design for better UX • emotion, usability, motivation, co-experience, user involvement & engagement are keys .
  19. 19. Good UX/Bad UX • Easy, Smooth, Clean, Interactive, Responsive www.gooduxbadux.com
  20. 20. UI/UX Concepts & Key principals • Mobile is not about making things smaller . Best practice. • Divide App to Screens. • A function per screen. • Utilize space based on usage. • Design for mobile first!
  21. 21. UI/UX Concepts & Key principals • Design for one-hand. Best practice. • In most cases we use our right- hand to navigate. • Popular actions on the bottom.
  22. 22. UI/UX Concepts & Key principals • Fewer options = simple and & more effective interface Best practice. • Divide App to screens. • Each screen focus on a function. • Utilize space based on usage. • Mass and void, Relation of spaces and objects
  23. 23. UI/UX Concepts & Key principals • Focus on the Key-feature and do it well. Best practice. • Put them on the middle . Twitter/timeline! • Highlight them. • Obvious icons.
  24. 24. Users do not read, they scan! • Users impatiens and do not make the right choice. Best practice. • Do not make users think. • Undo/back option. • Show wizard steps 1,2,3. • Large objects & colors brings users attentions. • Make use of effective writing
  25. 25. Do not make me think • User Scan, make your labels and options clear .
  26. 26. UI Concepts & Key principals • Content is the King! Best practice. • focus on what people care about put it in front and centered • “Be selective about chrome”
  27. 27. UI/UX Concepts & Key principals • Minimize the number of surprises . - color - menu navigation - tone of voice Best practice. • Use smooth transitions. • Fade in/out sounds. • Friendly colors.
  28. 28. UI/UX Concepts & Key principals • Clean, light, Open, Fast. Best practice. • Optimize graphics & bitmaps. • Optimize resources & libraries. • Load screes on-demand.
  29. 29. UI/UX Concepts & Key principals • Polish makes the UX and App stand out Best practice. • Create more prototypes. • Enhance current UI. • Use modern style graphics & Themes .
  30. 30. UI/UX Concepts & Key principals • Fake it, Low latency is key to the user experience with touch devices. Best practice. • Make immediate visual changes and indicators whilst we wait for network or other process ( easy loading ).
  31. 31. UI Concepts & Key principals • Re-use learnt behaviors . • Re-use interactions inherent in the device . Best practice. • Follow the original guideline and standards of the phone experience as much as possible.
  32. 32. UI/UX Concepts & Key principals • Create a brand & identity . Best practice. • Motive, Logo, Color, Experience, Sounds, Theme even Smell !, all ….
  33. 33. UI/UX Concepts & Key principals • Choose primary colors . Best practice. • Use natural primary color. • Select balanced palette. • Use color matching tool and natural images
  34. 34. Use Adobe kuler • To select brand colors. www. kuler.adobe.com
  35. 35. UI/UX Concepts & Key principals • Create a brand & identity . Best practice. • Motive, Logo, Color, Experience, Sounds, Theme even Smell !, all ….
  36. 36. Use Adobe Illustrator • To create a brand & identity . Best practice. • Use Vector utility like Adobe Illustrator CS6 to create your identity….
  37. 37. UI/UX Concepts & Key principals • Use modern design. Best practice. • Go Flat Design….
  38. 38. UI/UX Concepts & Key principals • Create emotional & funny/appropriate experience. Best practice. • We are human!. • Know your App Objective. • Know your targeted audience …. • Use different shapes .
  39. 39. UI/UX Concepts & Key principals • Create emotional & funny/appropriate experience. Best practice. • Create cool character !..
  40. 40. UI/UX Concepts & Key principals Visceral Design pre-wired programmed level of thinking ( dislike spiders ), like ( flowers ) - initial reaction Behavioral Design This is how the product/application functions. Reflective Design This is how it makes us feel after the initial impact . • Emotional experience & Design.
  41. 41. UI/UX Concepts & Key principals • Padding, margins and relative to the space. Best practice. • Use grid systems!. • Be consistent. Magazine UX ( Samsung )
  42. 42. UI/UX Concepts & Key principals • Create elastic, smooth motions & animations. Best practice. • Natural motion • Smooth Ease in/out motion. • Elastic in/out motions.
  43. 43. Disciplines of user-experience • Everything you may think!.
  44. 44. Make A/B Testing
  45. 45. Long-term user-experience • Maximize user-experience terms. • Greet new members. • Communicate updates
  46. 46. Almost Done 
  47. 47. UI Concepts & Key principals • How to do better Mobile UX - the easier path ? Best practice. • Workshop, idea exploration, paper wireframes, formalized digital wireframes, documentation, user/expert testing, aesthetic & artist concepts, Screen design, Rapid prototype tools ( Paper & Pen !).
  48. 48. UI Concepts & Key principals Why interactive prototypes are important ? • Test ideas quickly in tangible environment • Extremely useful reference for developers • An interactive showcase of the intended UX.
  49. 49. UI Concepts & Key principals • Wireframes, prototypes, visual blueprints and personas.
  50. 50. UI Concepts & Key principals
  51. 51. Tools & Resources • Wireframes KIT & Stencils. – iPhone, iPad, Android, BlackBerry, Facebook, web and desktop http://guitoolkits.com/wireframe-gui-toolkit/ www.axure.com • Wireframes Tool – Axure, wireframes & mockup tool www.justinmind.com
  52. 52. Questions ? • Thank you very much  Contact • @she7ata • www.she7ata.com • info@she7ata.com
  53. 53. Android
  54. 54. UX Of Android • Application structure ( navigation & tabs ). • Screen structure. ( Titles, menus & action bars) • Screen sizes ( full-touch, qwerty kp, portrait & landscape )
  55. 55. New in Material Design • More smooth Animation • More Branding • Parallax effect.
  56. 56. New in Material Design • More Shadows • Transition animation • Parallax effect. • Default Action. • Side-Bar hero
  57. 57. New in KitKat • Branding now standard UI elements colors can be customized. Nav. buttons blends on backgrounds • Fullscreen/Status bar Hidden. • Gestures introducing double tab and double-tab- drag .
  58. 58. UX Of Android Application structures Navigation & Tabs. • Use the appropriate style for your App. • Dashboard grid. • Tabbed view. • Side menu Dashboards.
  59. 59. UX Of Android Application structures Sidebar. • Sidebar drag the content out of the screen and show the menu. • Sidebar show active state .
  60. 60. UX Of Android Application structures Back. • Users can return back using three ways . – Tap the Back button on top-left. – Tap the hardware back button ( if exist ). – Swipe finger to the right ( App Support ) • Notes! – Try to not have much deeper levels with back button.
  61. 61. UX Of Android Application structures Screen views. • List . - More details - View/filter/sort - Messages/Contacts • Grid. - More visuals - Rows/columns Layouts • Linear Layout • Relative Layout
  62. 62. UX Of Android Screen structures Action bar • Navigation & back button • Screen title • Most Important Action • Change based on function • More items will be cascaded in submenu • Hide on fullscreen ( game/picture).
  63. 63. UX Of Android Screen structures Tabs Bar • Display current selected tab. • Scrolling more tabs on the view
  64. 64. UX Of Android Screen structures Menus • Action Menu. -Screen level -less important than action bar actions • Context Menu (hold). - Item level -Quickly without opening an item.
  65. 65. UX Of Android Screen Sizes Common sizes • Phone – 320 x 480 – 480 x 800 – 480 x 854 – 540 x 960 – 1280 x 720 • Tablet. – 1280 x 800 – 1024 x 600Portrait/Landscape
  66. 66. UX Of Android Screen structures Sheets • Previewers Call App screen from within your application . Preview PDF, Image gallery, email message, audio and video in your App. • Composers Used to create content and forms ( drag from down-up ), New Contact/ Calendar entry. • Pickers Select content, such as Share or selecting a contact from address book.
  67. 67. UX Of Android Screen structures • Forms
  68. 68. UX Of Android Screen structures • Dialogs Confirm message. Ask question. Modal dialog ( Display an inquiry dialog that users must respond to before they can continue. )
  69. 69. UX Of Android Notifications • Tips & toasts Quick hint and status update. • Ongoing notification Keep the user updated
  70. 70. UI Controls
  71. 71. UX Of Android UI Controls • Pickers 3 different values • Drop down list 1 value / few options Do not use in yes/no! • List Long list Deep level hierarchy
  72. 72. UX Of Android UI Controls • Buttons Two states • Text box 1 input . • Progress bar Custom color • Check box Two states • toggles Two states • Option box Two states More options
  73. 73. UX Of Android Visual Style • Application Icon 48x 48 pixel Leave at least 2pixel for shadows. Light is from up 90-degree. 5 Pixel stroke line if you will. Add live effect. Texture & noise. Metal and Glass. Light & Shadow
  74. 74. UX Of Android Visual Style • In-Apps Icons – Action Bar, Tabs, Action Menu, Application Menu, Context menu.
  75. 75. UX Of Android Visual Style • Apps Style – Minimize 3d icons. – Icons details & weight should be balanced. – Dark gradient: Hex #4F4F4F/#363636 – Light gradient: Hex #E3E3E3/ #D1D1D1 – Selected gradient: Hex #3CBCE7/ #01A8DF
  76. 76. UX Of Android Visual Style • Font size – Roboto, the standard font .
  77. 77. Gestures & Interactions
  78. 78. Gestures & Interactions Bezel & Global Gestures
  79. 79. Almost Done 
  80. 80. UI Concepts & Key principals • How to do better Mobile UX - the easier path ? Best practice. • Workshop, idea exploration, paper wireframes, formalized digital wireframes, documentation, user/expert testing, aesthetic & artist concepts, Screen design, Rapid prototype tools ( Paper & Pen !).
  81. 81. UI Concepts & Key principals Why interactive prototypes are important ? • Test ideas quickly in tangible environment • Extremely useful reference for developers • An interactive showcase of the intended UX.
  82. 82. Tools & Resources • Wireframes KIT & Stencils. – iPhone, iPad, Android, BlackBerry, Facebook, web and desktop http://guitoolkits.com/wireframe-gui-toolkit/ www.axure.com • Wireframes Tool – Axure, wireframes & mockup tool www.justinmind.com
  83. 83. Questions ? • Thank you very much  Contact • @she7ata • www.she7ata.com • info@she7ata.com

×