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.
In my Web Form Design Best Practices talk at the Technical Communication Summit in Minneapolis, MN I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
In my Best Practices For Web Form Design talk at IA Summit 2007 I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
Social Web Application Design. In particular: Comparison of how we think of “community” applications today vs. five years ago, Definitions of what and who defines social software, Overview of the interaction elements commonly found in social Web applications, Discussion about the pros and cons of enabling community features within products, Outline of best practices for designing social software (culled from my experiences working on products for eBay, Yahoo!, and more).
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.
The Top Ten Elements Your Noprofit's Strategic Website Should Haveguidecreative
@keljar @guidecreative Your website is more than just a pretty picture. It should be created for your unique audience as a tool to engage, and ultimately inspire action. Artistic talent alone is not enough, you need a web design rooted in a clear strategy and driven by results.
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.
In my Web Form Design Best Practices talk at the Technical Communication Summit in Minneapolis, MN I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
In my Best Practices For Web Form Design talk at IA Summit 2007 I walked thorugh the importance of Web forms and a series of design best practices culled from live to site analytics, usability testing, eye-tracking studies, and best practice surveys.
Some of the topics I discuss and provide patterns for are: label alignment, required form filed, input field sizes, content grouping, primary & secondary actions, help text & tips, dyanmic help systems, inline validation, error messages, progress indicators, success messaging, progressive disclosure, gradual engagement, tabbing, flexible data inputs, smart defaults, paths to completion, selection dependent inputs, and more...
Social Web Application Design. In particular: Comparison of how we think of “community” applications today vs. five years ago, Definitions of what and who defines social software, Overview of the interaction elements commonly found in social Web applications, Discussion about the pros and cons of enabling community features within products, Outline of best practices for designing social software (culled from my experiences working on products for eBay, Yahoo!, and more).
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.
The Top Ten Elements Your Noprofit's Strategic Website Should Haveguidecreative
@keljar @guidecreative Your website is more than just a pretty picture. It should be created for your unique audience as a tool to engage, and ultimately inspire action. Artistic talent alone is not enough, you need a web design rooted in a clear strategy and driven by results.
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websitesguidecreative
@keljar @guidecreative Your website is more than just a pretty picture. It should be created for your unique audience as a tool to engage, and ultimately inspire action. Artistic talent alone is not enough, you need a web design rooted in a clear strategy and driven by results.
The good, the bad and the ugly. Not Kentucky or Louisville find similar for Kentucky and study for web design business: United States District Court Northern District Of Illinois (1) fees and related nontaxable expenses. (2) "Respondent" means a party from whom the movant seeks payment lawyer, paralegal, or other person. (4) The supreme movant shall provide the respondent with the above information within 21 days of the judgment or settlement agreement upon which the motion is based, unless the court sets a different schedule.(2) the total amount of fees and/or related nontaxable expenses that the respondent deems should be awarded (If the fees are contested, the respondent shall include a similar table giving district respondent’s position as to the name, compensable hours, appropriate rates, and totals for each biller listed by movant.);(A) whether the motion for ireland fees and expenses will be based on a judgment or on a settlement of the underlying merits dispute, and Chicago illinois (B) if the motion will be based on a judgment, whether respondent has appealed or intends to appeal that judgment. The parties shall cooperate to irish complete preparation of the joint statement no later than 70 days after the entry of the judgment or settlement agreement on which the motion for fees will be based, unless the court orders otherwise. (g) Motion for Instructions. A motion may be filed seeking director instructions from the court where it appears that the procedures set forth in this rule cannot be linkedin followed within the time limits established by the rule or by order of court because of— prohibition
(2) the temporary failure of one or more of the parties to provide information required by the court rule, or northbrook (3) director motion shall state the court’s order.. "Pfingsten, das liebliche Fest", speaks of Pentecost as a time of greening and blooming in fields, woods, hills,
Accessibility is hot button topic for many for a variety of reasons. But it doesn't need to be expensive, difficult or impeded innovation if we follow some simple WCAG guidelines. These basic steps overcome a majority of common accessibility challenges.
Brief presentation covering 5 things the attorneys and firms in the National Association of Consumer Advocates (NACA) can do to increase their search engine, and social media presence on the internet.
'Comfort Media' Solution for Winston RussiaGoodKarma.me
We develop new ‘deep-communication’ web platform
Creating new vector of brand positioning - moving from promo to image
Re-activating CRM database - building up collaborative framework
Kill The Noise - Prioritizing Content for Strategic Nonprofit Websitesguidecreative
@keljar @guidecreative Your website is more than just a pretty picture. It should be created for your unique audience as a tool to engage, and ultimately inspire action. Artistic talent alone is not enough, you need a web design rooted in a clear strategy and driven by results.
The good, the bad and the ugly. Not Kentucky or Louisville find similar for Kentucky and study for web design business: United States District Court Northern District Of Illinois (1) fees and related nontaxable expenses. (2) "Respondent" means a party from whom the movant seeks payment lawyer, paralegal, or other person. (4) The supreme movant shall provide the respondent with the above information within 21 days of the judgment or settlement agreement upon which the motion is based, unless the court sets a different schedule.(2) the total amount of fees and/or related nontaxable expenses that the respondent deems should be awarded (If the fees are contested, the respondent shall include a similar table giving district respondent’s position as to the name, compensable hours, appropriate rates, and totals for each biller listed by movant.);(A) whether the motion for ireland fees and expenses will be based on a judgment or on a settlement of the underlying merits dispute, and Chicago illinois (B) if the motion will be based on a judgment, whether respondent has appealed or intends to appeal that judgment. The parties shall cooperate to irish complete preparation of the joint statement no later than 70 days after the entry of the judgment or settlement agreement on which the motion for fees will be based, unless the court orders otherwise. (g) Motion for Instructions. A motion may be filed seeking director instructions from the court where it appears that the procedures set forth in this rule cannot be linkedin followed within the time limits established by the rule or by order of court because of— prohibition
(2) the temporary failure of one or more of the parties to provide information required by the court rule, or northbrook (3) director motion shall state the court’s order.. "Pfingsten, das liebliche Fest", speaks of Pentecost as a time of greening and blooming in fields, woods, hills,
Accessibility is hot button topic for many for a variety of reasons. But it doesn't need to be expensive, difficult or impeded innovation if we follow some simple WCAG guidelines. These basic steps overcome a majority of common accessibility challenges.
Brief presentation covering 5 things the attorneys and firms in the National Association of Consumer Advocates (NACA) can do to increase their search engine, and social media presence on the internet.
'Comfort Media' Solution for Winston RussiaGoodKarma.me
We develop new ‘deep-communication’ web platform
Creating new vector of brand positioning - moving from promo to image
Re-activating CRM database - building up collaborative framework
Make Your Website Work for You, March 27, 2009abcboston
With the potential of technology to reach a much larger audience quickly and inexpensively, more and more organizations are using an online presence to reach donors, members, customers, volunteers and supporters.
This presentation is designed to give administrators an introductory look at web 2.0 tools and how they can be used to simplify their job, and enhance training and enrichment, community partnerships, create awareness for an issue, etc.
Virtual Worlds As A Competitive Learning EnvironmentKevin Feenan
Virtual worlds have been characterized as a fancy IRC client which more often than not represents a technology that is as much a barrier to the average user as it is a help. Educators are criticized as much for their lack of imagination and ingenuity in the use of these platforms when lectures and presentations are more often limited to simply being a unique way to present PowerPoint slides. This presentation discusses the reasoning behind why virtual worlds represent a competitive environment for collaborative learning despite these short comings. This discussion uses leadership theory and knowledge emergence as its theoretical framework
Premium MEAN Stack Development Solutions for Modern BusinessesSynapseIndia
Stay ahead of the curve with our premium MEAN Stack Development Solutions. Our expert developers utilize MongoDB, Express.js, AngularJS, and Node.js to create modern and responsive web applications. Trust us for cutting-edge solutions that drive your business growth and success.
Know more: https://www.synapseindia.com/technology/mean-stack-development-company.html
Discover the innovative and creative projects that highlight my journey throu...dylandmeas
Discover the innovative and creative projects that highlight my journey through Full Sail University. Below, you’ll find a collection of my work showcasing my skills and expertise in digital marketing, event planning, and media production.
RMD24 | Debunking the non-endemic revenue myth Marvin Vacquier Droop | First ...BBPMedia1
Marvin neemt je in deze presentatie mee in de voordelen van non-endemic advertising op retail media netwerken. Hij brengt ook de uitdagingen in beeld die de markt op dit moment heeft op het gebied van retail media voor niet-leveranciers.
Retail media wordt gezien als het nieuwe advertising-medium en ook mediabureaus richten massaal retail media-afdelingen op. Merken die niet in de betreffende winkel liggen staan ook nog niet in de rij om op de retail media netwerken te adverteren. Marvin belicht de uitdagingen die er zijn om echt aansluiting te vinden op die markt van non-endemic advertising.
At Techbox Square, in Singapore, we're not just creative web designers and developers, we're the driving force behind your brand identity. Contact us today.
B2B payments are rapidly changing. Find out the 5 key questions you need to be asking yourself to be sure you are mastering B2B payments today. Learn more at www.BlueSnap.com.
Buy Verified PayPal Account | Buy Google 5 Star Reviewsusawebmarket
Buy Verified PayPal Account
Looking to buy verified PayPal accounts? Discover 7 expert tips for safely purchasing a verified PayPal account in 2024. Ensure security and reliability for your transactions.
PayPal Services Features-
🟢 Email Access
🟢 Bank Added
🟢 Card Verified
🟢 Full SSN Provided
🟢 Phone Number Access
🟢 Driving License Copy
🟢 Fasted Delivery
Client Satisfaction is Our First priority. Our services is very appropriate to buy. We assume that the first-rate way to purchase our offerings is to order on the website. If you have any worry in our cooperation usually You can order us on Skype or Telegram.
24/7 Hours Reply/Please Contact
usawebmarketEmail: support@usawebmarket.com
Skype: usawebmarket
Telegram: @usawebmarket
WhatsApp: +1(218) 203-5951
USA WEB MARKET is the Best Verified PayPal, Payoneer, Cash App, Skrill, Neteller, Stripe Account and SEO, SMM Service provider.100%Satisfection granted.100% replacement Granted.
Falcon stands out as a top-tier P2P Invoice Discounting platform in India, bridging esteemed blue-chip companies and eager investors. Our goal is to transform the investment landscape in India by establishing a comprehensive destination for borrowers and investors with diverse profiles and needs, all while minimizing risk. What sets Falcon apart is the elimination of intermediaries such as commercial banks and depository institutions, allowing investors to enjoy higher yields.
VAT Registration Outlined In UAE: Benefits and Requirementsuae taxgpt
Vat Registration is a legal obligation for businesses meeting the threshold requirement, helping companies avoid fines and ramifications. Contact now!
https://viralsocialtrends.com/vat-registration-outlined-in-uae/
Business Valuation Principles for EntrepreneursBen Wann
This insightful presentation is designed to equip entrepreneurs with the essential knowledge and tools needed to accurately value their businesses. Understanding business valuation is crucial for making informed decisions, whether you're seeking investment, planning to sell, or simply want to gauge your company's worth.
The world of search engine optimization (SEO) is buzzing with discussions after Google confirmed that around 2,500 leaked internal documents related to its Search feature are indeed authentic. The revelation has sparked significant concerns within the SEO community. The leaked documents were initially reported by SEO experts Rand Fishkin and Mike King, igniting widespread analysis and discourse. For More Info:- https://news.arihantwebtech.com/search-disrupted-googles-leaked-documents-rock-the-seo-world/
Digital Transformation and IT Strategy Toolkit and TemplatesAurelien Domont, MBA
This Digital Transformation and IT Strategy Toolkit was created by ex-McKinsey, Deloitte and BCG Management Consultants, after more than 5,000 hours of work. It is considered the world's best & most comprehensive Digital Transformation and IT Strategy Toolkit. It includes all the Frameworks, Best Practices & Templates required to successfully undertake the Digital Transformation of your organization and define a robust IT Strategy.
Editable Toolkit to help you reuse our content: 700 Powerpoint slides | 35 Excel sheets | 84 minutes of Video training
This PowerPoint presentation is only a small preview of our Toolkits. For more details, visit www.domontconsulting.com
2. Luke Wroblewski
Yahoo! Inc.
• Senior Principal, Product Ideation & Design
LukeW Interface Designs
• Principal & Founder
• Product design & strategy services
Author
• Site-Seeing: A Visual Approach to Web Usability (Wiley
& Sons)
• Form Design Best Practices (Rosenfeld Media) -
Upcoming
• Functioning Form: Web applications, product strategy, &
interface design articles
Previously
• eBay Inc., Lead Designer
• University of Illinois, Instructor
• NCSA, Senior Designer
http://www.lukew.com
2
3. Outline
• Why does page hierarchy matter?
• How do we construct a hierarchy?
• Enable usability
• Reflect priority
• How do we use hierarchy to:
Communicate messages
•
Illuminate actions
•
Organize information
•
Present data
•
3
4. How We Use the Web
“Look around feverishly for anything that is interesting or vaguely
resembles what you are looking for, and is clickable.” -Steve Krug
-Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
4
6. Design Considerations
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Presentation: How your application appears to your audience
• Interaction: How your application behaves in response to user actions
• Organization: The structure of your application
6
7. Presentation
• All interactions occur through the presentation
• Inform users
• Establish relationships between content
• Guide users through actions
• Make organizational systems clear
• Provide situational awareness
• Maintain consistency to create a sense of place
• Effectively convey brand message to your audience
• Emotional impact
• Engage and invite
• Provide a unique personality
7
8. What Makes a Great Presentation?
• Visual Organization
• Communicates the
relationships between user
interface elements
• Enables Interaction Design
• Information Design
• Personality
• Communicates the brand
essence of a product
• Visceral design
• Color, font, image, pattern
selection
8
9. The End Goal
• Quickly Communicate
• What is this? Usefulness
• How do I use it? Usability
• Why should I care? Desirability
9
17. How We See
• How we make sense of
what we see
• Recognizing similarities &
differences
• This allows us to group
information
• And give it meaning
• Relationships Flickr: Uploaded on August 19, 2006 by Tom-Tom
• Between individual
elements
• To the whole (story)
17
18. Understanding Perception
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Several principles tell us how (why) we group
visual information
Proximity -elements close together are perceived as a group
•
Similarities -of shape, size, color can group elements
•
Continuance -grouped through basic patterns
•
Closure -group elements by space filled between them
•
18
19. Forming Relationships
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Creating relationships requires an understanding of
what makes things different
• Introducing variations in one or more of the above
categories creates visual contrast
• Also created through positioning
19
20. Using Relationships
• Use visual relationships to
• Add more or less visual weight to objects
• Difference is created by contrast between objects
• Why do we want to vary the visual weight of objects…
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
20
21. Visual Hierarchy
• Creates a center of interest that attracts the viewer’s
attention
• Creates a sense of order and balance
• Establishes a pattern of movement to guide a viewer
through a composition
• In other words, it tells a story
• Like all good stories it has a beginning, end, and a point.
21
22. Hierarchy Applied
• Visual weight guides you through
Image
•
Title
•
Date & Location
•
Ticket Information
•
• Building an effective hierarchy
• Involves use of visual relationships to
add more or less visual weight to
elements
22
23. Building Effective Hierarchies
• Distribution of visual weight
• Visually dominant images get noticed most
• Focal point, center of interest
• Distinct visual weight guides you through the narrative
• Essential to keep it balanced
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
23
29. To Summarize
Visual Communication is part
•
Visual Organization and part personality.
•
Visual Hierarchy is a deliberate prioritization of
•
Visual Weight enabled by the manipulation of
•
Visual Relationships to create
•
Meaning for users.
•
29
30. NOW WE KNOW HOW
TO CONSTRUCT A
VISUAL HIERARCHY
WHAT’S THE
PRIORITY? BUT WHAT SHOULD IT
COMMUNICATE?
30
31. Enable Usability
• Once you understand hierarchy, you can
• Guide users through a sequence
• Suggest distinct choices
• Answer Key Questions
• What is this?
• Where am I?
• What do I do now?
31
32. Explain “What”
• Lots of different elements
on each page
• Communicate differences
between elements
• Their relative importance
• Their meaning
• Apply consistently throughout
an application
32
35. Explaining Where
• Visual hierarchy within navigation systems
• “You are here” indicators (s.e.d.)
• Indication of structure (size, color, etc.)
35
37. Building a Hierarchy
• Effective page hierarchies map to
prioritized user/business needs
• Building an effective hierarchy
1. List out required content & actions
2. Prioritize the list
3. Start at the top and give each element equal or less
visual weight as the previous element
This ensures there is enough contrast between elements
•
You are likely to end up with more unique visual
•
treatments than your design actually needs
4. Work through the elements on the page again to
bring more visual consistency to related elements
37
40. Sites Content Objects
Emergent Networks: open, inexpensive,
Hierarchies: management, military
simple, close enough
Examples: closed, expensive, complex,
Examples: crowds, friends, incidental
accurate
networks,
IMAGES BASED ON ANDREW HILTON’S ARCHITECTURES OF PARTICIPATION 40
51. Web Transitions
1. Locomotion to digital representations of
physical entities
• Directories & portals, Yahoo!
• Company sites & brochure-ware
2. Digital manipulation of physical goods
• E-commerce everywhere
• Amazon, eBay
3. Digital services
• Enable conversation & manipulation
• Display surfaces
• Content creation
• Aggregation
• Entertainment
-Types of digital services: TOM CHI, YAHOO! 51
52. Packaging Design for Web Apps
• Meaningful Shout
• Differentiate
• Attract
• Embody the Brand
• Back of Pack
• Support the Story
• Outline Benefits & Features
• Unpacking Experience
52
53. “What do I do now?”
TAKE ACTION
User Needs &
Business Goals
53
74. After Visual Communication?
• Labels and their values have
been divided into rows and
columns
Requires horizontal and vertical
•
movement
Need to look across for one label and
•
up for the second label
Compounded by the increased
•
separation of the data - the labels are
further away from their values.
• Potentially better for looking
up a particular value in the
table
• Makes taking all the data in at
once more difficult.
74
75. After Visual Communication?
• Are people looking for a
specific value (i.e. discharges
this month)
One of Deva’s layouts hit the
•
mark.
• Do they simply need a sense of
all the information at once?
The original redesigned table
•
makes scanning easier
• Is there a prioritization of the
data
One of Deva’s layouts hit the
•
mark.
• Is everything equally
important?
Introducing size and color
•
variations might add visual noise
instead of bringing extra attention
to really important data
75
76. After Visual Communication?
• If the purpose of the quot;last monthquot; data is
to calculate the monthly mutation, the last
column offers faster satisfaction.
• Styling the row and column groups
provides further importance and
emphasizes to the data relations and give
more meaning to the structure of the grid
• The foot contains the single most
important statistic for this table.
-Robbin van Eijsden
http://www.ict-id.nl/CSSshed/website/html/tablebility_part1.html
76
86. Q&A
• Question
• I’d love to have an effective visual hierarchy on my site but
every stakeholder wants their content or feature to be
prominently displayed. What can I do?
• Answer
• Separate the discussion about hierarchy from the actual visual
design
• Create an ordered list of all the content and actions on a
specific page and work with each stakeholder to prioritize it
• If you have any data about the usage or importance (for end
users) of the items in the list include it as well
• Once you have buy-in on the list- use the language of design to
explain how your design reflects the list’s prioritization
• If any stakeholders complain about their visual prominence in
the design, offer to revisit the ordering of the list and bring in
the rest of the stakeholders that already agreed to the
prioritization
86
87. Q&A
• Question
• How do I know if I have the right visual hierarchy in my
designs? Do I need to test it?
• Answer
• It is possible to develop successful interfaces without extensive
user research, if one is adept at understanding generalized
patterns
• Understanding the foundational principles behind visual design
enables you create effective designs
• Asking users “do you like option a or option b?” rarely provides
any useful information.
• Instead ask users to walk through a specific task
• This process will help inform whether or not the visual design is
effectively supporting user needs.
87
88. Q&A
• Question
• Most of my work involves small incremental improvements and
not a full redesign. How I can I incrementally develop effective
visual communication in this situation?
• Answer
• When adding an element to an application consider how it relates to
the whole:
• Is it more or less important than other elements in the application?
• Is it very similar or very different from other elements in the
application?
• Does it logically fit within specific content or actions?
• How does it relate to the overall goals and vision of the
application?
• Document these relationships to begin building a visual language
• Apply that language each time you make incremental changes
88
89. For more information…
• Functioning Form
• www.lukew.com/ff/
• Site-Seeing: A Visual
Approach to Web Usability
• Wiley & Sons
• Drop me a note
• luke@lukew.com
89