This document discusses various design anti-patterns to avoid, including interactions that require unnecessary steps or mouse movements. It provides examples of the "meandering way" anti-pattern, where normal page flow takes a winding path, and the "pogo stick navigation" anti-pattern, which requires hopping between different levels to complete a task. It also covers the "tiny targets" anti-pattern, where key interaction points are too small and difficult to select accurately. The document advises following consistent spatial relationships in interactions and keeping actions in-context to avoid these anti-patterns.
This document provides an overview of usability design principles for user interfaces. It discusses concepts like the IBM Iceberg Model which breaks down UI elements into visual, interaction, and user model components. It also discusses the usability process involving concept, strategy, solution, innovation and iteration. Key principles discussed include understanding human biases, simplifying tasks, making elements visible, standardizing mappings, allowing for errors and iterating designs. Resources on visual prototyping, UI patterns and the universal principles of design are also referenced.
This document discusses different types of prototypes and their uses. It begins by defining prototypes as ways to identify problems, try out ideas, identify issues, and bring teams together. It then describes different types of prototypes from static to interactive, and their appropriate uses. Key advantages discussed include validating concepts, exploring options quickly, and assessing application flow before production. The document emphasizes that good prototypes put the user first, have appropriate investment, communicate the right level of detail, and are changeable, accessible and help align teams. Overall it promotes prototyping as an important part of the design process.
Some REST Design Patterns (and Anti-Patterns) - SOA Symposium 2009Cesare Pautasso
This document discusses some REST design patterns and anti-patterns for building RESTful services. It begins with an introduction to REST and a methodology for designing RESTful services. It then presents several common REST design patterns, including entity endpoint, uniform contract, endpoint redirection, content negotiation, and idempotent capability. It concludes by introducing some common anti-patterns to avoid, such as tunneling all requests through GET or POST. The document provides examples to illustrate how each pattern can be applied.
This document discusses designing multi-touch interfaces for HTML5 applications. It covers challenges like flexible layouts for different screen sizes and orientations, implementing common gestures, performance optimization, and cross-browser compatibility. Frameworks can help address these challenges. The conclusion recommends HTML5 for small applications and native solutions for large, feature-rich responsive apps.
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.
Original deck presented at XConf 2011, ThoughtWorks, Pune.
Images used in the keynote are for illustrative purposes only.
This document discusses various design anti-patterns to avoid, including interactions that require unnecessary steps or mouse movements. It provides examples of the "meandering way" anti-pattern, where normal page flow takes a winding path, and the "pogo stick navigation" anti-pattern, which requires hopping between different levels to complete a task. It also covers the "tiny targets" anti-pattern, where key interaction points are too small and difficult to select accurately. The document advises following consistent spatial relationships in interactions and keeping actions in-context to avoid these anti-patterns.
This document provides an overview of usability design principles for user interfaces. It discusses concepts like the IBM Iceberg Model which breaks down UI elements into visual, interaction, and user model components. It also discusses the usability process involving concept, strategy, solution, innovation and iteration. Key principles discussed include understanding human biases, simplifying tasks, making elements visible, standardizing mappings, allowing for errors and iterating designs. Resources on visual prototyping, UI patterns and the universal principles of design are also referenced.
This document discusses different types of prototypes and their uses. It begins by defining prototypes as ways to identify problems, try out ideas, identify issues, and bring teams together. It then describes different types of prototypes from static to interactive, and their appropriate uses. Key advantages discussed include validating concepts, exploring options quickly, and assessing application flow before production. The document emphasizes that good prototypes put the user first, have appropriate investment, communicate the right level of detail, and are changeable, accessible and help align teams. Overall it promotes prototyping as an important part of the design process.
Some REST Design Patterns (and Anti-Patterns) - SOA Symposium 2009Cesare Pautasso
This document discusses some REST design patterns and anti-patterns for building RESTful services. It begins with an introduction to REST and a methodology for designing RESTful services. It then presents several common REST design patterns, including entity endpoint, uniform contract, endpoint redirection, content negotiation, and idempotent capability. It concludes by introducing some common anti-patterns to avoid, such as tunneling all requests through GET or POST. The document provides examples to illustrate how each pattern can be applied.
This document discusses designing multi-touch interfaces for HTML5 applications. It covers challenges like flexible layouts for different screen sizes and orientations, implementing common gestures, performance optimization, and cross-browser compatibility. Frameworks can help address these challenges. The conclusion recommends HTML5 for small applications and native solutions for large, feature-rich responsive apps.
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.
Original deck presented at XConf 2011, ThoughtWorks, Pune.
Images used in the keynote are for illustrative purposes only.
This document discusses challenges for user experience (UX) design with rich internet applications (RIAs). It begins by defining UX and RIAs. It then outlines six heuristics for RIA UX design related to discoverability, back and bookmark functionality, change communication, feedback, adding content, and accessibility. The document also discusses how the user-centered design lifecycle applies to RIAs, noting differences such as reduced initial analysis and a focus on first contact design.
There's plenty of material (documentation, blogs, books) out there that'll help
you write a site using Django... but then what? You've still got to test,
deploy, monitor, and tune the site; failure at deployment time means all your
beautiful code is for naught.
This document discusses designing user interfaces to create "interesting moments" during interactions. It begins by examining the many events and actors involved even in simple interactions like dragging and dropping. It then analyzes 96 potential "interesting moments" that could occur. The document discusses principles for designing these moments, such as using animation carefully and maintaining symmetrical interactions. It provides examples of good and bad interface patterns related to drag and drop, overlays, navigation bars, and other interactions. The overall goal is to thoughtfully design moments that capture micro interactions and possibilities to create a pleasing user experience.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
This document provides an overview of responsive web design (RWD) for designers. It defines key RWD terms and discusses challenges like managing the design process for multiple screens. It offers tips on where to start with RWD, such as designing for a 768px screen first. It also covers working with writers, bosses, and coders on RWD. Recommended resources on RWD are provided at the end.
Mobile first: A future friendly approach to UX designInVision App
Thinking "mobile" is not just about devices, it's about better usability, optimizing for screen real estate, and simplifying design elements and layouts. Asher Blumberg, Mobile UX Designer at StumbleUpon, walks us through creating a unique design language for your app that bridges the chasm between iOS and Android.
This document discusses designing user interfaces that span multiple devices with varying screen resolutions and sizes. It introduces MeeGo.Ux.Units, which allows specifying graphics and layout using physical units like millimeters instead of pixels to achieve density independence. Key techniques include using vector graphics, separating graphics from icons, generating assets for different densities, and following interaction best practices.
Talk by Sarit Arora, Yahoo, at the STC India UX Conference on Saturday, August 27, 2011, conducted at WE School, Bangalore.
https://sites.google.com/site/stcindiaux/speakers#Sarit
This document discusses keys to successful mobile design. It emphasizes understanding the user by considering factors like their target age group, typical locations and tasks. Device constraints like smaller screens and lower processing power require optimizing graphics, actionscript and dynamically adjusting elements. Fundamental design principles like using a grid structure, appropriate typography at 24pt font size and limited colors bring cohesion. Examples like Etsy demonstrate applying these principles.
Google Associate Android Developer CertificationMonir Zzaman
This presentation cover following topics:
1. Mock up the main screens and navigation flow of the application
2. Describe interactions between UI, background task, and data
persistence
3. Construct a layout using XML or Java code
4. Create an Activity that displays a layout resource
5. Fetch local data from disk using a Loader on a background t
thread
6. Propagate data changes through a Loader to the UI
This document discusses key concepts in user experience design including accessibility, usability, screen patterns, progressive enhancement, and user testing. It provides definitions and examples for various UX principles like ensuring applications can be accessed by people with disabilities, that users want relevant content easily and quickly, and testing applications with real users to identify areas for improvement. Screen patterns like master-detail, search results, and dashboards are explained as templates for organizing content. The document advocates for progressive enhancement in building applications to work across devices through separate concerns of architecture, structure, presentation and behavior.
Create a storyboard prototype of a mobile app.When creating a stor.pdfmohammedfootwear
Create a storyboard prototype of a mobile app.
When creating a storyboard, you may adopt either of the two types of prototype – horizontal
prototyping (providing a wide range of functions but with little detail) or vertical prototyping
(providing a lot of detail for only a few functions). In other words, you may create a storyboard
depicting most of the functions of your design and how they are used, with little detail about
each of the functions (i.e., horizontal prototyping). You may alternatively choose to focus on a
couple of key functions provided by your product, with detailed depictions of the use of these
functions (i.e., vertical prototyping). Six to nine scenes are required for this activity.
You may take a piece of paper, draw your storyboard, and scan or take a (clear) picture of it, and
attach the image file to your initial post. You may alternatively use MS PowerPoint.
Solution
Story board would help the users by taking the unique stinct of the concepts and not taking the
entire episode of th e same.
•Usage native User Interface(UI), you can get a real feel of what it would be like to use the app.
•Developers can get a better sense of the app and the intended UX. They can develop the
prototype into new Storyboards and start hooking up placeholder labels and image views to real
data .The user interface attracts the uder to take maximum advantage of the same.
1.Home Screen and Navigation Home screen and navigation also plays an important role in
builing an effective mobile app.
Show Object Library by selecting the third tab on the bottom right panel. Find the Navigation
Controller and drag it onto the page.
It will add both the Navigation Controller and a Table View Controller to your storyboard.
Table View Controllers are an easy way to layout scrolling content.
Select the Navigation Controller and then show the Attributes Inspector in the right panel
Set theTop Bar to Translucent Black Navigation Bar. Also select Is Initial View Controller.
•Collaborate with other stakeholders and communicate your ideas and thoughts.
Invite collaborators and stakeholders to review and stories on the prototype
•Get proactive feedback with live video calling and invite teammates into a collaborative design
session
•This can be a very important feature for an mobile app to havedea Validation of a story or a
theme
•This feature an check and enhance the process and systems to check whether the story is going
in appropriate terms or it is deviating from the actuals..
Design Vs Usability - The quest for the holy grailMuki Regunathan
The document discusses the balance between usability and visual design for websites. It notes that while visual appeal can attract users initially, usability is more important for sustaining engagement. The document provides tips for designing usable interfaces, such as intuitive navigation, clear information architecture, and usability testing. It emphasizes the importance of understanding user needs and goals above all other considerations in website design.
- Domain expertise needs to be documented before implementation begins, as a consultant with 10-15 years of experience in the domain helped a project that had been struggling for six months make progress within four months.
- User empathy is important, as simple features like grouping names were found very useful by users despite being easy for developers to implement.
- Content should be called content rather than data, as this shifts perspectives to prioritize things like user involvement and content creation tools.
- Architectures need to be understandable to executives in order to guide a project successfully rather than resulting in a "rough ride".
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
This document provides an overview of user interfaces for science, including user experience, visualization, and mobile app development using PhoneGap. It discusses principles of good user interface design like simplicity, consistency, and visual hierarchy. It also covers processes for creating interfaces like storyboarding and wireframing. Visualization is discussed as a way to help users analyze and understand large datasets. The document cautions against potential pitfalls in visualization like unclear representations of uncertainty. It concludes by mentioning libraries for creating visualizations and frameworks like PhoneGap for developing mobile apps.
The document provides an overview of creating mobile apps without coding using ViziApps. It discusses the ViziApps workflow which allows visually designing apps without coding. The design process involves four main steps - designing the app interface, defining data handling using options like Google Docs spreadsheets, previewing the app, and publishing. It also covers basics of app design like defining goals and usability considerations for small screens.
Designing a new user interface for open source projectsGabriel Cardoso
The document discusses redesigning the user interface for the open source GateIn project. It identifies inconsistencies in the current design and proposes using a design process involving information architecture, skeleton and surface plans. The redesign would use Twitter Bootstrap for speed and responsive design techniques. It also suggests prioritizing areas to focus on like structure, navigation and screen-level solutions. The goal is to improve the consistency, error prevention, recognition over recall and help users diagnose problems in the interface.
The document provides an overview of the Yahoo User Interface (YUI) Library. It describes YUI as a collection of JavaScript and CSS resources that make it easier to build richly interactive web applications. It lists some of YUI's core components and utilities, as well as design patterns examples and where to find more information on YUI design patterns.
Making simple, elegant solutions is HARD and often invisible. These are some of the most common things I hear come out of people’s mouths when heading for a bad UX decision.
Fallon Brainfood x Planning-ness 2010: How To Plan AppsAki Spicer
Aki Spicer, Fallon's Director of Digital Strategy will reveal some learnings and tips for account planners trying to operationalize the process of concepting, selling and building applications and digital tools.
Learn some pitfalls to avoid, shortcuts for bridging the gap between "start-up" culture and agency culture, guidance for selling apps to clients who are "bottom-line" or "ad message" minded, and shifting your teams from campaign thinking to service mentality.
http://planningness.com
September 30th – October 1st at Denver’s, Space Gallery.
By Martin Van Welie: This paper discusses and presents interaction patterns in user interfaces. These patterns are
focused on solutions to problems end-users have when interacting with systems.
This document discusses patterns as tools for user interface design and proposes a structure for user interface design patterns. [1] Patterns are presented as a potential solution to some of the problems with guidelines, which can be too abstract, conflicting, and lack context. [2] A simple example pattern is provided to illustrate how patterns describe a problem, context, and proven solution instead of just rules. [3] The document argues that a proper structure for user interface design patterns needs to be developed to effectively capture usability knowledge for designers.
More Related Content
Similar to Antipatterns - Designing for the poor web experience
This document discusses challenges for user experience (UX) design with rich internet applications (RIAs). It begins by defining UX and RIAs. It then outlines six heuristics for RIA UX design related to discoverability, back and bookmark functionality, change communication, feedback, adding content, and accessibility. The document also discusses how the user-centered design lifecycle applies to RIAs, noting differences such as reduced initial analysis and a focus on first contact design.
There's plenty of material (documentation, blogs, books) out there that'll help
you write a site using Django... but then what? You've still got to test,
deploy, monitor, and tune the site; failure at deployment time means all your
beautiful code is for naught.
This document discusses designing user interfaces to create "interesting moments" during interactions. It begins by examining the many events and actors involved even in simple interactions like dragging and dropping. It then analyzes 96 potential "interesting moments" that could occur. The document discusses principles for designing these moments, such as using animation carefully and maintaining symmetrical interactions. It provides examples of good and bad interface patterns related to drag and drop, overlays, navigation bars, and other interactions. The overall goal is to thoughtfully design moments that capture micro interactions and possibilities to create a pleasing user experience.
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
This document provides an overview of responsive web design (RWD) for designers. It defines key RWD terms and discusses challenges like managing the design process for multiple screens. It offers tips on where to start with RWD, such as designing for a 768px screen first. It also covers working with writers, bosses, and coders on RWD. Recommended resources on RWD are provided at the end.
Mobile first: A future friendly approach to UX designInVision App
Thinking "mobile" is not just about devices, it's about better usability, optimizing for screen real estate, and simplifying design elements and layouts. Asher Blumberg, Mobile UX Designer at StumbleUpon, walks us through creating a unique design language for your app that bridges the chasm between iOS and Android.
This document discusses designing user interfaces that span multiple devices with varying screen resolutions and sizes. It introduces MeeGo.Ux.Units, which allows specifying graphics and layout using physical units like millimeters instead of pixels to achieve density independence. Key techniques include using vector graphics, separating graphics from icons, generating assets for different densities, and following interaction best practices.
Talk by Sarit Arora, Yahoo, at the STC India UX Conference on Saturday, August 27, 2011, conducted at WE School, Bangalore.
https://sites.google.com/site/stcindiaux/speakers#Sarit
This document discusses keys to successful mobile design. It emphasizes understanding the user by considering factors like their target age group, typical locations and tasks. Device constraints like smaller screens and lower processing power require optimizing graphics, actionscript and dynamically adjusting elements. Fundamental design principles like using a grid structure, appropriate typography at 24pt font size and limited colors bring cohesion. Examples like Etsy demonstrate applying these principles.
Google Associate Android Developer CertificationMonir Zzaman
This presentation cover following topics:
1. Mock up the main screens and navigation flow of the application
2. Describe interactions between UI, background task, and data
persistence
3. Construct a layout using XML or Java code
4. Create an Activity that displays a layout resource
5. Fetch local data from disk using a Loader on a background t
thread
6. Propagate data changes through a Loader to the UI
This document discusses key concepts in user experience design including accessibility, usability, screen patterns, progressive enhancement, and user testing. It provides definitions and examples for various UX principles like ensuring applications can be accessed by people with disabilities, that users want relevant content easily and quickly, and testing applications with real users to identify areas for improvement. Screen patterns like master-detail, search results, and dashboards are explained as templates for organizing content. The document advocates for progressive enhancement in building applications to work across devices through separate concerns of architecture, structure, presentation and behavior.
Create a storyboard prototype of a mobile app.When creating a stor.pdfmohammedfootwear
Create a storyboard prototype of a mobile app.
When creating a storyboard, you may adopt either of the two types of prototype – horizontal
prototyping (providing a wide range of functions but with little detail) or vertical prototyping
(providing a lot of detail for only a few functions). In other words, you may create a storyboard
depicting most of the functions of your design and how they are used, with little detail about
each of the functions (i.e., horizontal prototyping). You may alternatively choose to focus on a
couple of key functions provided by your product, with detailed depictions of the use of these
functions (i.e., vertical prototyping). Six to nine scenes are required for this activity.
You may take a piece of paper, draw your storyboard, and scan or take a (clear) picture of it, and
attach the image file to your initial post. You may alternatively use MS PowerPoint.
Solution
Story board would help the users by taking the unique stinct of the concepts and not taking the
entire episode of th e same.
•Usage native User Interface(UI), you can get a real feel of what it would be like to use the app.
•Developers can get a better sense of the app and the intended UX. They can develop the
prototype into new Storyboards and start hooking up placeholder labels and image views to real
data .The user interface attracts the uder to take maximum advantage of the same.
1.Home Screen and Navigation Home screen and navigation also plays an important role in
builing an effective mobile app.
Show Object Library by selecting the third tab on the bottom right panel. Find the Navigation
Controller and drag it onto the page.
It will add both the Navigation Controller and a Table View Controller to your storyboard.
Table View Controllers are an easy way to layout scrolling content.
Select the Navigation Controller and then show the Attributes Inspector in the right panel
Set theTop Bar to Translucent Black Navigation Bar. Also select Is Initial View Controller.
•Collaborate with other stakeholders and communicate your ideas and thoughts.
Invite collaborators and stakeholders to review and stories on the prototype
•Get proactive feedback with live video calling and invite teammates into a collaborative design
session
•This can be a very important feature for an mobile app to havedea Validation of a story or a
theme
•This feature an check and enhance the process and systems to check whether the story is going
in appropriate terms or it is deviating from the actuals..
Design Vs Usability - The quest for the holy grailMuki Regunathan
The document discusses the balance between usability and visual design for websites. It notes that while visual appeal can attract users initially, usability is more important for sustaining engagement. The document provides tips for designing usable interfaces, such as intuitive navigation, clear information architecture, and usability testing. It emphasizes the importance of understanding user needs and goals above all other considerations in website design.
- Domain expertise needs to be documented before implementation begins, as a consultant with 10-15 years of experience in the domain helped a project that had been struggling for six months make progress within four months.
- User empathy is important, as simple features like grouping names were found very useful by users despite being easy for developers to implement.
- Content should be called content rather than data, as this shifts perspectives to prioritize things like user involvement and content creation tools.
- Architectures need to be understandable to executives in order to guide a project successfully rather than resulting in a "rough ride".
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
This document provides an overview of user interfaces for science, including user experience, visualization, and mobile app development using PhoneGap. It discusses principles of good user interface design like simplicity, consistency, and visual hierarchy. It also covers processes for creating interfaces like storyboarding and wireframing. Visualization is discussed as a way to help users analyze and understand large datasets. The document cautions against potential pitfalls in visualization like unclear representations of uncertainty. It concludes by mentioning libraries for creating visualizations and frameworks like PhoneGap for developing mobile apps.
The document provides an overview of creating mobile apps without coding using ViziApps. It discusses the ViziApps workflow which allows visually designing apps without coding. The design process involves four main steps - designing the app interface, defining data handling using options like Google Docs spreadsheets, previewing the app, and publishing. It also covers basics of app design like defining goals and usability considerations for small screens.
Designing a new user interface for open source projectsGabriel Cardoso
The document discusses redesigning the user interface for the open source GateIn project. It identifies inconsistencies in the current design and proposes using a design process involving information architecture, skeleton and surface plans. The redesign would use Twitter Bootstrap for speed and responsive design techniques. It also suggests prioritizing areas to focus on like structure, navigation and screen-level solutions. The goal is to improve the consistency, error prevention, recognition over recall and help users diagnose problems in the interface.
The document provides an overview of the Yahoo User Interface (YUI) Library. It describes YUI as a collection of JavaScript and CSS resources that make it easier to build richly interactive web applications. It lists some of YUI's core components and utilities, as well as design patterns examples and where to find more information on YUI design patterns.
Making simple, elegant solutions is HARD and often invisible. These are some of the most common things I hear come out of people’s mouths when heading for a bad UX decision.
Fallon Brainfood x Planning-ness 2010: How To Plan AppsAki Spicer
Aki Spicer, Fallon's Director of Digital Strategy will reveal some learnings and tips for account planners trying to operationalize the process of concepting, selling and building applications and digital tools.
Learn some pitfalls to avoid, shortcuts for bridging the gap between "start-up" culture and agency culture, guidance for selling apps to clients who are "bottom-line" or "ad message" minded, and shifting your teams from campaign thinking to service mentality.
http://planningness.com
September 30th – October 1st at Denver’s, Space Gallery.
Similar to Antipatterns - Designing for the poor web experience (20)
By Martin Van Welie: This paper discusses and presents interaction patterns in user interfaces. These patterns are
focused on solutions to problems end-users have when interacting with systems.
This document discusses patterns as tools for user interface design and proposes a structure for user interface design patterns. [1] Patterns are presented as a potential solution to some of the problems with guidelines, which can be too abstract, conflicting, and lack context. [2] A simple example pattern is provided to illustrate how patterns describe a problem, context, and proven solution instead of just rules. [3] The document argues that a proper structure for user interface design patterns needs to be developed to effectively capture usability knowledge for designers.
This document describes a study that aims to improve tag clouds as visual information retrieval interfaces. The researchers propose selecting tags based on their usefulness in representing resources rather than just frequency of use. They define tag usefulness based on how well a tag represents the resources it is assigned to compared to other tags of those resources, as well as how many unique resources it covers. They also propose grouping tags visually based on similarity using clustering techniques. An evaluation on a sample of tagged web resources found their proposed tag selection method achieved better coverage of resources with less overlap between tags compared to traditional frequency-based selection.
This document discusses considerations for wiki design, including packaging design for web applications, rich interactions through invitation, transition and feedback, and approaches to content creation that empower users while establishing barriers to entry. It provides an overview of Luke Wroblewski's background and references additional resources on designing wikis and web applications.
This document provides best practices for designing online forms. It discusses principles like minimizing pain for users, illuminating a clear path to completion, and ensuring consistent feedback. Specific guidelines are given for layout elements like labels, fields, and actions. Interaction patterns like progressive disclosure and dependent inputs are also covered. The document emphasizes usability testing and providing helpful validation, error messages, and completion feedback.
The document discusses emerging web interaction patterns and trends. It presents several patterns such as live search, auto-complete, drag and drop, inline editing, hover invitations, endless scrolling, and in-context expanding. It also discusses trends like rich content, direct interactions, lightweight interfaces without borders, and cinematic transitions between pages. Finally, it introduces Yahoo's design pattern library which provides representations of patterns in JSON for others to incorporate into custom pattern libraries.
This document discusses design patterns for web design. It begins with an introduction of Luke Wroblewski and his background in design. It then discusses how design patterns can provide shared design languages and capture best practices. Examples of design patterns are provided for interactions like drag and drop. The rest of the document discusses how patterns are used, what they include, examples of pattern libraries, and debates their usefulness. It concludes with a discussion of aligning form labels and a discussion of the future of design patterns.
Bill Scott, Director from the UI Engineering team at Netflix shows ways to use RIA to enhance the User Experience. If you take more interest in the field of design patterns than drop by at www.interaction-patterns.org.
James Reffell and Micah Alpern from the
User Experience & Design Group at eBay Marketplaces share lessons they have learned working with design patterns over the past few years.
Explore the essential graphic design tools and software that can elevate your creative projects. Discover industry favorites and innovative solutions for stunning design results.
Architectural and constructions management experience since 2003 including 18 years located in UAE.
Coordinate and oversee all technical activities relating to architectural and construction projects,
including directing the design team, reviewing drafts and computer models, and approving design
changes.
Organize and typically develop, and review building plans, ensuring that a project meets all safety and
environmental standards.
Prepare feasibility studies, construction contracts, and tender documents with specifications and
tender analyses.
Consulting with clients, work on formulating equipment and labor cost estimates, ensuring a project
meets environmental, safety, structural, zoning, and aesthetic standards.
Monitoring the progress of a project to assess whether or not it is in compliance with building plans
and project deadlines.
Attention to detail, exceptional time management, and strong problem-solving and communication
skills are required for this role.
Best Digital Marketing Strategy Build Your Online Presence 2024.pptxpavankumarpayexelsol
This presentation provides a comprehensive guide to the best digital marketing strategies for 2024, focusing on enhancing your online presence. Key topics include understanding and targeting your audience, building a user-friendly and mobile-responsive website, leveraging the power of social media platforms, optimizing content for search engines, and using email marketing to foster direct engagement. By adopting these strategies, you can increase brand visibility, drive traffic, generate leads, and ultimately boost sales, ensuring your business thrives in the competitive digital landscape.
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Designforuminternational
India’s architectural landscape is a vibrant tapestry that weaves together the country's rich cultural heritage and its modern aspirations. From majestic historical structures to cutting-edge contemporary designs, the work of Indian architects is celebrated worldwide. Among the many firms shaping this dynamic field, Design Forum International stands out as a leader in innovative and sustainable architecture. This blog explores some of the best Indian architects, highlighting their contributions and showcasing the most famous architects in India.
International Upcycling Research Network advisory board meeting 4Kyungeun Sung
Slides used for the International Upcycling Research Network advisory board 4 (last one). The project is based at De Montfort University in Leicester, UK, and funded by the Arts and Humanities Research Council.
3. anti-patterns
what are anti-patterns?
“Anti-patterns, also called pitfalls, are classes of commonly-
reinvented bad solutions to problems. They are studied as a category
so they can be avoided in the future, and so instances of them may be
recognized when investigating non-working systems. The term originates in
computer science, apparently inspired by the Gang of Four's book Design
Patterns, which displayed examples of high-quality programming methods.” -
Wikipedia, Anti-Pattern.
interaction design anti-patterns
Like the software anti-pattern counterparts, the following anti-patterns are
common pitfalls to avoid.
pitfalls with a pithy name
3
4. anti-patterns
meandering way.
big ball of mud.
borg idiom. tiny targets. mystery meat.
buried treasure. hover and cover.
pogo stick navigation. novel notions.
against the flow. metaphor mismatch. jabberwocky.
double duty. linkitus. blind type.
windows aplenty. animation gone wild.
misguided misdirections. unmarked hazards. missed
moments. missing scene.
one at a time. non-symmetrical actions.
Note: anti-patterns denoted in bold are discussed in this talk.
4
5. anti-pattern. meandering way
summary
Normal flow through the page takes the user on a meandering journey with the
mouse.
alternate names
zig-zag interaction, scenic route
example
Actions hidden under hover (in context tools) that require the user to hover an
area, then move the mouse to an area that would normally be outside the
object’s space (back and forth operation)
5
6. anti-pattern. meandering way
In our Y!Teachers product the first version of the hover caused a lot of mouse
zig-zagging to do common operations.
6
7. anti-pattern. meandering way
In the redesign, we avoid any popup, any page jitter and make it possible to just
move the mouse to a predictable spot to do multiple operations.
7
9. anti-pattern. meandering way
In previous company, I found this was a common occurrence in their suite of
software application. By drawing red arrows indicating the user flow, it made the
problem obvious and helped to refactor to a correct solution..
9
10. refactoring. meandering way
Annotate the current flow.
Take a snapshot. Draw red arrows through the interface for each user scenarios.
Use this information to simplify flows and eliminate zig-zag interaction.
Draw the ideal flow.
During design refactoring, only display the elements needed for each interaction.
This will allow you to focus on what is important for the interaction-- and what is
actually the supporting information.
Watch out for hovers. Make sure that all in-context tools that get
revealed require no extra mouse move and are completely predicatable --
allowing the user to gain speed in using the interface.
Follow spatial consistency.
Take advantage of user's learning the command space visually.
10
11. anti-pattern. pogo stick navigation
summary
Requiring the user to go down a level or two, perform an operation, come back
to the top and then have to go back down again. Name comes from hopping
up and down through the site.
credit
Jared Spool
11
12. anti-pattern. pogo stick navigation
Netflix faced the problem of users needing more information on a movie.
They would go down to the details of the movie, possibly adding to the queue.
Then they would go back to where they come from and repeat this
Their solution involved an overlay that can support an alternate navigation
stream. Then the user can come back to the main flow anytime they desire.
12
14. refactoring. pogo stick
Draw flow arrows between pages to catch the zig-zag bouncing from
page to page (see Meandering Way anti-pattern).
To avoid pogo effect:
- Use in-context tools to bring actions into the current page
- Use hover details to reveal information in context
- Use overlays for encapsulating an alternate navigation path to allow
temporary exploration without losing the original context of navigation
- Use in page actions like inline editing, etc. to provide functionality inline.
- Use in-context expands to reveal information on the page.
Watch out for overlays
Can make users resort to back button anyway
14
15. anti-pattern. tiny targets
summary
Making key interaction points too small increases the likelihood that users will
be frustrated with the interface.
Fitt’s law
The time to acquire a target is a function of the distance to and size of the
target.
examples
divots for expand/collapse
15
16. anti-pattern. tiny targets
The identity card area has a summary view and an expanded view.
The targeting is really small and caused lots of usability issues.
Several problems exist:
The target for expand/collapse is hidden
The area that reveals the target area for our identity card is only the photo and not the complete
summary view
The target is a very small divot that is hard to hit.
16
17. anti-pattern. tiny targets
The target for opening the vocabulary list is actually anywhere in the complete
title. However, it looks like you can only click the little tiny divot (8x8 pixels)
Redesign will call out “Close” as bigger target, but also cause title to have link.
17
18. anti-pattern. tiny targets
The Yahoo! Gobbler has done well in tests due to the larger nature of the project
drop targets.
Issue: small text drag target
18
19. anti-pattern. tiny targets
Apple iphone keyboard
iPhone has revolutionary
dynamic target sizing
apple web site has the
play controls as an
8x8
pixel target!
19
20. strategies. tiny targets
Activation targets and important commands need to be large enough,
visually distinct and in proximity to operation.
Use in-context tools to support proximity.
Use “Call to Action” style buttons for most important operations.
If titles will expand/collapse, at least use hyperlink underline when hover
happens to provide a bigger target.
Never use 8x8 for targeting :-)
20
21. anti-pattern. hover & cover
summary
Hover reveal of information and actions has become more and more popular.
Hover & Cover is when the hover actually hides important contextual
information around the object or gets in the way of other actions.
21
22. anti-pattern. hover & cover
Original hover was extremely annoying as it
Covered the item to the right (natural flow is move to right)
Occluded text edit area (hung open)
22
23. anti-pattern. hover & cover
Example from plum.com
Drop down menu shows on hover and gets in the way. Too easy to accidentally
turn it on.
23
24. anti-pattern. hover & cover
Yahoo! Local orginally had this hover beast.
Thankfully it no longer functions this way :-)
24
25. anti-pattern. hover & cover
This one almosts leads to a new anti-pattern-- hover madness
Seriously what were they thinking?
25
26. refactoring. hover & cover
For in-context tools, attempt to reserve same space for both hovered and
non-hovered state
For hover details (information) place the hover in a manner that does not
cover up important controls, will not cause accidentaly popup & down and is
easy to deactivate.
For hover details, allow a 1/4 second
delay before activating.
For in-context tools, show hover state
immediately and provide
consistent targeting for operations
from object to object (allow user to get
action item just in time)
26
27. anti-pattern. borg idiom
summary
Not all idioms play well together. Some idioms are more powerful than others.
For example, tree controls, drag and drop, selection mechanisms all set up an
“interaction theme”.
Just like visual styles need to be consistent, interaction styles also need to be
consistent throughout the entirety of the interface
Borg Idiom is the phenomonon of an idiom (once adopted) assimulating the
rest of the interface. Sometimes the assimulation is just the fact that one idiom
dominates due to the way the interface clues the user to their presence.
27
28. anti-pattern. borg idiom
Here was an early attempt on Yahoo! Bookmarks to blend drag and drop with
item selection (checkbox idiom). It has odd side effects during the interaction.
In Yahoo! Photos (no longer available) drag selection was implemented
well. One issue was the page metaphor + drag selection + a tray idiom.
28
29. anti-pattern. borg idiom
Original design did not accurately reflect the hierarchical nature of projects
containing documents.
The tab idiom incorrectly communicated that these objects were in parallel.
29
30. anti-pattern. borg idiom
An initial redesign proposed using a tree control. It would communicate projects
contain documents. It would also become a navigation that would naturally
repeat itself to the “gobbler” as well
Tree controls are a “strong” idiom. They are not very friendly on the web. They
require some dexterity to navigate. They play better on a desktop where
“controls” are favored over “active content”.
30
31. anti-pattern. borg idiom
The final approach was to take a more content-driven approach rather than a
“control-oriented” approach. This fit nicely with the rest of the interface, leaving
all of the site to look like normal web pages.
31
33. anti-pattern. borg idiom
Netflix recently added drag/drop to their movie queue.
Notice they were able to mix two idioms without one taking over from the
other.
33
34. anti-pattern. borg idiom
Two approaches. Object selection (highlight idiom). Item selection (checkbox
idiom). Is it possible to marry the two?
34
35. anti-pattern. borg idiom
Current Yahoo! Mail successfully married the two interaction idioms. It did it in a
way that you can use either idiom as both have their advantages.
35
36. refactoring. borg idiom
For content-oriented rich sites, avoid becoming control-heavy.
Stay away from the tree control and other strong desktop style controls. Make
your content interactive, thus making the content the control.
Before adding any interaction style, make sure it will scale across all
know parts of your interface.
Either allow yourself to be assimilated (be consistently borg :-) or eliminate the
Borg from your site.
Watch out when mixing drag and drop with checkbox style
selection.
Avoid mixing selection styles.
36
37. anti-pattern. novel notion
summary
Creating a new interface for a common idiom that is more confusing than the
original. Sometimes it is just misusing a component for a new purpose.
examples
Using drag and drop for simple attribute setting; using odd navigation schemes
for some supposed effect
37
38. anti-pattern. novel notion
This is just bizarre. Especially the “Search Jobs” link. And it plays music ;-)
anti-pattern. name.
38
39. anti-pattern. novel notion
This guy won an award! Look it’s just marking stuff as ‘favorite’.
Already solved.
And this is yet another novel approach to favorites
39
41. anti-pattern. novel notion
Yahoo! Photos (going away) tried a novel approach to selection. It involved the
new concept of a “tray” for holding temporarily selected items.
Technically perfect. But design-wise misguided. Created two targets for
commands: selected items and items in the tray.
As a result the menu commands were duplicated for the tray and for the
current selection. Confusing.
41
43. refactoring. novel notion
Understand the purpose of each type of component
- Carousels do not replace scrolled lists
- Drag and drop is not for single attribute setting
Don’t construct an artificial interface to support an idiom (don’t
create the house for the nail)
If you think you need something never created before, think twice about it
43
44. anti-pattern. linkitus
summary
The syndrome of having no idea where a link will lead you. could be an in page
action, could reveal information, could take you to new page, could popup
something, could engage on hover. Can also be aggravated by inconsistent use
of links on the same page.
examples
yahoo.com inconsistent use of links on main page, teachers.yahoo.com around id
card
44
45. anti-pattern. linkitus
On the home page, there are three kinds of links:
- Reveal other content in context
- Take you to the article
- Expose area (hover to reveal, click to go to tool)
45
46. anti-pattern. linkitus
Bizarre use of links. Hover reveals information. Click does nothing.
Very close to being a candidate for Novel Notions.
46
50. anti-pattern. animation gone wild
summary
Animation effects that become the central focus instead of being part of
reinforcing a message.
examples
amazon carousel, tab animation, (stuff from transition talk)
50
60. refactoring. animation gone wild
Transitions should mean something. They communicate.
Understand the hierarchy of transition communication
Rapid movement
Rapid color change
Slow movement
Slow color change
If you are refactoring a wild interface, simply turn off all animations and
start by communicating fully without it, then add it back in one at a
time.
60
61. anti-pattern. missed moments
summary
Not providing feedback throughout an interaction. These missed moments can
confuse the user about what to do.
examples
Drag and drop is classic example.
solutions
Use interesting moments grid to think through each moment
61
67. refactoring. missed moments
Map out all the interesting moments.
Use the interaction matrix or other technique to map events to actors on the
page.
Use the moments to communicate.
Its the nuance that matters.
Think... quot;interactive directionsquot;
Moment-by-moment directions are the key. Users get lost easily
67
68. anti-pattern. one at a time
summary
When you can only update small pieces of the interface instead of doing things
in a group.
examples
backpackit
68
69. anti-pattern. one at a time
Key is what is the workflow? One at a time or mutiple operations allowed.
These kind of interfaces (in context tools) always present a problem for doing
operations on multiple items.
69
71. refactoring. one-at-a-time
Think about what happens when the data/information scales
It affects space issues but also affects interaction density.
Think about doing multiple operations at once
Balance with immediacy
Watch out for in-context tools, in-page actions
These give immediacy but also will trap you into not handling multiple items at
once.
Don't forget about the lowly checkbox
Not as sexy, but very servicable.
71
72. anti-patterns
meandering way.
big ball of mud.
borg idiom. tiny targets. mystery meat.
buried treasure. hover and cover.
pogo stick navigation. novel notions.
against the flow. metaphor mismatch. jabberwocky.
double duty. linkitus. blind type.
windows aplenty. animation gone wild.
misguided misdirections. unmarked hazards. missed
moments. missing scene.
one at a time. non-symmetrical actions.
72
73. my blog. looksgoodworkswell.com
this prez. billwscott.com/share/presentations/2007/wb2.0/
my email. b.scott@yahoo.com
NETFLIX is hiring!
UI Engineers
Visual/Interaction Designers
Graphic Designer
73