Ho Homework 1 Revie view No screens Say your name Prof. Lydia Chilton COMS 4170 3 February 2020
Interfaces display information in a way that helps users accomplish a goal . GMail Pine text-based email client 2
Seven tools for visually indicating importance Conceptual grouping Location Whitespace Size Images Contrast Color 3
What are the conceptual groups in Gmail? Menu Contact/ Emails chat 4
What are the conceptual groups in YouTube Content Watch it next Metadata: title, description 5
Most HW deductions were taken for two things • CSS • Designing Information Layout
CSS selectors All <div> elements get this style At most one <div> elements get this style Some <div> elements get this style 7
Elements get their most specific CSS style id is more specific than class . The more IDs, classes, and element names are involved, the more specific 8
CSS Connectors .class1.class2 = “has class 1 AND class 2”
A good way to override a CSS style. Typically, by adding your own class, And making a more specific CSS selector
Users can’t focus on everything at once. They have a spotlight of attention. 1 2 A visual hierarchy of information allows designers to guide users’ attention . 3 12
Most HW deductions were taken for two things • CSS • Designing Information Layout
Group rela Gr lated in informatio tion in into 3 ch chunks You are cordially invited to Robert You are cordially invited to and Alexandra’s delectable after Robert and Alexandra’s delectable after dinner dinner party. Wine and nibbles will party. be served. When: February 20 th , Wine and nibbles will be served. 2018 at 9:30pm. Where: the pad. If you need directions, ping us. Kindly When: February 20 th , 2019 at 9:30pm. let us know if you will be attending Where: the pad. If you need directions, ping us. by February 1 st . Kindly let us know if you will be attending by February 1 st . 14
In In eac each h chunk hunk, dec decide ide wha what’s im impo portan ant t to em emphas phasiz ize e – us use e 2 or more e “t “tools” You are cordially invited to You are cordially invited to Robert and Alexandra’s Robert and Alexandra’s delectable after delectable after dinner party. dinner party. Wine and nibbles will be served. Wine and nibbles will be served. When: February 20 th , 2019 at 9:30pm. When: February 20 th , 2019 at 9:30pm . Where: the pad. If you need dir, ping us. Where: the pad . If you need directions, ping us. Kindly let us know if you will be attending Kindly let us know if you will be attending by February 1 st . by February 1 st . 15
Ma Make s sure t the v visual i informa ormation on h hierarchy pa passes es the he squi quint tes est. You are cordially invited to Robert and Alexandra’s 1 delectable after dinner party. Wine and nibbles will be served. When: February 20 th , 2019 at 9:30pm . 2 Where: the pad . If you need directions, ping us. Kindly let us know if you will be attending by February 1 st . 3 16
Answer with full credit: Good: There are three groups. Each group has the most important thing emphasized The emphasis is done using two tools – contrast and size 17
Fixable answer #1 Good: There are three groups. Problem: There’s too much in group 2. It’s all emphasized Fix: Break up group 2 18
Fixable answer #2 Good: There are three groups. Nice-sized concepts Problem: There’s no focus within the group. Only one heuristic is being used Fix: Be selective on what to prioritize 19
Let’s fix it! Cold wash machine Cold wash machine What the concept? Do NOT dry clean Do NOT dry clean Washing instructions Do NOT bleach Do NOT bleach Wash dark separately Wash dark separately Wash inside out Wash inside out Line dry in shade What the concept? Do NOT tumble dry Line dry in shade Drying instructions Do NOT tumble dry Warm iron on reverse Warm iron on reverse What the concept? 100% Cotton 100% Cotton Made in China Manufacturing instructions RFC# 910911-040 Made in China RFC# 910911-040 20
Visual Information hierarchy guides users’ attention 1 1 2 2 3 3 21
Recommend
More recommend
