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.

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

22. #C0FFEE
#DECAF5
#0079FF
#BADA55

23. Community Logo and Profile Image

24. Community Logo and Profile Image

27. Community Logo and Profile Image

28. Branded Emails

29. Branded Emails

30. Branded Emails

31. Branding Official Departments

32. Branding Student Organizations

33. or student design club
might be able to help
your graphics department

34. Logging In

35. Logging In

36. BEST PRACTICE
Contact your campus consultant
to set your campus colors or to
change your primary logo.

37. Update your community profile
picture in your community settings.
BEST PRACTICE

38. Turn on branded emails (if desired)
in your community settings.
BEST PRACTICE

39. Brand official school departments
to help them stand out from
student organizations.
BEST PRACTICE

40. Link to your custom login page.
BEST PRACTICE

41. it’s a multi-device
WORLD

45. Remember that you’re creating
content for multiple devices.
BEST PRACTICE

46. Use formatting tools sparingly.
BEST PRACTICE

47. Input text, not just images or links.
BEST PRACTICE

48. designing with
TEXT

49. Creating Content

50. Avoid underlining text for emphasis.
Your readers will wonder
why the link is broken.

52. 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.

53. 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.

57. Don’t underline text unless it’s a
link. Even then, it’s not necessary.
BEST PRACTICE

58. Left-aligned text is usually best.
BEST PRACTICE

59. Save the uppercase text for
short subheads.
BEST PRACTICE

60. Creating Content

61. Creating Content

62. understanding
FORMS

63. GET EXCITED!
It’s time to
fill out a form!”
Said no one ever.
“

64. FORMS SUCK.
“
“
LUKE WROBLEWSKI
Usability expert

65. “
“
LUKE WROBLEWSKI
Usability expert
If you don't believe me,
try to find people who
like filling them in…

66. “
“
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....

67. “
“
LUKE WROBLEWSKI
Usability expert
FORMS JUST
STAND IN OUR WAY.

68. Is the information NECESSARY?
‣ Keep
‣ Cut
‣ Postpone
‣ Explain

69. Be CONVERSATIONAL.
Meeting Information
Please include day(s), time(s), and location(s) of your meetings.
When and where are your meetings held?

70. Keep question and answers CONSISTENT.
Choose your preferred t-shirt color
Blue
Red
What color hats do you want?
Red
Blue

71. Keep question and answers CONSISTENT.
Choose your preferred t-shirt color
Blue
Red
Choose your preferred hat color
Blue
Red

72. Provide POSITIONAL FEEDBACK.
Page 1 of 3: Your Information

73. Provide POSITIONAL FEEDBACK.
Page 2 of 3: Your Vehicle Information

74. Provide POSITIONAL FEEDBACK.
Section 1 of 3: Event Details

75. Provide POSITIONAL FEEDBACK.
Section 2 of 3: Catering Details

76. Use the right ELEMENTS.
‣ Checkboxes
‣ Radio Buttons
‣ Dropdowns

77. Use PAGE LOGIC when applicable.
The best way to speed up
form completion process is
to not ask the question.

78. QUESTION EVERYTHING
when moving a paper form online.
The best way to speed up
form completion process is
to not ask the question.

79. Fill out your OWN FORM.
OWN IT.

80. PEOPLE

81. RELATIONSHIPS

82. COMMUNICATION

83. NEWS POST
demo

84. THANK YOU.
Valarie Martin Stuart
OrgSync UI Designer