Everything we design and build exists as a part of an ecosystem, the physical and digital environment
in which the user perceives and uses it. Though we should always have been designing like this, your
connected city, home and wearable devices give us an excuse to think specifically about the use and
technology to make it work best.
This session will discuss and demonstrate how to use proven UX design tools to get to the new needs
of users, and how to think about exploiting new technologies.
Participants will work as teams to create new product ideas, and develop them into workable services
by using technology and considering the user, their needs, and their environment.
Presented at UXPA-China UserFriendly 2016 in Suzhou, 17 November 2016.
UX for Mobile with Steven Hoober at Pointworks AcademySteven Hoober
If you work on a team without sufficient time or resources and need to do design thinking outside your official role yourself, this workshop can help. There are roles in the workshop for product owners, information architects, interaction designers, content managers, UI/visual designers and developers.
In this course, you’ll discover:
The way digital products really work; layering, the stack and back
Proven UX design tools to get to the new needs of users, and how to think about exploiting new technologies
A brief history of design; how Swiss Modernism is what we mean by flat today
Designing by zones; touch accuracy and touch preference regions are not what you think
How to conquer Blank Page Syndrome by designing interfaces using mobile OS navigation patterns
The overlap between technology and use, including how people use different devices in different contexts at different times of the day
Design considerations unique to mobile, including features and sensors that aren’t available on desktop applications
Problems of poor connectivity, and how to plan for them; it’s not just “airplane mode”
How to create task flows that account for the user and the system all as one
Presented at MoDevUX on 23 March 2015
Everything we design and build exists as a part of an ecosystem, the physical and digital environment in which the user perceives and uses it. Though we should always have been designing like this, the ubiquity of mobile smart devices, connected cities, smart homes and the flood of wearables give us an excuse to think specifically about the real use cases and how to pick the right technology to meet opportunities for your organization and your users.
In this 3-hour workshop, we will discuss how to use existing, well-proven UX design tools and methods to get to the new needs of users, and how to think about exploiting new technologies in the best possible way. Participants will work together to design connected digital products through a series of engaging team exercises.
You can’t just build a successful mobile app or website without first understanding how the user thinks and what they need from you. Everything we design and build exists as a part of an ecosystem, the physical and digital environment in which the user perceives and uses it.
In this 3-hour Masterclass, we will discuss how to think specifically about the real use cases and how to pick the right technology to meet opportunities for your organization and your users.
We will practice using existing, well-proven UX design tools and methods to understand users, and to design your mobile products to engage real people.
We’ll wrap up by reviewing the actual products you are working on, to leverage what we’ve just learned to improve them even more.
Presented as a workshop at GPeC 2019 in Bucharest. Hands on parts you have to do on your own, therefore.
Introduction to User Experience :
What is User Experience?
User experience (UX) is the amount of a serial interactions of a person with a product, service, or organization.
A General Example
Multi-Disciplinary Contributions
Factors that affects ux
Good And Bad User Experiences
Good And Bad UX example
UX for Mobile with Steven Hoober at Pointworks AcademySteven Hoober
If you work on a team without sufficient time or resources and need to do design thinking outside your official role yourself, this workshop can help. There are roles in the workshop for product owners, information architects, interaction designers, content managers, UI/visual designers and developers.
In this course, you’ll discover:
The way digital products really work; layering, the stack and back
Proven UX design tools to get to the new needs of users, and how to think about exploiting new technologies
A brief history of design; how Swiss Modernism is what we mean by flat today
Designing by zones; touch accuracy and touch preference regions are not what you think
How to conquer Blank Page Syndrome by designing interfaces using mobile OS navigation patterns
The overlap between technology and use, including how people use different devices in different contexts at different times of the day
Design considerations unique to mobile, including features and sensors that aren’t available on desktop applications
Problems of poor connectivity, and how to plan for them; it’s not just “airplane mode”
How to create task flows that account for the user and the system all as one
Presented at MoDevUX on 23 March 2015
Everything we design and build exists as a part of an ecosystem, the physical and digital environment in which the user perceives and uses it. Though we should always have been designing like this, the ubiquity of mobile smart devices, connected cities, smart homes and the flood of wearables give us an excuse to think specifically about the real use cases and how to pick the right technology to meet opportunities for your organization and your users.
In this 3-hour workshop, we will discuss how to use existing, well-proven UX design tools and methods to get to the new needs of users, and how to think about exploiting new technologies in the best possible way. Participants will work together to design connected digital products through a series of engaging team exercises.
You can’t just build a successful mobile app or website without first understanding how the user thinks and what they need from you. Everything we design and build exists as a part of an ecosystem, the physical and digital environment in which the user perceives and uses it.
In this 3-hour Masterclass, we will discuss how to think specifically about the real use cases and how to pick the right technology to meet opportunities for your organization and your users.
We will practice using existing, well-proven UX design tools and methods to understand users, and to design your mobile products to engage real people.
We’ll wrap up by reviewing the actual products you are working on, to leverage what we’ve just learned to improve them even more.
Presented as a workshop at GPeC 2019 in Bucharest. Hands on parts you have to do on your own, therefore.
Introduction to User Experience :
What is User Experience?
User experience (UX) is the amount of a serial interactions of a person with a product, service, or organization.
A General Example
Multi-Disciplinary Contributions
Factors that affects ux
Good And Bad User Experiences
Good And Bad UX example
User Experience 3: User Experience, Usability and AccessibilityMarc Miquel
This presentation introduces the most important usability models among other concepts (affordances, heuristics, etc.).
These slides were prepared by Dr. Marc Miquel. All the materials used in them are referenced to their authors.
Winning Experiences: Delivering Better Solutions through Outcome-Driven DesignBarcoding, Inc.
Steven Herbst, director of experience design, Honeywell, takes a look into how to deliver better solutions through outcome-driven design. In this presentation he talks about the anatomy of an experience outcome and shows how to build an outcome-based framework.
Usability vs. User Experience: What's the difference?Domain7
What's the difference between usability and user experience? Is there one? Check out Domain7's quick, handy guide—for designers, developers, and clients alike! Learn more: http://www.domain7.com/blog
Originally Presented at Mobile Trends 2014 in Krakow, Poland on 16 January 2014
Almost all mobile apps fail to make back even their development costs. Add user-centric tactics and principles to help you understand users and their needs, and validate your ideas before you spend the time.
Usability and User Experience Training Seminarlabecvar
This presentation describes a day-long seminar for giving participants an overview of best practices in usability design and research. Also included are several hand-on exercises to be done throughout the day to solidify participants' understanding of course concepts.
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
There's a rumor going around that user experience design (UXD) and Agile don't play well together. In this talk, I'll explain that they do -- most of the time! Learn about the historical reasons for why these two disciplines sometimes butt heads, as well as the good/bad/ugly of various approaches to integrating design and development.
Introduces empathy as the essence of DevOps. Describes specific ways empathy manifests in successful DevOps environments. Challenges organizations to treat IT transformation as more of a design problem than an engineering problem.
Methods and tools for human centered ICT: from human values to real-life inno...Human Centered ICT
Mulder, I., van Waart, P., Leurs, B. & Choenni, R. Methods and tools for human centered ICT: from human values to real-life innovation. Presented at D-CIS Human Factors day 2008, 10 September 2008.
Designing for Customer needs: A UX PerspectiveRichard O'Brien
A brief 20 min talk I gave to the Head Start meetup (@HeadStartAus), introducing some Lean techniques to help them consider the customer throughout the product & biz development process.
User Experience 3: User Experience, Usability and AccessibilityMarc Miquel
This presentation introduces the most important usability models among other concepts (affordances, heuristics, etc.).
These slides were prepared by Dr. Marc Miquel. All the materials used in them are referenced to their authors.
Winning Experiences: Delivering Better Solutions through Outcome-Driven DesignBarcoding, Inc.
Steven Herbst, director of experience design, Honeywell, takes a look into how to deliver better solutions through outcome-driven design. In this presentation he talks about the anatomy of an experience outcome and shows how to build an outcome-based framework.
Usability vs. User Experience: What's the difference?Domain7
What's the difference between usability and user experience? Is there one? Check out Domain7's quick, handy guide—for designers, developers, and clients alike! Learn more: http://www.domain7.com/blog
Originally Presented at Mobile Trends 2014 in Krakow, Poland on 16 January 2014
Almost all mobile apps fail to make back even their development costs. Add user-centric tactics and principles to help you understand users and their needs, and validate your ideas before you spend the time.
Usability and User Experience Training Seminarlabecvar
This presentation describes a day-long seminar for giving participants an overview of best practices in usability design and research. Also included are several hand-on exercises to be done throughout the day to solidify participants' understanding of course concepts.
User Experience Design + Agile: The Good, The Bad, and the UglyJoshua Randall
There's a rumor going around that user experience design (UXD) and Agile don't play well together. In this talk, I'll explain that they do -- most of the time! Learn about the historical reasons for why these two disciplines sometimes butt heads, as well as the good/bad/ugly of various approaches to integrating design and development.
Introduces empathy as the essence of DevOps. Describes specific ways empathy manifests in successful DevOps environments. Challenges organizations to treat IT transformation as more of a design problem than an engineering problem.
Methods and tools for human centered ICT: from human values to real-life inno...Human Centered ICT
Mulder, I., van Waart, P., Leurs, B. & Choenni, R. Methods and tools for human centered ICT: from human values to real-life innovation. Presented at D-CIS Human Factors day 2008, 10 September 2008.
Designing for Customer needs: A UX PerspectiveRichard O'Brien
A brief 20 min talk I gave to the Head Start meetup (@HeadStartAus), introducing some Lean techniques to help them consider the customer throughout the product & biz development process.
From User Needs to Community Health: Mining User Behaviour to Analyse Online ...Matthew Rowe
Invited keynote talk at the 1st Workshop of Quality, Motivation and Coordination of Open Collaboration @ the International Conference on Social Informatics 2013
Presented by Allison Bloodworth & Ian Crew at the 2007 Educause Western Conference, the 2007 University of California Computing Services Conference, and the Winter 2007 Sakai Conference on December 4, 2007
Brandtzæg, P.B., & Heim, J. (2009). Why people use social networking sites. Proceedings of the HCI International. (pp. 143–152). In A.A. Ozok and P. Zaphiris (Eds.): Online Communities, LNCS. Springer-Verlag Berlin Heidelberg, San Diego, CA, USA, 19-24 July
When designing for information retrieval experiences, the customer must always be right. This tutorial will give you the tools to uncover user needs and design the context for delivering information, whether that be through search, taxonomies or something entirely different.
What you will learn:
* A broadly applicable method for understanding user needs in diverse information access contexts
* A collection of information retrieval patterns relevant to multiple settings such as enterprise search and information access, service design, and product and platform management
We will also discuss the impact of organizational and cultural factors on design decisions and why it is essential, that you frame business and technology challenges in the right way.
The tutorial builds on lessons learned from a large customer project focusing on transforming user experience. The scope of this program included ~25 separate web-delivered products, a large document repository, integrated customer service and support processes, content management, taxonomy and ontology creation, and search and information retrieval solutions.
Joe will share the innovate methods and surprising insight that emerged in the process.
Human Factors in Innovation: Designing for AdoptionJim Kalbach
The ultimate goal of innovation is user adoption: we want people to actually use the things we create in a way that impacts their lives. But building the better mouse trap guarantees nothing. In fact, history shows it's not the whiz-bang of technology but rather human factors that matter in the end.
This is where UX designers come in. Through empathy and understanding of people's needs and perceptions, we can increase the rate of adoption and reduce the risk of non-adoption. This is good for business.
User centred design (UCD) and the connected homeCyber-Duck
This presentation is a summary of a workshop that was conducted at UX London and Mozfest by Cyber-Duck, an agency that merges lean and agile deliver with user centred design (UCD). The workshop was aimed at those wanting to apply UCD to futuristic technologies. The workshop explored the concepts and thinking of ‘how to design an Internet Connected Dishwasher app’ while considering a wider eco system. The workshop started by introducing IoT (and ‘nearables’), why its relevant now and how the UCD process can adapt to it. The workshop frames UCD in a wider product delivery context and is aimed at those wanting to learn on how UX tactics can be applied to successfully design IoT products and systems.
This is the in-depth presentation I did at Interaction 13 in Toronto. It gives first an approach grounded in the theory of complexity and then expands on the two fundamentals to design social experiences.
Artificial intelligence (AI) is everywhere, promising self-driving cars, medical breakthroughs, and new ways of working. But how do you separate hype from reality? How can your company apply AI to solve real business problems?
Here’s what AI learnings your business should keep in mind for 2017.
Designer is constantly confronted with challenge that how to make the application simple but also powerful. Powerful features will usually result in the complicated user interface. How to simplify it without sacrificing the powerfulness ?
This decks are for addressing the challenges from both product management and user experience design perspectives.
Slides Marc Wendell recently used in his discussion w/ mentees of The Product Mentor.
The Product Mentor is a program designed to pair Product Mentors and Mentees from around the World, across all industries, from start-up to enterprise, guided by the fundamental goals…Better Decisions. Better Products. Better Product People.
Throughout the program, each mentor leads a conversation in an area of their expertise that is live streamed and available to both mentee and the broader product community.
http://TheProductMentor.com
Why software will never be the same... Discuss why agile and lean development methodologies alone are not enough to compete in today's software startup market. Explore real-time prototyping and minimal viable experiments that can accelerate learning down to hours, not sprints.
This presentation taget basics of UX design fundamentals. It’s a quick overview, so you can go from zero-to-hero as quickly as possible. One more Advance course on UX practices is coming soon...
You likely have a lot of great learning content in your library. How do you get it to mobile devices without attempting (and likely failing) the dreaded conversion process? It can be difficult to think through the ideation process to bring new life into your content for the small screen and the on-the-go mobile learner.
Session participants will examine a number of high-profile success stories and gain insight into the instructional design process used to marry mobile user-experience design and existing content. You’ll see examples, case studies, and process documents, and you will explore real-world examples on how to successfully refocus your efforts to create great mobile learning.
Usability Tips And Tricks For Beginners Experience Dynamics Web SeminarExperience Dynamics
Usability is commonly thought of as the art and science of making things easy to use.
What is behind the science of usability? How do we know when something is easy, easy to learn and satisfying?
Why is usability so important for any product, website, software or web application (including Rich Internet Applications)?
This was a usability presentation I gave in February, 2013 at the IIS Cognitive Brownbag. My inspiration for creating and presenting on usability was to encourage my colleagues to take a user-centered perspective when designing software. Another goal was to encourage use of agile development methodologies with a focus on user testing.
UCD / IxD Introduction - User centric design, interaction designsdavis6b
An introductory talk on User Centric Design / Interaction Design (IxD). This covers Alan Cooper's ideas about effective role and goal modeling to facilitate smoother software development, and ultimately, better software.
My presentation for Hack the Hackathon Istanbul. I edited the presentation and added some notes for readers.
Basically tells the meaning of user experience as it is supposed to be. Let's define it without boundaries, not stuck in digital life.
You will get what is it as a terminology, what is the main parts of experience, how to check and change it. The essentials of UX and basic fundamentals.
Designing for complex business problems HelloMeets
This was discussed at a Product Design workshop conducted by HelloMeets at Pickyourtrail office in Chennai.
Speaker and presentation by:
- Bharghavi Kirubasankar, Senior Product Designer at Freshworks
- She started off as a graphic designer, moved into UI design and then transitioned to UX
- She has been working with Freshworks for more 3 years and take cares of the end to end feature releases, which also involves research and collaboration
-Previously worked at Cognizant Technology Solutions as - Associate-Projects & Programmer Analyst
The content of the presentation is around:
- Knowing complex problems & defining them
- Setting up a solution strategy
-Assessing business goals
-Defining success criteria
-Making design research happen
-Making sense of the data
- Running a design sprint
- Adopting Lean UX principles
A workshop on how to leverage lean design/design thinking & existing technologies to test ideas and build viable products and solution to business problems.
It’s okay to use hamburger menus! We know how people really use their mobile phones and tablets and have developed a human-centered design system to encourage your eCommerce users to find and understand your products better to close sales more easily.
Mobile touchscreens are not new. We have data on how people use their mobile phones and tablets. We can use this to create human-centered design systems for more consistent and usable design.
In this session you will learn a very simple set of tactics to place content, create more useful interactions, and design a consistent and readable navigation and way-finding system for your eCommerce mobile app or website.
Presented at GPeC 2019 in Bucharest
It's okay to use hamburger menus! We know how people really use their mobile phones and tablets, and have developed a human-centered design system to encourage your eCommerce users to find, understand, and transact better.
Presented at Mobile Trends Conference 2018, Krakow Poland
Today’s world is full of open, and airy, beautiful, tediously identical, and unusable designs. Trends shouldn’t be taken too far, and we can easily make modern interfaces that work. But being authentically digital doesn’t just mean removing gradients and woodgrains.
In this workshop we’ll discuss principles, define how to make interfaces that work for real people in the real world, and redesign design your website, mobile app or other interface how people expect their various devices to work for them.
Presented at UXPA-China UserFriendly 2016 in Suzhou, 19 November 2016.
Phones Aren’t Flat: Designing for People, Data & EcosystemsSteven Hoober
A session at Society for Technical Communication (STC) Summit 2015
Tuesday 23rd June, 2015 9:45am to 10:30am
We like to think phones are flat slabs of glass our users touch, but it's not entirely true. Everything we design and build exists as a part of an ecosystem, the physical and digital environment in which the user perceives and uses it. Though we should always have been designing like this, multi-screening, smart homes and wearable devices give us an excuse to think specifically about the real ways people work. We'll discuss how to use technology to build products and services—not just apps and websites—for your business and users.
We will apply this with a brief exercise, so bring along a current or recently-completed project, or a favorite (or least favorite) tool you use day to day to work on.
Fingers, Thumbs & People: Designing for the way your users really hold and t...Steven Hoober
For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid
Summary in text and all the linked articles, research and references are at: 4ourth.com/Touch
We are finally starting to think about how touchscreen devices really work, and design proper sized targets, think about touch as different from mouse selection, and to create common gesture libraries.
But despite this we still forget the user. Fingers and thumbs take up space, and cover the screen. Corners of screens have different accuracy than the center. It's time to re-evaluate what we think we know.
Steven reviews his ongoing research into how people actually interact with mobile devices, presents some new ideas on how we can design to avoid errors and take advantage of this new knowledge, and leaves you with 10 (relatively) simple steps to improve your touchscreen designs tomorrow.
How People Really Hold and Touch (their Phones)Steven Hoober
For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid
Presented at ConveyUX in Seattle, 7 Feb 2014
For the newest version of this presentation, always go to: 4ourth.com/tppt
For the latest video version, see: 4ourth.com/tvid
We are finally starting to think about how touchscreen devices really work, and design proper sized targets, think about touch as different from mouse selection, and to create common gesture libraries.
But despite this we still forget the user. Fingers and thumbs take up space, and cover the screen. Corners of screens have different accuracy than the center. It's time to re-evaluate what we think we know.
Steven reviews his ongoing research into how people actually interact with mobile devices, presents some new ideas on how we can design to avoid errors and take advantage of this new knowledge, and leaves you with 10 (relatively) simple steps to improve your touchscreen designs tomorrow.
Presented at ConveyUX in Seattle, 7 Feb 2014
There is a gap between the most discussed and trendy practices in design, and the way many UX professional do their work. Sketching in the browser is fine for those who only design websites (and have a coding background) but what about apps, messaging, services and systems?
In this workshop Steven will outline some of the basic principles of good tools, and demonstrate with simple hands-on exercises how to use your existing software, and other simple techniques to design for multiple screen sizes, multiple contexts and every platform.
You will learn:
- How to consider scale, and really understand portability and touch.
- Design with adaptive and responsive needs in mind.
- Specifying design, so UX speaks the language of implementation.
- Service and systems design techniques.
- Quick techniques to assure that your designs will work in context.
Entrepreneurial User Experience: Improving your products on a shoestringSteven Hoober
Presented 6 & 8 January, 2013 at Kauffman Labs, Kansas City, Missouri
Many big, successful companies hire User Experience experts to help analyze and design the system from the user's point of view, and assure their users can use their digital products. But assuming you can't hire one of those yet, Steven Hoober will teach you a little about how to embed the principles of UX into everything you do, every day, and how to improve tasks you are already doing to better guarantee the right outcomes.
There will be a focus on mobile and multi-channel experiences, but the principles willapply to any digital platform. Whether you are trying to just improve the website for your product, or create an all-new, all-digital experience, come — and bring your whole team — to put these principles into practice.
Jan 6th, 6pm-8pm
What is UX, why it's not just colors and fonts, and why designing for experience matters.
Understanding your audience, their goals, and yours.
Ecosystem design. A website is not a digital strategy: finding what your experience strategy is.
Jan 8th, 6pm-8pm
Formalizing baseline analysis with heuristic evaluations.
Tactics for discount usability testing in a multi-device world.
What you should bring:
Paper Ticket for the class
Something to work on. I will provide you with a fake project for the exercises, but if you are willing to let others see your idea, or some subset or faked version of it, then go ahead.
Your whole team. We will mix and match and you can meet new people, but bring everyone in your company or department if they have the time. If you want, your actual team can be a workshop team so you get used to the tactics being taught.
Presented 12 December 2013 at MoDevEast13
We are finally starting to think about how touchscreen devices really work, and design proper sized targets, think about touch as different from mouse selection, and to create common gesture libraries.
But despite this we still forget the user. Fingers and thumbs take up space, and cover the screen. Corners of screens have different accuracy than the center. It's time to re-evaluate what we think we know.
Steven will review the current state of research on how people actually interact with mobile devices, present some new alternative ideas on how we can design to avoid errors and take advantage of this knowledge, and review work you bring so we can all come up with ways to improve real world sites and apps today.
Mobile Design: Adding Mobile to Your Learning EcosystemSteven Hoober
Presented at DevLearn 2013, 24 October 2013, Las Vegas
Every platform offers unique challenges and opportunities. As mobile becomes the preferred platform, you have to address what makes it work well to assure success, satisfaction, and maybe delight. And it’s a lot more than size and touch. Mobile and desktop are very different in their principles and in the way people use them. Learn about the pitfalls and fallacies of designing for mobile and multi-platform, multi-user experiences.
How People Really Hold & Touch (their phones)Steven Hoober
Despite decades of research and years of carrying a touchscreen mobile handset around, there’s a lot of myth, disinformation, and half-truths about how touchscreens work, how users actually interact with touch devices, and how best to design for touch.
Participants in this session will get research findings and other data in order to clarify and set aside misunderstandings about user behavior and touchscreen technologies. You’ll learn the different ways and types of interactions for touch devices that will give you a solid base of knowledge you will then use to review how behavior and interaction can influence design patterns and design choices.
The Trouble with All Those Boxes: Designing for Ecosystems Instead of ScreensSteven Hoober
The desktop web has all but ruined the practice of interaction design and information architecture by the assumptions about technology and user attention, and a rigid adherence to page-based design. Mobile is different and is exposing these problems more than any other digital system. We cannot gloss over bad design anymore because it can make or break your whole organization. Many organizations, even if they address the design or user experience head on, are built to work on the desktop Web so they are having trouble really embracing mobile at the tactical level, even if their leaders set goals and objectives to do so.
During this session, participants will discuss the pitfalls and fallacies of designing for mobile and multi-platforms. You’ll learn principles and tactics for building multi-user, multi-platform experiences and you’ll learn by attempting to improve an example project. This will give guidelines for how to meet user goals, needs, and expectations in all your platforms.
In this session, you will learn:
How to recognize and avoid pitfalls in your project development, UX design, and development practices
To design your digital products as universal, extensible services and ecosystems
The principles of resilience design, and how to design robust systems that function and satisfy even when mistakes occur
How to branch design to address platform-specific features, capabilities, and expectations
Turning Boxes into Ecosystems: Successful multi-channel, multi-platform, mult...Steven Hoober
Presented as a workshop at MoDevUX 2013 in McLean, Virginia, 9 May 2013
The desktop web has all but ruined the practice of interaction design and information architecture by assumptions about technology and user attention, and rigid adherence to page-based design.
If you are paying attention to what your users expect, you'll note that mobile is really exposing these problems. And it's just getting more complex as we have to make our digital products work on TVs and set top boxes, kiosks, and now think of interfaceless devices.
Steven will discuss pitfalls and fallacies of designing for mobile, and for multi-platform, multi-user experiences. Then we will all try out some principles and tactics to solve these on examples, and discuss ways they can be applied to your organization.
Designing for ecosystems and people instead of screens and pages Steven Hoober
How successful strategies involve focusing on and embracing complexity, fragmentation and unpredictability of the way users employ mobile digital and especially mobile systems.
BE SURE TO READ THE NOTES attached to each slide. The slides themselves are mostly pretty pictures, so won't make a lot of sense.
Presented 23 January 2013 at an IXDA Silicon Valley and BayCHI event hosted by Yahoo! in Sunnyvale, CA.
Presented at Float Mobile eLearning Symposium, at Chicago TechWeek, on 25 July 2012.
Buzzwords and trends in design, development and process hold much weight in our industries, and foster much arguing and staking out of opposite positions. But more of these are in fundamental agreement than is generally acknowledged, and merging approaches, much like collaborating with a varied team, can yield the most useful results.Steven will discuss the underlying principles of responsive & fluid design, progressive enhancement, adaptive design, device detection, multi-platform design, cross-platform development processes, and mobile device capabilities. He will present one possible unifying theory of how you can not just develop the shiniest iOS app, but design the best experience for your users, on every screen and with every interaction.
19. 19
“Error is viewed, therefore, not as
an extraneous and misdirected or
misdirecting accident, but as an
essential part of the process
under consideration.”
– John VonNeumann
“Error in Logics,” 1952
31. 31
What is the product?
You are in an elevator with a chief executive of your company. He asks, “what are you
working on these days?”
In one short sentence, using plain (non-technical) language, explain what the product is.
What is its one, main purpose?
Pick a single feature of the product you think is critical and express it in as few words as
possible. 1-2 word phrases are perfectly fine (“receive cards”); these do not need to be
complete sentences. Do not consider technology, UI, wording or other content at all.
Now, answer it again. You may answer as many as five times in total. Do not restate any
points; each one should be unique.
What one problem or concern does it solve?
Products are pursued as a result of a business opportunity, or a business problem. Consider
any opportunity to be a “problem” in the sense that its something the company is not
pursuing (so a missed opportunity for now).
Who will use this product?
Instead of trying to design the product for everyone, we will be focusing on feature sets, and
interface designs that meet the primary needs of a small but focused set of users. These
32. 32
In one short sentence, using plain (non-technical) language,
explain what the product is.
What is its one, main purpose?
Pick a single feature of the product you think is critical and
express it in as few words as possible. 1-2 word phrases are
perfectly fine (“receive cards”); these do not need to be
complete sentences. Do not consider technology, UI, wording
or other content at all.
Now, answer it again. You may answer as many as five times
in total. Do not restate any points; each one should be
unique.
What one problem or concern does it solve?
67. 67
Contact me for consulting, design, to
follow up on this deck, or just to talk:
Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01 on:
www.4ourth.com
Editor's Notes
If you have been to other workshops you should understand that 3 hours isn’t really enough time. We’ll only have time to simulate exercises that take hours or days or weeks to do. So, I’ll talk a bit, you guys will work a bit, and then I will interrupt you just as it gets interesting, talk to you more, and so on.
There are 4 exercises… I think... So I will stop you from doing the exercises, so we can talk about the next phase. I have arranged it so there’s no absolutely critical last lecture. If we run out of time, so be it. We’ll get through what we can as I want you to try some of this stuff yourself.
OKAY?
…
ADD CHINESE TRANSLATION HERE
Today, I am going to talk a lot about designing and building products. Not for your organization, but for people.
ADD CHINESE TRANSLATION HERE
How do we do that? Well, for clients, to achieve goals, as parts of a team.
CLICK
Tell me who is here today. Raise your hand if you are a UX, UI or other Designer…
Writer, Content, Graphics?
Presentation Layer Developer?
Software Developer? Data Architect, DBA, or anything else implementation side?
DevOps?
Product Owners? … Okay, keep your hands up.
ADD CHINESE TRANSLATION HERE
We’re going to make some teams for the rest of this session, and you product owners are my team leaders today.
Each of you go to one of the spots on the wall where I have taped up these screens.
CLICK
And everyone else distribute yourselves so we have at least one dev, one designer, and so forth for each group.
Don’t cluster up in general. If a whole team from one company came, your choice if you want to stick together or break up…
ADD CHINESE TRANSLATION HERE
Now, Product Owners: Take this piece of paper, and a Sharpie, from me while everyone else organizes themselves like this.
Whoever is the most front-end at the front, and so forth. Product owners, go to the back of the line and keep that piece of paper to yourselves.
And we’re going to play “the telephone game,” solving, then implementing what the Product Owner wants to get done.
EXPLAIN WHAT THAT MEANS, WHISPER TO THE NEXT PERSON ONLY…
Naturally, if you have a way to improve what you were told to do, use your expertise to do that then tell the person in front of you.
And quickly! You have:
4 MINUTES
…
OKAY, YOU CAN ALL HAVE A SEAT IF YOU WANT NOW…
ADD CHINESE TRANSLATION HERE
Okay, how’d that go?
Do not get the wrong lesson, and bet on unicorns who can do this all themselves. Do not ignore product, and design, and just start coding. Instead, and what we’re going to do the rest of the day, is involve everyone (well, except this guy who’s on his computer instead) and work as a team.
ADD CHINESE TRANSLATION HERE
Because complex systems require complex solutions.
Not that this means confusing and cluttered, but let’s be clear that building bad solutions is mostly easier than building good, well-considered, universal solutions.
ADD CHINESE TRANSLATION HERE
As designers, if not humans, we've always been about building ecosystems. Your website has password reset emails, lots of people (like me) have been offering the website on mobile handsets for over 15 years. How about ATMs?
Everything is an ecosystem, and good designers know this. Newspapers and magazines are designed not just to be readable, but to be appealing to the newsstand. And, to have room for mailing labels for home delivery.
ADD CHINESE TRANSLATION HERE
Today, a popular magazine sells around 3 million subscriptions a week. Well, from the 60s or so through the 1990s, TV guide was vastly, vastly popular. They sold 20 million copies a week of this [IMAGE]. What is all but a database dump you pay for, and which is also full of ads. You can see why the Internet did so well.
The guys who actually gathered this data realized early on they didn’t make a magazine though. They had a data product. And when the first EPGs came along — the TV-Guide channel that is the first thing that came up when you turned on the early Cable TV systems — the data they had was all ready for it. They had already been storing short and long descriptions (reruns within a week don’t get the full description, or maybe space is an issue), as well as the concept of meta-data well before anyone called it that.
Derived, with some improvements for history, from http://karenmcgrane.com/category/content-strategy/ though I saw it presented instead.
ADD CHINESE TRANSLATION HERE
Simplifying the story some, what with mergers and acquisitions over the decades, the content we see today on our much more high tech cable, satellite or streaming systems is not just the same basic format, but in some cases is the SAME EXACT CONTENT.
There’s no need to write a new description for that Lawrence Welk show every time it airs, so the original 1979 description is still pulled from the database and used today. It’s all just data.
ADD CHINESE TRANSLATION HERE
This is what annoys me about almost everyone selling Anything As A Service. They want you do start from scratch. But the world is full of info, and most often improvements to that are what we want.
This is the same old subway data (and this is real, not a mockup) projected onto the sidewalk, in context. So people walking down the street can see what the trains right under their feet are doing, to determine which one to take, and how long it will take them.
ADD CHINESE TRANSLATION HERE
We need to stop cropping people’s heads off.
Wearables, even more than other products, are about people instead of the device and connections.
ADD CHINESE TRANSLATION HERE
Not least of which because systems change. In radical ways. If you are bad at designing for mobile you can get away with the same old stuff on a tiny screen. IoT and wearables are very different.
What’s next? Who knows? But if you design for systems not A System, you are better prepared for it.
STOP designing to pixel dimensions. Stop designing for phone and tablet, because look here: There’s no distinction, but a continuum of devices.
ADD CHINESE TRANSLATION HERE
What happens when the Apple Watch comes out? We already know. Just like how 2/3rd of smartphones were phablets before the iPhone 6 Plus, we have this data.
The future is not evenly distributed. This is my Pebble close to two years ago. There are over a million of these out there. Millions more fitness trackers, and smart thermostats, and smart TVs…
ADD CHINESE TRANSLATION HERE
And you may be surprised that industry leads the way. There are almost 50 million smart electric meters in the US right now. They are getting smarter, as well.
Start looking up, and you’ll see a lot of antennas hanging off buildings, power, phone and cable lines, on top of trucks. The Internet of things is here, just commercial and industrial.
ADD CHINESE TRANSLATION HERE
Okay, let’s make our own system. For the rest of this session, I am not going to give you problem or design, but you will work on your own. Remember, not a website, or an app, or a smartwatch, but a solution or service.
Or even a problem, and you all can try to solve it. Start thinking of what you might want to work on, while I talk at you for a bit longer…
ADD CHINESE TRANSLATION HERE
Information Architecture is a term or concept I hope and pray you have heard. You probably have designed to it. And you may have mis-used it, so I have to talk about it a bit even if you are an experienced designer already.
IA is the underlying organization, structure and nomenclature that define the relationships between a product’s content and functionality.
ADD CHINESE TRANSLATION HERE
Navigation communicates to the user where they are and allows access to the features and information on the site or in the app, or printout, or DVD or whatever. But it’s an abstraction of the complete structure. IA is not navigation, but the structure you derive navigation from.
IA is not just digital, or just about one channel. You can and should do most of the IA work before you have settled on a platform. I often do that, and use the structure to help define what features go on which platform. Or even to make informed choices about the platform needs.
Information architecture is not about the UI, but the information, and good IA considers the expectations and experiences of the users.
ADD CHINESE TRANSLATION HERE
For a long time, we have assumed computers are infallible, but long ago they were not, and lately we have realized that in aggregate, there are still problems.
Resilience engineering is something used to keep big, reliable services like Google, Facebook, Etsy, Flickr, Yahoo, or Amazon online. At a deep engineering level they follow practices and procedures to assure their systems are not brittle, and avoid failure or fail gracefully and can be fixed easily even with power failures, network breaks and typhoons.
Resilience is usually defined as the ability of a system to absorb disruptions without tipping over to a new kind of order. A building when exposed to too much lateral ground movement settles into a state of “pile of rubble on the ground” unless you design it to resist the disruption of earthquakes adequately.
ADD CHINESE TRANSLATION HERE
You can’t prevent these problems, so you have to expect and plan for them.
From our point of view, remember is that everything you do is too complex to adequately model and map. Assume you have always missed something, so you are prepared to deal with the unexpected, both in design and so you can modify your product over time to take advantage of new ways you find people using your information.
ADD CHINESE TRANSLATION HERE
I say there’s also something called Resilience Design. Here’s a simple example…
Though I love my smartwatches, I also still wear normal dial watches. One is a dive watch, because it’s shiny, not because I am a diver or anything. It is one of those with a twisty ring around the outside. That part with the numbers here twists around.
If you don't know, and I didn't until recently, this is used as a simple timer. But on mine, and on all dive watches (vs. Aviators watches), the ring only goes one way. The clicky detent lets it go counter-clockwise, only. WHY? … Because it's for timing remaining air. The ring might get bumped and change it's setting. Having it show less time might be inconvenient, but going the other way might kill you. And, you don't even need to know this. It just works. That's the sort of brilliantly-simple answer I am talking about with resilient design.
ADD CHINESE TRANSLATION HERE
Resilient design doesn’t just mean removing error messages, but embracing that people use your product in various ways. Providing alternative paths, like letting people “wait in line” at the DMV with text messaging.
ADD CHINESE TRANSLATION HERE
Or removing the whole principle of you asking a computer to do anything. We can collaborate with our computers, so they can analyze data and push it to you…
ADD CHINESE TRANSLATION HERE
…or simply change your environment, and only notify only if you bother to go check. Usually because something is wrong.
ADD CHINESE TRANSLATION HERE
Okay, got some good ideas? Get with your teams and take THIRTY SECONDS each to pitch your idea to the rest of the team.
As a group, agree on ONE idea to work on. If serendipity hits, sure you can combine them into one product.
5 MINUTES
…
ADD CHINESE TRANSLATION HERE
We’re not going to be able to hit up every step in an ideal process to design your system, just for time. But the first one is important…
ADD CHINESE TRANSLATION HERE
Don’t draw.
I came to many of the convictions in my career by massively failing and wasting my time. I re-confirmed it recently, building a very beautiful product that’s somewhat odd and disjointed. Though we are working on it.
Because if you go to drawing too early, which I and many of us are naturally inclined to do, we get locked into interface and interaction decisions. We make choices that look good based on specific steps in the process, not the whole ecosystem. For the recent failure I am mentioned, we have FIFTEEN different styles of dialogs. That’s just stupid.
The first thing to do when designing is to resist the urge to draw at all. Instead, we need to understand, and define.
ADD CHINESE TRANSLATION HERE
And you define the basic outlines of your product.
What is your audience?
What are their goals?
What are they using now to solve this need?
Why is your organization doing this?
ADD CHINESE TRANSLATION HERE
While many of these are interesting, often the best way to understand some of them is to answer “what are they using now.” Very often, it’s surprising. It’s not a website, or any a competing product. Often it’s post-it notes around the edge of their monitor, notes on the fridge. Drawers full of labels and manuals. Or even nothing.
The photo is from a site visit I did semi-recently, where I am tested a mobile app to do something about smartphones connecting to trucks. These are the records of this maintenance shop. There is NO good digital product for the legally-required recordkeeping for their 130 trucks.
In the old days we wanted to replace paper with sitting at a computer to solve problems. Now we can more closely emulate the environment, and the overall user context. Ethnography (sitting with the user to understand how they go about their day) is even more important. Find your users.
ADD CHINESE TRANSLATION HERE
Often before I visit users, I try to elicit the institutional knowledge of the organization I work with. We workshop, getting everyone into a room and gathering information about current processes, methodologies, business practices, goals, complaints, etc.
ADD CHINESE TRANSLATION HERE
There are fairly formal ways to do this, which I like to talk about because they work so very, very well.
If you just ask people what they know, they do not know. If you ask them to work together, they generally do not, but there are tricks to get the information anyway.
ADD CHINESE TRANSLATION HERE
Today, for the product you guys have all settled on, we’re just going to do one of the questions. It’ll be okay; we can use this to inform our design very well.
Everyone take a Post It pad and a sharpie. And nothing else. This is one of the tricks, to keep the number of words you write down. Don’t let your participants pull out pens, or use bigger pieces of paper. Force them to boil it down to key thoughts.
Then, you will all write down this, the one main purpose of the product. Then repeat that, one at a time, until you have no ideas. Keep it to yourself. We’ll share in a minute.
Take FOUR OR FIVE MINUTES for this.
ADD CHINESE TRANSLATION HERE
…
Now, put them all on the wall. And once you have done that, feel free to move everyone else’s cards around, too.
ADD CHINESE TRANSLATION HERE
…And when you stop clustering, you will end up with this. Labeled groups of key features, and functions.
Do that now, and I’ll walk around and help as needed.
TIME LIMIT:
Done:
I like these not just because it’s an effective data gathering method, or because it’s easy to make device-agnostic and user-centric,
but because it’s a collaborative method. Inherently. It is set up to assure that everyone contributes equally.
And I can even demonstrate this and do so in some workshops.
http://www.uie.com/articles/kj_technique/
ADD CHINESE TRANSLATION HERE
What you have now ended up with is a map of your product, not unlike this. Something user-centric, product-focused, and simple though about a complex product.
Now we’re going to expand on that. We’re going to directly take that information gathering exercise and make an IA diagram, user task flow, or whatever solves the needs.
There are many ways to draw this. But most of all, make sure you talk about services, data, sensors, networks and USERS. Not screens, pages, buttons.
ADD CHINESE TRANSLATION HERE
It doesn’t have to be pretty. Just start with boxes, or even literally take post-its off the wall and start the diagram from whatever else you have done, by gathering requirements from your users or clients.
ADD CHINESE TRANSLATION HERE
If more comfortable with thinking about the user and their environment directly, this is a good place to use the storyboard.
And, feel free to use several methods. Some of these diagrams I am showing you were from the same project, just different ways of depicting and thinking about the user.
ADD CHINESE TRANSLATION HERE
You may be wondering, how do we think about data, and systems and connectivity? Well, do that also.
None of this is just about users, or just about any other one facet. Ideally, you never again make a document that disregards other layers of the stack. In this case, your data and interconnectivity is critical.
It might be hard to see, or to make everyone understand that a box is not about UI but process. You may need to extract it more explicitly like this with the row of external data sources and sensors along the bottom.
ADD CHINESE TRANSLATION HERE
So, grab more paper and sharpies, and draw one for your product.
Include what you need first, and don’t worry about the edges. Keep in mind resilience, so avoid error messages, settings, etc and see if you can keep the core information and interaction simple.
Make it device agnostic. Don’t worry about what system the user interacts with, and if you have to design in context, pantomiming holding a phone, instead keep changing the context, and have them look at computers, walls, wearables, etc.
20 MINUTES…
ADD CHINESE TRANSLATION HERE
Remember that end users do not see those diagrams. Don’t let anyone get worried about being confused by that, as long as the final interface doesn’t look confusing.
Do you know the IA of Amazon, or your favorite news source? Probably only a smattering of it. You know maybe that you should search on Amazon within books to make sure you can find the Hitch-Hikers Guide to the Galaxy book, instead of being flooded with results from that pretty mediocre movie.
ADD CHINESE TRANSLATION HERE
Remember what I said: IA is not navigation, or wayfinding, but it can inform it. Like many news sources do, you can expose the categories not as tedious tab bars but as ways to Organize The Information organically. Users can find the story they are looking for, or the category of information.
ADD CHINESE TRANSLATION HERE
I think we’re all familiar with how Netflix works as well like this. And here is a good example of complexity. Funny categories, and categories specific to your behavior can be exposed to make apparent how the system works, and help the user find content they want.
ADD CHINESE TRANSLATION HERE
That may be too familiar. Let’s talk about something else. Like washing your hands.
We just want this at the end, dry hands, but all too often we get…
ADD CHINESE TRANSLATION HERE
This. Or nothing at all.
But setting aside implementation failures, the modern, powered, electronic paper towel dispenser causes us no end of trouble.
ADD CHINESE TRANSLATION HERE
Even if we figure out we have a hand-waving device, and it works, the motion is hilariously unnatural. What does this gesture have to do with getting a piece of paper?
ADD CHINESE TRANSLATION HERE
I like these. Grab a towel, then another one comes out. The sensor is inside, so it’s more reliable.
Natural motion and everything.
ADD CHINESE TRANSLATION HERE
But wait, why do we need batteries and sensors? This is how paper towel dispensers worked forever before we made them complex. Tug on one, another comes right out.
Lots of solutions I come up with for apps and websites are like this: email, paper, stickers, improving the hardware, fixing the database…
ADD CHINESE TRANSLATION HERE
But too often, this is the solution that gets the funding.
It’s a hand-washing station. You press a button for water, then a button for soap, then a button for water, then a button for air, then dry your hands on your shirt.
They each come out different places, so you move your hands to different positions. Which is not enough to turn it on!
You really do have to press a button. Wet, soapy, etc. In this day and age. Unsanitary? Mostly, un-necessary. Sensors are (seriously) cheaper than buttons and can make the experience a LOT better. There’s nothing about this product (which I actually encountered, and used) which is even marginally good, much less better than a hose, a bar of soap and a towel.
ADD CHINESE TRANSLATION HERE
Don’t forget to solve problems, in the best way possible, for people… This is what people want, not more batteries to change, more UI’s to learn, etc. etc…
Is your product being awesomely technical and impressing your friends, or is it solving the one problem people need, in the easiest way, and just giving them dry hands?
ADD CHINESE TRANSLATION HERE
Let me ground it in something more specific, and usable. Think back to the first exercise we did. Not just the team-building parts, but the solutions you came up with. How many of you solved it without adding a single button, word or anything?
SHOW OF HANDS.
On your computer when you want to share an image, you go to the tool you want to share with. Launch Twitter or go mail.google.com and then attach the file. But on mobiles, you just press the little share icon.
CLICK
And it loads an Intent. Your app (or with limits your website) can just say “I would like to share this” and the OS offers up apps that can handle it. This may sounds suspiciously similar to the way the OS monitors for Custom URIs, and that’s because it is.
ADD CHINESE TRANSLATION HERE
This works for lots of tools. Assume you are building a tool that, like Twitter, allows you to attach images. You can integrate camera controls… but why bother?
Just add an image intent.
ADD CHINESE TRANSLATION HERE
And it pops up a function to select photos, or take a new one.
ADD CHINESE TRANSLATION HERE
There’s no learning curve, and massively less for you to actually build and test.
These tools are well designed to support these alternate use cases. Notice the X in the corner here to abandon the task?
ADD CHINESE TRANSLATION HERE
Or the checkmark? You can retake, abandon or approve this for inclusion. Not part of Twitter, but of the camera app itself.
When done with an intent like this, it generally takes the user back to the parent app, so no worries about leaving either.
Lots of tools do this. I like to often talk about email forms. Great on your website, but for mobile web and apps, that’s just wrong. You link to installed applications because that’s the expectation and method of operation of mobiles. For email, when the user clicks to send feedback, they get their native email client (or a choice of them first), pre-populated with whatever information you want to load. But they can use their device the same way they do any other time.
ADD CHINESE TRANSLATION HERE
Now we’re going to draw some of the interface and interaction your users will encounter.
ADD CHINESE TRANSLATION HERE
Don’t get too overboard. Pick two states (screens if that makes you happy), that are related to each other, and do those on two different platforms.
Very different ones. If you do a phone, do not also do a tablet, but a watch, glasses, wall display, email, or whatever crazy sky laser hardware you came up with.
ADD CHINESE TRANSLATION HERE
Come get paper to draw on. I have stencils for a smartwatch, phones, phablets and tablets.
The touchscreen devices have these green lines, to remind you of this, where people look and touch the most, and most accurately. Tops and bottoms and menu buttons are secondary items.
For your other platforms, just draw the interface frame as best you can. Try to keep it in scale, so if doing a TV, grab another piece of chart paper, and check it by backing up 10 feet.
ADD CHINESE TRANSLATION HERE
Do not just draw the screens. Remember, you shouldn’t have only screens. Draw /interactions/. I hear lots of griping that you have to prototype to do this, but without getting into too much detail, I disagree. A lot.
Draw what happens when you click, tap, swipe or scroll. Draw vibrate, and blink. Specify timings, colors, sizes. Figure out when you display one state, vs the other, and when you switch between them. How do you transition between them?
Do this as a direct descendent of the task flow you will discover things like delay, or find ways of avoiding them. Things you would NOT discover if you prototyped with fake data, on a computer.
20 MINUTES (or whatever is left minus 10)…
ADD CHINESE TRANSLATION HERE
…
Remember to keep people in mind. People do not change, and their POV is more important than pixel sizes, or anything else about the platform or device.
ADD CHINESE TRANSLATION HERE
…But also account for the ways people use different devices due to their environment and context.
Larger handheld devices (phablets and tablets) are used further from the eye, and less on the move.
ADD CHINESE TRANSLATION HERE
…But also account for the ways people use different devices due to their environment and context.
Or the way they are perceived. This is Google’s reminder that the depth baked into all systems (but described well in Material Design) is dependent on device distance.
ADD CHINESE TRANSLATION HERE
Understand that people use their mobiles not just on the go, but all day, everywhere they go.
ADD CHINESE TRANSLATION HERE
The installed base of desktop and laptop computers is DROPPING, and even in the US more people use mobiles than computers for everyday tasks.
I expect similar behaviors as we get wearables and other connected devices out in the world; people use the device they want, for the context they need. So do not plan for overly tight use cases.
ADD CHINESE TRANSLATION HERE
This was a quick overview, and I didn’t get to all of it so I could let you do some hands on work. You need to also: talk to end users, watch them work, understand technology deeply, test and iterate, and much more.
ADD CHINESE TRANSLATION HERE
Thanks very much for your time today.
In case you don’t know who I am:
I have written books, and regularly write articles, even ones published in paper magazines.
ADD CHINESE TRANSLATION HERE
I have been designing since apps like this were totally awesome and ground breaking, for carriers, manufacturers and many more companies than I have listed here. Yeah, I worked for Sprint for 9 years, which is where a lot of my phone knowledge came from.
ADD CHINESE TRANSLATION HERE
And I do all this because I have an abiding sense of disappointment over where we are, and optimism over where we could be.
If you have questions or need more info, follow me, or contact me directly. If you miss these addresses or your phone doesn’t have the resolution, just Google my name and you’ll find me.
TIME FOR QUESTIONS?
CLOSING: CARDS, STICKERS, TOUCH TEMPLATES
ADD CHINESE TRANSLATION HERE