ORGSYNC CONNECT
designTIPS & TRICKS 2014
YOUcan delight your users
The UI team wants to delight your users, too.
CODE NAME: Longhorn
LESS MORE=
Navigation
Navigation
Navigation
Navigation
Navigation
Navigation
Navigation
Page Layout
BEST PRACTICE
Less is more.
If you’re not using modules in a portal, turn them off.
BEST PRACTICE
communityBRANDING
don’t be AFRAID of color
use your POWERwisely
use your POWERwisely
#C0FFEE#DECAF5#0079FF
#BADA55
Community Logo and Profile Image
Community Logo and Profile Image
Community Logo and Profile Image
Branded Emails
Branded Emails
Branded Emails
Branding Official Departments
Branding Student Organizations
or student design clubmight be able to help
your graphics department
Logging In
Logging In
BEST PRACTICE
Contact your campus consultant to set your campus colors or to change your primary logo.
Update your community profile picture in your community settings.
BEST PRACTICE
Turn on branded emails (if desired) in your community settings.
BEST PRACTICE
Brand official school departments to help them stand out from student organizations.
BEST PRACTICE
Link to your custom login page.
BEST PRACTICE
it’s a multi-deviceWORLD
Remember that you’re creating content for multiple devices.
BEST PRACTICE
Use formatting tools sparingly.
BEST PRACTICE
Input text, not just images or links.
BEST PRACTICE
designing withTEXT
Creating Content
Avoid underlining text for emphasis.
Your readers will wonder why the link is broken.
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.
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.
Don’t underline text unless it’s a link. Even then, it’s not necessary.
BEST PRACTICE
Left-aligned text is usually best.
BEST PRACTICE
Save the uppercase text for short subheads.
BEST PRACTICE
Creating Content
Creating Content
understandingFORMS
GET EXCITED! It’s time to fill out a form!”Said no one ever.
“
FORMS SUCK.““
LUKE WROBLEWSKIUsability expert
““
LUKE WROBLEWSKIUsability expert
If you don't believe me,try to find people who like filling them in…
““
LUKE WROBLEWSKIUsability 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....
““
LUKE WROBLEWSKIUsability expert
FORMS JUST STAND IN OUR WAY.
Is the information NECESSARY?
‣ Keep ‣ Cut ‣ Postpone ‣ Explain
Be CONVERSATIONAL.
Meeting InformationPlease include day(s), time(s), and location(s) of your meetings.
When and where are your meetings held?
Keep question and answers CONSISTENT.
Choose your preferred t-shirt colorBlueRed
What color hats do you want?RedBlue
Keep question and answers CONSISTENT.
Choose your preferred t-shirt colorBlueRed
Choose your preferred hat colorBlueRed
Provide POSITIONAL FEEDBACK.
Page 1 of 3: Your Information
Provide POSITIONAL FEEDBACK.
Page 2 of 3: Your Vehicle Information
Provide POSITIONAL FEEDBACK.
Section 1 of 3: Event Details
Provide POSITIONAL FEEDBACK.
Section 2 of 3: Catering Details
Use the right ELEMENTS.
‣ Checkboxes ‣ Radio Buttons ‣ Dropdowns
Use PAGE LOGIC when applicable.
The best way to speed up form completion process is to not ask the question.
QUESTION EVERYTHINGwhen moving a paper form online.
The best way to speed up form completion process is to not ask the question.
Fill out your OWN FORM.
OWN IT.
PEOPLE
RELATIONSHIPS
COMMUNICATION
NEWS POST
demo
THANK YOU.
Valarie Martin Stuart OrgSync UI Designer
