OrgSync Connect 2014: Design Tips & Tricks

  • 1,097 views
Uploaded 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 …

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Overflow Cafe staff likes your presentation, thank you.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,097
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
26
Comments
1
Likes
11

Embeds 0

No embeds

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