system of real-world objects that make up a user’s mental model of the problem. (Objects are derived directly from the GOALS of a system…and GOALS should be derived from RESEARCH.) 2. Ensures the anatomy of every object is mapped before sketching, wireframes, interaction design, or visual design begins. 3. Roots every interaction in a well-defined direct object. 4. A definition: the missing part of the UX process that defines the NOUNS in our communication workshop only
system of real-world objects that make up a user’s mental model of the problem. (Objects are derived directly from the GOALS of a system…and GOALS should be derived from RESEARCH.) 2. Ensures the anatomy of every object is mapped before sketching, wireframes, interaction design, or visual design begins. 3. Roots every interaction in a well-defined direct object. 4. A definition: the missing part of the UX process that defines the NOUNS in our communication workshop only
mental model while they are operating in the given problem area. • They are an IA and a content strategist’s “content types”… • They are a database engineer’s “classes”… • Psychologists and philosophers call them “objects.” • Users call them “things”… • (Alexa VUI designers call them “slot types”…)
are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema.
are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema. Lesson 4: I understand of ownership of objects.
are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema. Lesson 5: I understand various perspectives of objects. Lesson 4: I understand of ownership of objects.
are separate from me. Lesson 2: I can understand the world by categorizing similar objects, assimilating new things into my existing schema. Lesson 3: I can build greater understanding of the world be taking new things and adjusting (accommodating) my schema. Lesson 5: I understand various perspectives of objects. Lesson 4: I understand of ownership of objects. Cause and effect multistep procedures
water dogs shoes mountain mountain fun pain Switzerlan d north childhood nature boots shorts goretex boots peace mountain mountain trees river friends boots purple trees cliff boots dirt fir trees boots ascent shade rocks boots view nature mountain boot shoes mountains dirt rocks trees trees shoes trail boots rocks hill trees mountain boots trees camping camping camping walking walking climbing uphill exhausting hot green
object to other objects based on relationships, associations, similarity, and even user-preferences. GLOBAL NAV Navigation that transports to the user via a persistent, unchanging group of links.
object to other objects based on relationships, associations, similarity, and even user-preferences. GLOBAL NAV Navigation that transports to the user via a persistent, unchanging group of links. The OG
object to other objects based on relationships, associations, similarity, and even user-preferences. GLOBAL NAV Navigation that transports to the user via a persistent, unchanging group of links. The OG your way underrated new bestie
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
locations. • Introduce, promote and sell our specialty hot sauces. • Present our mixologists as the experts that they are! Encourage a whole new generation to become hot sauce mixologists. • Help build appreciation and exemplify our expertise in the art of hotsaucery through classes and workshops (online and in store) as well as free online recipes. • Teach about products we sell in the store, like specialty ingredients, tools, and bottles.
images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food
work here Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food
work here Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location
work here Classes calendar Mixologist creator Locations available at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location
at Class that teaches it Mixologist mentor Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Location available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
at Class that teaches it Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Locations available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location Related Recipes Locations Sauces Mixologist s Ingredient s/tools Classes Recipes
here Classes calendar Mixologist creator Locations available at Class that teaches it Sauces created ingredient s/tools loved Classes teaching recipes posted Location works at Locations available at related ingredient s Recipes that include Ingredient s/tools provided Recipes taught Mixologist teacher Sauce (parent) Ingredient s/tools needed Classes that feature Mixologist author Name Street image Address distance from user contact info inside images name descriptio n (why we love it) price images tag/ category Name descriptio n bottle $ shot heat index price Name bio headshot years with us twitter handle title descriptio n price type (workshop, ongoing class) date time Name date created image recipe content gallery of sauce on food Location Related Recipes
works at Locations Mixologist teacher Sauce (parent) Ingredient s/tools Mixologist author Name Street image Address distance from user inside images name descriptio n (why we love it) price images tag/ category Name bottle $ shot price Name headshot years with us twitter handle title type (workshop, ongoing class) date time Name date created image gallery of sauce on food Location
works at Locations Mixologist teacher Sauce (parent) Ingredient s/tools Mixologist author Name Street image Address distance from user inside images name descriptio n (why we love it) price images tag/ category Name bottle $ shot price Name headshot years with us twitter handle title type (workshop, ongoing class) date time Name date created image gallery of sauce on food Location Get Direction s Buy Share Share Share Send testimon y upvote? Sign up/ register invite friends? add to box print shopping list Buy
shot heat index price gallery of sauce on food description description gallery of sauce on food gallery of sauce on food gallery of sauce on food gallery of sauce on food Locations available at Locations available at Locations available at Class that teaches it Class that teaches it gallery of sauce on food gallery of sauce on food
creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price
creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price CHEAPEST FIRST MILD HOT
OO programming, or anything to do with computers. It is about how people perceive and act on the world. We—end users, everyone—have evolved to deal with objects since the dawn of time.” -Dave Collins, in Designing Object-Oriented User Interfaces, 1995 PEOPLE THINK IN OBJECTS!
within your problem domain. What are the main things that it is made out of? 2. Look at user goals, company goals, vision documents, case studies, and user interview transcripts. What are the nouns that get used over and over again? 3. Watch out for super fuzzy nouns. Some legit objects might be intangible (like “value proposition” or “campaign” or “route”) but they should be definable. 4. In fact, bonus points for writing a clear definition for each object! 5. Ok, are their a few object that ARE special and unique to your application? Put a star by those. Let’s talk. OBJECTS ON BLUE!
instances (churned out by a CMS, piped in from an API, or generated by your users) • They need structure! Core content elements, metadata…and relationships with other objects. • They need consistency. They are what the user came for (articles, events, friends, students, lessons) so they need to be recognizable. Name CELEB Image Bio B’day # of fans Gender?
Image Bio # of fans Gender? Justin B David D Katie S Bieber has won numerous awards, including the American Music Award for Artist of the Year Bio Bio B’day 3/1/1994 400k male 8/7/1960 140k male 4/8/1980 340k female
of paper, a whiteboard, or a program like Axure or Omnigraffle, write each object on a node 2. Cluster more closely related objects together. 3. Draw out the strongest connects, the most obvious ones. This does not need to be exhaustive. We will cover all the relationships when we tackle nested objects. 4. Label the arrows with simple verbs like: OBJECTS ON BLUE! has 1 parent has 0 to many includes many creates many
strings (without logic, requirements) • Media like images, videos, illustrations, icons, etc • Common Core Content Elements: • Name/title • Profile Pic • Bio/description • Article body (*might specify as “rich text” if contains its own media and formatting) Core Content workshop only
sort and filter through a list of objects • Have formatting and/or taxonomy requirements • Common Metadata: • timestamp/date • size • category • popularity Metadata workshop only
specific mechanism for sort/filter. Could provide navigation to list of more of the same type of object. The meat Text strings and media Maybe size restriction? Could be keyword searchable… Does not provide navigation. Core Content Metadata workshop only
time, start cataloging the core content and metadata that should make up each object. 2. One element on each sticky! List elements in column and don’t worry about order. We’ll get to that later! 3. Don’t get too hung up on Core Content vs Metadata. But remember, if a user might sort and filter by this element, put it on RED! 4. If an element comes up that’s also another object put it on a BLUE STICKY! OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO!
a relationship • Products similar to this product (movies similar to this movie) •Articles related to this neighborhood •People nearby this music venue • Objects that help make up other objects • The songs in a album • The reviews on a tourist attraction • The jobs in a department Nested Objects workshop only
• Expresses relationship between two objects • Often is a 1 to 1 relationship • Common Metadata Objects: • Author (person who created this) • Location (if location is more than coordinates - Restaurant, City, Venue) • Category or Genre that has been “upgraded” (has its own metadata and/ or core content) Nested Object serving as Metadata workshop only
Actor director NESTED OBJECT AS METADATA Genre detail: Comedy Gallery of famous clips follow # of followers top movie top movie top movie top actor top actor top actor workshop only
Actor director NESTED OBJECT AS CROSSLINKING Actor detail: Dana Carvey Profile Pic follow # of followers top movie top movie top movie similar actor similar actor similar actor workshop only
user to a filtered list of that object. Examples: Date, size, ratings Actionable! Takes user to a filtered list of that object. Examples: Author, category, location Live metadata that is also an object, part of the system in it’s own right. Examples: Author, category, location workshop only
earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO!
earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO! recipes OK
earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO! recipes OK recipes that this mixologist posted BETTER
earlier? Taking one object at a time, have a quick brainstorm with your team about how EVERY OBJECT could nest inside that object. 2. Remember think about how that object will nest inside of itself! (Products > Similar Products) 3. Reference the relationship on the sticky as well. OBJECTS ON BLUE! CORE CONTENT ON YELLOW! METADATA ON RED! NESTED OBJECTS ON BLUE, TOO! recipes OK recipes that this mixologist posted BETTER recipes that this mixologist posted Main location of this mixologist AWESOME
descriptio n bottle $ shot heat index price gallery of sauce on food module elements at top! Make sure to include metadata that a user might sort or filter by. detail view content. Extra stuff that can be behind a click. STEP 4: SKETCHING W/ STICKIES One-to-many nested objects that might have a ton of instances!
needs to be near the top and bottom of page. 2. Think about grouping. What elements should be together? 3. Try and keep stickies in one column “forcing prioritization.” 1. A way to think about it: what elements should be on the smallest module? Ok, those should be near the top of your column. And if the module was bigger? What elements would also be included? And finally, what elements can be saved for the detail view? 4. Think about nested objects that might have dozens (or hundreds of instances.)
time, brainstorm all actions that might associate with that object. What will a user want to DO to that object? 2. Feel free to invent a notation system that makes sense for organizing CTAs. Common notations: 1. #Phase2 for CTAs that are ambitious 2. #Admin #NewUser #PowerUser for user type. 3. #Research! for CTAs that need some validation OBJECTS ON BLUE! CORE CONTENT ON YELLOW! NESTED OBJECTS ON BLUE, TOO! CTAs on GREEN!
rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? where might the CTA(s) live? user 1 user 2
rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? where might the CTA(s) live? How much design effort is needed? user 1 user 2
rate/star ask question answer question follow copy WHY? WHEN? WHERE? LOE Value what is the purpose/ goal? any special circumsta nces? where might the CTA(s) live? How much design effort is needed? How critical is this to launch? user 1 user 2
shot heat index price gallery of sauce on food Share upvote? Buy description description gallery of sauce on food gallery of sauce on food gallery of sauce on food gallery of sauce on food Locations available at Locations available at Locations available at
creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price
creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price Mixologist creator Name bottle $ shot heat index price CHEAPEST FIRST MILD HOT
Module? Detail? Container? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding?
Module? Detail? Container? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding? Does the object need it? Is the container actually another object’s detail? Filter/sort? Curated?
important elements? Sizes? Nested modules? (author inside of article module) Does the object need a detail? Page/url? Overlay/module- expanding? Does the object need it? Is the container actually another object’s detail? Filter/sort? Curated?
team member pick an object to sketch. 2. 15 minute sketching sprint! FAST! When you run across a nested object…just Black Box it! Your teammate is sketching it! 1. Your object might not have a detail view. 2. Your object might not have a dedicated list view. Start thinking about how groups of your object might show up on other objects’ detail pages. How would they be filtered and sorted? 3. Present sketches to your team. Rinse and Repeat.
sophiavux
root_recruit
kazuakiebe
akiramotomura
isaikaori
zakkerooni
takaikanako
yamatoiizuka
transit_kix
tsuyoshika
muture
jouykw
shingo2000
lara
yeseniaperezcruz
soudai
rmw
garrettdimon
bkeepers
ufuk
bluesmoon
quramy
addyosmani
cherdarchuk
erikaheidi
