This document discusses core principles and considerations for designing interfaces, including:
- The language of interfaces includes graphical elements like layout, objects, type, and color as well as interactive elements like affordances, heads-up displays (HUDs), feedback, input, and navigation.
- Interactive interface design focuses on "doing" through affordances, buttons and links that look interactive, and subtle cues when user action is or isn't needed.
- Effective navigation orders complex pages through global, local, contextual, and secondary navigation elements.
- Graphic design principles like hierarchy, layout, type, color, line, relationships and progression are important for understanding. Minimalism, cheats and hacks can
In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.
This is a lecture I gave to my User Experience class at General Assembly on Interaction Design. It covers a brief history, and the various approaches that are being used.
I borrowed from other sources to a degree, which I have cited extensively.
This is a talk given to my class on User Experience by Jen Ruffner, a Product Manager on the art of optimization.
It is critical for modern designers, product managers and start-up folks ot understand how to think about designing and executing tests.
How to understand how design and business fit together (and don't). Understanding how a market changes everything about how you design.
From my General Assembly User Experience Class Series
In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.
This is a lecture I gave to my User Experience class at General Assembly on Interaction Design. It covers a brief history, and the various approaches that are being used.
I borrowed from other sources to a degree, which I have cited extensively.
This is a talk given to my class on User Experience by Jen Ruffner, a Product Manager on the art of optimization.
It is critical for modern designers, product managers and start-up folks ot understand how to think about designing and executing tests.
How to understand how design and business fit together (and don't). Understanding how a market changes everything about how you design.
From my General Assembly User Experience Class Series
Designing Structure Part II: Information ArchtectureChristina Wodtke
Part two on Designing Structure for my General Assembly class on User Experience is about Information Architecture. We cover why classification is important, types of classification and trends in IA.
A series of talks I gave sponsored by the Yahoo! Developer Network, in London and Berlin, reviewing the history of UX design patterns and delving into the social design patterns project, isolating 5 principles, 96 patterns, and 5 anti-patterns
What do UX specialist and PHP developers have in common? Probably more than you are aware.
I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info.
So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.
Visual design is more than styling. It is function. And not only because it communicates, but also because it makes us feel. And between feeling and communication, people find things easier to use.
This open forum panel discussion for AIGA UCLA was presented by Lynn Boyden, Chris Chandler, Jose Caballer and Lara Fedoroff. Deemed "UX for Dummies" this discussion focused on the definition, process, deliverables and challenges of User Experience verses Information Architecture.
Our friends at UXPin are giving Awwwards users this fantastic e-book for free, explaining the 10 most successful web design techniques. Check out the analysis of 166 examples with tons of tips and resources!
In this talk, I outline the way people naturally scan Web pages and explain how you can guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. You'll be taken through several before and after examples with explanations of how a page's content was prioritized, why, and how that priority is being communicated to users so they don't need to rely on chance to use your Web application.
Designing Structure Part II: Information ArchtectureChristina Wodtke
Part two on Designing Structure for my General Assembly class on User Experience is about Information Architecture. We cover why classification is important, types of classification and trends in IA.
A series of talks I gave sponsored by the Yahoo! Developer Network, in London and Berlin, reviewing the history of UX design patterns and delving into the social design patterns project, isolating 5 principles, 96 patterns, and 5 anti-patterns
What do UX specialist and PHP developers have in common? Probably more than you are aware.
I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info.
So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.
Visual design is more than styling. It is function. And not only because it communicates, but also because it makes us feel. And between feeling and communication, people find things easier to use.
This open forum panel discussion for AIGA UCLA was presented by Lynn Boyden, Chris Chandler, Jose Caballer and Lara Fedoroff. Deemed "UX for Dummies" this discussion focused on the definition, process, deliverables and challenges of User Experience verses Information Architecture.
Our friends at UXPin are giving Awwwards users this fantastic e-book for free, explaining the 10 most successful web design techniques. Check out the analysis of 166 examples with tons of tips and resources!
In this talk, I outline the way people naturally scan Web pages and explain how you can guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. You'll be taken through several before and after examples with explanations of how a page's content was prioritized, why, and how that priority is being communicated to users so they don't need to rely on chance to use your Web application.
In the presentation I point out how the ability of visual communication to express core customer and brand messages across multiple forms of media has not changed much. However, shifts from locomotion to services, from pages to rich interactions, from sites to content experiences, and from content creation by webmasters to everyone online have introduced unique opportunities and constraints that the presentation layer of Web applications needs to account for.
Design Patterns: Defining and Sharing Web Design Languages Luke Wroblewski
In my Design Patterns: Defining and Sharing Web Design Languages talk at South by Southwest 2007 I discussed how to put design patterns to use within Web applications with an overview of the what, why, and how of shared online design pattern libraries.
BarkleyREI & Hannon Hill Webinar - Responsive Web Designhannonhill
In this webinar, Hannon Hill partner BarkelyREI will show how Chapman University used Responsive Web Design for their website redesign this spring and how they used Cascade Server to accomplish this. Highlights will include a discussion of the advantages, considerations, and implications for the website redesign process if you choose to implement RWD.
4 Strategies for Developing a Unified Digital ExperienceHanson Inc
How should brands, in 2012, present a unified digital experience to their customer? Here's a SlideShare, by Hanson Inc's Mike Osswald, of four top-line strategies to address right now before getting down to the smaller stuff.
www.hansoninc.com
The 2013 Content Management System Report Card-IdealwareIdealware
With the growth of social media, Web 2.0, and mobile devices, people are using websites in ways (and locations) like they never have before. How have the systems we use to create websites kept up? Based on the new Idealware report, a Consumers Guide to Nonprofit Content Management Systems, learn what 11 of the most popular open-source and proprietary CMSs have done to address the demands of today’s Internet: who passed, and who failed?
Social Apps have arrived - how do you transform your ISV application to leverage these innovative principles, and what features do you need to build to get there? Join us for an interactive workshop that will give you first-hand experience in a new process we are introducing to our ISV partners. You will brainstorm on a sample application, and learn how to generate innovative ideas that address your customers needs in a forward-thinking way. After this session, you will be able to apply these same principles to start realizing your own Social App vision.
If you build it, will they become social? Implementing Enterprise 2.0 using S...Edgewater
During the 2010 AIIM Expo + Conference in Philadelphia, April 20th-22nd, Ori Fishler, conducted a short presentation on the social integration capabilities of SharePoint 2010. In this thought provoking session, Ori highlighted opportunities for portal upgrade into an enterprise 2.0 emergent environment with SP 2010 and the best ways to make it a success and drive adoption.
Comunication & Storytelling for Product Managers (and anyone else)Christina Wodtke
Half-Day Interactive Workshop
“Get ready to actively participate in your transformation from product manager to product leader”
A product manager rarely has any authority beyond what they can talk people into, thus we need to become really strong communicators. In this half-day interactive workshop, we’ll look at the three kinds of communication: managing up, team communications, and the very important roadshow for getting other groups onboard with your vision. We will use the power of story for formal communication and a combination of techniques from NVC (Harvard’s negotiation project) and the GSB’s “touchy feely” class to make sure your message gets through, and that we are listening effectively.
This special half-day training workshop, with product author and lecturer, Christina Wodtke, is specifically designed for product managers who are looking to really level up their communications skills and who want to use story-telling to effectively communicate with others.
The problem with unexpected consequences is that they are unexpected. The time of "move fast and break things" is over, as we have broken everything from hearts to democracy.
It's time for designers, along with their partners - engineers and business - to embrace a new long term approach to bringing change into the world, that focuses less on disruption and more on evolution. In this talk, Christina will explore various approaches to designing more robust and compassionate change.
Given at Lean Startup 2017.
Using Lean to Create High-Velocity Teams (Until 2:00pm)
Great products come from great teams, yet very few companies try their hand at at team design. Too often we rip job descriptions off the web, throw people together without preamble, then simmer in passive-aggressive discontent until someone eventually fires the person we’ve all been rolling our eyes at. Or worse, we avoid firing him until everyone good quits. Can Lean show us a better way to get things done?
Christina Wodtke teaches Lean Entrepreneurship at the university level and coaches executives how to create high-performing organizations. From this intersection she has helped a new kind of team emerge: the Lean Team.
What is the Lean Team?
-Hypothesizes about how we do our work, not just what work we’ll do.
-Holds no ao assumptions about the best way to get things done.
-Is constantly iterating.
-Commits to peer-to-peer accountability and coaching.
-Embraces diversity in experience and culture.
-Engages in formal reflection to increase learning velocity.
The best teams don’t just use Lean Startup methods to create breakthrough products. They use the learning cycle to reduce interpersonal conflict, communicate effectively, and get more done. In this breakout session, we’ll look at the best practices that high velocity, high-learning teams use, and how you can bring them back to your company.
#enterprise #startup #leanteams
This was given as a 1.5 hour lecture to the MDES students at CCA, removing the opening game play and the later exercise. It's better at 2-3 one hour lectures, plus game play.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
http://creativecommons.org/licenses/by-nc-sa/4.0/
In school we learn to write as a fundamental building block for communication, and drawing is shunted away to “art class.” But scientists like Darwin and Marie Curie, presidents from Jefferson to Obama, and mathematicians, choreographers, and composers all have used sketching to give form to their ideas. Words are abstract and ambiguous, and can lead to miscommunication. We say a picture is worth a thousand words, so why do we discard this critical tool?
Drawing is not just for so-called creatives. Drawing allows you to ideate, communicate, and collaborate with your team. Stop talking around your vision, and get it on the whiteboard where your team can see it! Whether you’re an entrepreneur, an engineer, or a product manager, drawing will make you better at your job. In this workshop, you will go from “can’t draw a straight line” to visually representing complex ideas. First, we’ll demystify the act of sketching. Through a series of activities and exercises, we’ll cover the fundamental building blocks of visual communication. You’ll learn easy ways to draw the most common images, from people to interfaces. Next, we’ll tackle making storyboards, product flows, and interfaces. We’ll finish by working with charts, mental models, and canvases. This is a hands-on workshop, so come with paper, pencils, and pens, and be ready to make your mark.
Given at UXDC
From Starchitects to Design Gurus, the lone designer-hero has been our model for creating impact. But it’s a complete lie. The complex software, smart devices and connected information environments we create require multidisciplinary teams. So we must spend a lot of time getting teamwork right, right?
Sadly, no.
Instead we rip job descriptions off the web, throw people together without preamble, simmer in passive-aggressive discontent until we eventually fire the person we’ve all been rolling our eyes at. Or worse, we avoid firing him until everyone good quits.
It’s time to give teams the same attention and craft we give our products. Christina will share the lessons from top companies in the Silicon Valley for you to take back to your teams. It doesn’t matter if you are a manager or a peer leader, these approaches will make your team thrive. Awesome products come from awesome teams, so it’s time to stop doing business as usual and design a team for impact.
Teaching Game Design to Teach Interaction DesignChristina Wodtke
All educators seek the magic trinity of attention, comprehension, and retention. For interaction design educators, the struggle to achieve these goals is even greater. Hopeful designers enter the field with lofty aspirations, yet they still need to learn the fundamental principles of design and build the core skills of an interaction designer. While keeping design students engaged is undoubtedly a challenge, there is a medium that allows students to internalize the fundamentals of design by experiencing them.
Games.
Games have become ubiquitous in our culture. They are inherently engaging. Some are good and some are… not. By teaching design students how to design games, educators expose their students to the basics of interaction design in ways that the students can experience themselves. Concepts like affordance, skill building, storytelling, and emotion become real rather than just conceptual. Altering the parameters of their games helps students feel the effect these concepts have on their games.
This method has the potential to improve interaction design education across the board by ensuring that design graduates have internalized the fundamentals by the time they are ready to enter the field. What’s more, any design educator can learn to teach interaction design by teaching their students how to design games. After all, it’s fun!
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
12. On Subtlety
When you don’t want to interrupt an action, be subtle (think of footnotes). If they are
reading, don’t bother them.
When you need to prompt an action, subtlety will send you to the poor house.
Tell your users what to do. Clarity is relaxing, not annoying.
13. HUD
Heads Up
Display:
Information
user needs
nearby to be
effective
21. Navigation
IA made visible
“Like putting an Armani suit on Attila the Hun, interface design only tells how to
dress up an existing behavior.” – Alan Cooper
21
22. Most IA is invisible
• A lot of work no one
sees
• Synonym rings, etc
• If it was seen, is would
be too much
• We show only a subset
22
23. The magic number?
• 13 tabs– no one
saw them. Six
tabs, everyone saw
them
23
24. Global links
But not everything is simple
Related Web search
Services inbox
masthead Log out
Mail tools
upsell
Folders
And there
inbox Write mail
tip
ads
isn’t even upsell ad
Other
properties
content!
Related
Services
Mail tools
ad
24
26. Understanding Navigation
Message and Access
Global Navigation Where Am I?
Local Navigation
What's Nearby?
Content Lives Here, What's Related
With Contextual
Navigation Inline
To What's Here?
Or Separate.
26
27. Global navigation
• Where you are
– Brand/masthead
• Where you can go (site offering)
– Top level categories
• Safety nets
– Where’s my (shopping cart/account/help???)
27
31. Local Navigation
• I’ve started down the path
• Now what?
– What are the categories of items?
– What are the siblings of what I see?
– What are the subcategories?
31
39. Pagination
Useful to reduce page
download speed and
cognitive overload.
Annoying for printing.
Impossible to predict what
you’ll get
Users would rather scroll
than click
39
47. You can make it helpful
“After testing several
different sitemap designs
on users, I decided to try
putting one on every page
of my small Columbian
web site. I then decided to
track how often it was
used for navigation. It
turns out the sitemap is
used for over 65% of all
navigation done on the
site.”
-- Usability Report by Peter Van
Dijck of poorbuthappy.com (Guide
to Columbia)
http://www.webword.com/reports/sitema
p.html
47
48. Conventions
It is certainly
probable, then, that
placing these objects in
expected locations would
give an e-commerce site
a competitive edge over
those that do not…
-- Examining User Expectations for the
Location of Common E-Commerce
Web Objects
Usability News
4.1 2002
48
61. LOOK
LOOK LOOK LOOK
LOOK
Law of Focal Point
The idea that a point of interest, something emphasised or different will
catch and hold the viewers attention (Chang, 2002).
HIERARCHY GIVES CLARITY
83. Cheaters Tricks
• One color, with variations. One accent. Period
• Use a generator site
http://www.colourlovers.com/
• Use nature
http://boxesandarrows.com/natural-
selections-colors-found-in-nature-and-
interface-design/
127. Minimalist Design
• Only use one font. Preferably helvetica.
• Only use three, all very very different. Perhaps a
fourth for footer text.
• Only use one color, with variations, and one “accent”
color.
• Turn on the grid (if you are using photoshop, etc)
• Never align center.
• Don’t use stock photography, unless you have
awesome taste. It has no soul.
• Have a hierarchy
128. Cheats
• Patterns
• Kits like this
• Libraries
• Odesk
• Conference proceedings
You can’t buy taste
129. Homework
• Analyze two competitors, one complementor
• Do wire frames for three key screens
• Optional: begin interfaces