OrgSync Connect 2014: Design Tips & Tricks

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