OrgSync Connect 2014: Design Tips & Tricks

1,576 views

Published on

Originally presented on June 26, 2014 at OrgSync Connect, Dallas, TX. Design your messaging to delight your members. We’ll explore best practices for building forms, news, events, pages and more portal elements through typography, color, images, and logical information hierarchies. Learn to think like your users to present the content they want in a way they can use.

Published in: Design, Technology

OrgSync Connect 2014: Design Tips & Tricks

  1. 1. ORGSYNC CONNECT designTIPS & TRICKS 2014
  2. 2. YOUcan delight your users
  3. 3. The UI team wants to delight your users, too.
  4. 4. CODE NAME: Longhorn
  5. 5. LESS MORE=
  6. 6. Navigation
  7. 7. Navigation
  8. 8. Navigation
  9. 9. Navigation
  10. 10. Navigation
  11. 11. Navigation
  12. 12. Navigation
  13. 13. Page Layout
  14. 14. BEST PRACTICE Less is more.
  15. 15. If you’re not using modules in a portal, turn them off. BEST PRACTICE
  16. 16. community BRANDING
  17. 17. don’t be AFRAIDof color
  18. 18. use your POWERwisely
  19. 19. use your POWERwisely
  20. 20. #C0FFEE #DECAF5 #0079FF #BADA55
  21. 21. Community Logo and Profile Image
  22. 22. Community Logo and Profile Image
  23. 23. Community Logo and Profile Image
  24. 24. Branded Emails
  25. 25. Branded Emails
  26. 26. Branded Emails
  27. 27. Branding Official Departments
  28. 28. Branding Student Organizations
  29. 29. or student design club might be able to help your graphics department
  30. 30. Logging In
  31. 31. Logging In
  32. 32. BEST PRACTICE Contact your campus consultant to set your campus colors or to change your primary logo.
  33. 33. Update your community profile picture in your community settings. BEST PRACTICE
  34. 34. Turn on branded emails (if desired) in your community settings. BEST PRACTICE
  35. 35. Brand official school departments to help them stand out from student organizations. BEST PRACTICE
  36. 36. Link to your custom login page. BEST PRACTICE
  37. 37. it’s a multi-device WORLD
  38. 38. Remember that you’re creating content for multiple devices. BEST PRACTICE
  39. 39. Use formatting tools sparingly. BEST PRACTICE
  40. 40. Input text, not just images or links. BEST PRACTICE
  41. 41. designing with TEXT
  42. 42. Creating Content
  43. 43. Avoid underlining text for emphasis. Your readers will wonder 
 why the link is broken.
  44. 44. You may want to use justified text because it s e e m s “ t i d i e r . ” T h e downside on the web is that you cannot control your word or letter spacing. As a result, justified text can look sloppier than left- aligned text.
  45. 45. Left-aligned text is better. 
 It maintains word and letter spacing, and provides clues on where the next line starts. It is also considered more accessible.
  46. 46. Don’t underline text unless it’s a link. Even then, it’s not necessary. BEST PRACTICE
  47. 47. Left-aligned text is usually best. BEST PRACTICE
  48. 48. Save the uppercase text for 
 short subheads. BEST PRACTICE
  49. 49. Creating Content
  50. 50. Creating Content
  51. 51. understanding FORMS
  52. 52. GET EXCITED! It’s time to 
 fill out a form!”
 Said no one ever. “
  53. 53. FORMS SUCK. “ “ LUKE WROBLEWSKI Usability expert
  54. 54. “ “ LUKE WROBLEWSKI Usability expert If you don't believe me,
 try to find people who 
 like filling them in…
  55. 55. “ “ LUKE WROBLEWSKI Usability expert For most of us, forms are just an annoyance.
 What we want to do is to vote, apply for a job, buy a book online, join a group....
  56. 56. “ “ LUKE WROBLEWSKI Usability expert FORMS JUST 
 STAND IN OUR WAY.
  57. 57. Is the information NECESSARY? ‣ Keep ‣ Cut ‣ Postpone ‣ Explain
  58. 58. Be CONVERSATIONAL. Meeting Information Please include day(s), time(s), and location(s) of your meetings. When and where are your meetings held?
  59. 59. Keep question and answers CONSISTENT. Choose your preferred t-shirt color Blue Red What color hats do you want? Red Blue
  60. 60. Keep question and answers CONSISTENT. Choose your preferred t-shirt color Blue Red Choose your preferred hat color Blue Red
  61. 61. Provide POSITIONAL FEEDBACK. Page 1 of 3: Your Information
  62. 62. Provide POSITIONAL FEEDBACK. Page 2 of 3: Your Vehicle Information
  63. 63. Provide POSITIONAL FEEDBACK. Section 1 of 3: Event Details
  64. 64. Provide POSITIONAL FEEDBACK. Section 2 of 3: Catering Details
  65. 65. Use the right ELEMENTS. ‣ Checkboxes ‣ Radio Buttons ‣ Dropdowns
  66. 66. Use PAGE LOGIC when applicable. The best way to speed up form completion process is to not ask the question.
  67. 67. QUESTION EVERYTHING
 when moving a paper form online. The best way to speed up form completion process is to not ask the question.
  68. 68. Fill out your OWN FORM. OWN IT.
  69. 69. PEOPLE
  70. 70. RELATIONSHIPS
  71. 71. COMMUNICATION
  72. 72. NEWS POST demo
  73. 73. THANK YOU. Valarie Martin Stuart OrgSync UI Designer

×