Better Design With Deep Thinking

dreamt up by webguru in Uncategorized | Comments Off on Better Design With Deep Thinking

Better Design With Deep Thinking

Better Design With Deep Thinking

Eric Olive



Interruptions, administrative tasks, and too many meetings are among the common complaints voiced by today’s professionals. When was the last time someone complained about a canceled meeting? In other words, everyone understands what hinders productivity, right?

Not so fast, says computer scientist Cal Newport. While we all realize that interruptions and fragmented time are troublesome, we fail to recognize:

  • The frequency of interruptions: We convince ourselves that we are focusing on one task at a time, such as a complex interaction design problem. Yet, every ten minutes or so, we check email or answer a text. Yes, we’re performing one task at a time, but the duration of that task is brief.
  • The cost of these interruptions: As Newport explains on a recent episode of Hidden Brain: “Even those very brief checks that switch your context even briefly can have this massive negative impact on your cognitive performance. It’s the switch itself that hurts, not how long you actually switch.” (Emphasis mine)

This task switching was the focus of a study by business professor Sophie Leroy. She gave participants a cognitively demanding activity, such as solving a puzzle, and then briefly interrupted them before they completed it. When they returned to the original task, their performance dropped. As Leroy explains, these “results indicate it is difficult for people to transition their attention away from an unfinished task and their subsequent task performance suffers.”

Leroy calls this carryover from one activity to another “attention residue,” meaning that people are still thinking about the previous task even as they turn to the new one.

The most effective way to avoid attention residue is to structure your work in a way that reduces interruptions. Such structure requires understanding the difference between deep and shallow work.

Deep Work, Shallow Work, And Why They Matter

“Deep work is the ability to focus without distraction on a cognitively demanding task,” writes Newport in his book Deep Work. This work allows us to absorb, understand, and act on complicated information. Examples including coding, complex project plans, user research, and sophisticated design work.

Shallow work refers to tasks that do not require extensive thought and focus such as filling out expense reports and answering emails, texts, and Slack messages.

Shallow tasks are necessary. The question is how much time to devote to shallow and deep work and how to structure work in a way that facilitates reflection and concentration.

Left image: Design is deep work. Right image: Filling out a checklist is shallow work.

Left: Design is deep work. Right: Filling out a checklist is shallow work. (Image credits: FirmBee | raw pixel) (Large preview)

The Solution: Five Practical Tips For Pursuing Deep Work

Tip 1: Jump Into Design Work

Avoid the temptation to text or check email first thing. Put your phone on do not disturb. Get out your sketch pad or open your design tool and challenge yourself to solve one gnarly design problem by 10:00 am.

While this tip sounds like common sense, it’s not quite so straightforward because we are conditioned to respond to signals around us: “External triggers are cues from our environment that tell us what to do next. These are the dings and pings that prompt us to check our email, answer a text, or look at a news alert,” explains habit expert Nir Eyal in a post about distraction.

Eyal continues: “Competition for our attention can come from a person as well, such as an interruption from a coworker when we are in the middle of doing focused work.”

Computer scientist Cal Newport expands on this point by explaining the biology behind the itch to respond. When we don’t reply promptly to a text or email, we feel like we are ignoring someone from our tribe. Emotionally, it’s the modern-day equivalent of ignoring someone who is tapping on our shoulder as we sit around the fire. In short, it’s difficult to ignore messages and requests from co-workers.

Difficult but not impossible. Extend jumping into design work by blocking out untouchable time on your calendar. What about emergencies? “The short answer is that there really never are any,” writes podcaster and New York Times bestselling author, Neil Pasricha in Why You Need an Untouchable Day Every Week. These untouchable days involve deep, creative work.

While most professionals cannot set aside an entire day each week, they can mark two-hour blocks on their calendar a few times each week. Colleagues simply see “busy” when viewing your calendar. While not foolproof, this quiet signal shows that you know how to manage your time in order to engage in the deep work that your job requires.

Tip 2: Kickstart Your Brain With Useful Questions

By definition, deep work takes time and considerable brain resources. Sometimes we need a cognitive boost before tackling the problem head-on. When this is the case, ease into deep work by composing a list of questions to stimulate reflection. For example:

  • What is the organization trying to accomplish?
  • How does this site, product, or app align with that goal?
  • If revising an existing design: What would I do differently if I could recreate the design from scratch?
  • What would I do now if there were no legacy system constraints?

Note that these questions involve design but also encourage reflection beyond the immediate design challenge. The latter is important because the longer you work on a product or project, the easier it is to develop design blinders.

Kickstart your brain (Image credit: geralt) (Large preview)

Easing into deep work or jumping in with both feet are often useful as long as it’s possible to avoid those nettlesome distractions. Even so, everyone gets stuck and needs time to regroup and let the mind wander.

Tip 3: Schedule Unstructured Thinking Time

Just as designers and other professionals need time to think through complex problems, they also need time to let the mind wander. The reason is the science behind “shower moments,” when ideas seem to arrive out of the blue.

In fact, the brain needs time for incubation, the psychological term for the unconscious recombination of thought processes after they are stimulated by conscious mental effort such as working on a specific design problem. In other words, when you set aside a strenuous mental task and do something less demanding, the brain is able to process and organize your thoughts to form new ideas.

Effective leaders value unstructured thinking time as outlined in How to Regain the Art of Lost Reflection. Jeff Weiner, CEO at LinkedIn, blocks at least 90 minutes for reflection and describes these buffers as “the single most important productivity tool” he uses. Susan Hakkarainen, Chairman and co-CEO of Lutron Electronics, uses 40-minute walks to reflect explaining that “Thinking is the one thing you can’t outsource as a leader. Holding this time sacred in my schedule despite the deluge of calls, meetings, and emails is essential.”

In short, designers should take their cues from these business leaders. Give your brain a break.

Tip 4: Vote It Off The Island

This tip comes from the Harvard Business Review article Stop Doing Low-Value Work by Priscilla Claman. She cites the example of a controller who was producing monthly reports that nobody read. He sent a list to his colleagues asking them to identify the three or four most important reports. He simply stopped writing the reports that no one was reading.

Another approach is to request permission to not do something such as asking customers if they really want their receipts. The point, writes Claman, is to stop doing something that is not important but to ask first to avoid getting in trouble. It’s vital that we stop ourselves from doing unimportant work.

Designers can identify possibly unimportant work by asking if:

  • Every wireframe must include detailed annotations;
  • Every design deliverable must include a detailed design document;
  • It’s really necessary to produce many variations of a design when studies about choice and decision making show that too many options make it harder to reach a decision.

No one wants to feel as if their work is sitting on a virtual shelf. By asking clients and stakeholders what matters to them, you’ll cater to their needs and save time by discarding unnecessary tasks.

The next step is to assess the remaining important work to determine how much time you can, and should, devote to deep thinking.

Tip 5: Distinguish Deep And Shallow Work

Follow the steps below to make this assessment concrete, something you can point to and share with your boss.

  1. Identify the activities that you consider deep work such as planning a usability test, drawing wireframes, or mocking up a prototype.
  2. Identify shallow work activities like answering emails, attending administrative meetings or meetings tangentially related to your core responsibilities.
  3. Estimate the amount of time you spend on deep and shallow work each week.
  4. Meet with your boss for thirty minutes and ask her what she thinks the ratio of deep to shallow work should be. Ask for a specific number. If you disagree, politely ask if you may experiment with a different ratio for one month.
  5. Then, stick to the agreed-upon number for one month. Document any changes to your productivity, anything that contributes to a better product or service. After one month, report these findings to your boss.

This approach offers two advantages:

  • It’s usually wise to solicit the boss’s support.
  • A single proposal about deep work will not change an entire organization. Involving management, however, can serve as a catalyst for broader change just as the Google Ventures Design Sprint influenced the design process at Google and beyond.

Why Deep Work Makes Everything Better

Deep work allows designers and developers to thrive by leveraging their skills to solve complex problems and create better products and designs. Better products are likely to boost the bottom line while thriving and highly satisfied employees are more likely to stay (reducing turnover) and put their best selves forward.

Perhaps the best news for employers is that deep work does not require adding staff. The solution, explains computer scientist Cal Newport, is to re-configure work and communication. In other words, it’s not more people; it’s the same people managing work differently.

For example, agencies often answer to clients and need to be available at a moment’s notice. Rather than require every employee to be tethered to a phone or laptop, Newport suggests assigning a different employee each day to a dedicated email or a special “bat phone.” This shows the client their importance to the agency while also allowing designers to concentrate on designing, building, and solving problems.

Conclusion

Deep work is the ability to focus on challenging tasks like design and coding. Frequent interruptions make deep work nearly impossible and impose a high financial cost. In this piece, we’ve described five tips for maximizing the time you devote to deep work.

  1. Jump into design work.
    Draw fresh wireframes or work on a new design problem before checking emails and Slack messages. Block two-hour chunks on your calendar to allow time for deep thinking.
  2. Kickstart your brain with useful questions.
    Take a few minutes to ask what you are trying to accomplish and how it aligns with the company’s keep performance indicators (KPIs). Alignment with KPIs is especially important for user experience designers who are frequently asked to justify their budget
  3. Schedule unstructured thinking time.
    Take a walk, stare out the window, or whatever allows your mind to wander. This “downtime” allows the brain to form new connections.
  4. Vote it off the island.
    Are you writing reports that no one reads? Are you scheduling meetings that your co-workers find less than useful? Ask your colleagues if it’s okay to stop. They might respond with a gleeful “yes!”
  5. Distinguish deep and shallow work.
    Then, meet with your boss to arrive at the right balance between these two types of work.

Further Reading on SmashingMag:

Smashing Editorial
(ah, il)

Source: Smashing Magazine, Better Design With Deep Thinking

Adapting Agile For Part-Time Teams

dreamt up by webguru in Uncategorized | Comments Off on Adapting Agile For Part-Time Teams

Adapting Agile For Part-Time Teams

Adapting Agile For Part-Time Teams

Philip Kiely



<p>The formal notion of the Agile software development method is about as old as I am (the Agile Manifesto was published in February 2001). I point this out not to <a href="https://xkcd.com/1686/">make you feel old</a>, but instead to demonstrate that Agile has had a long time to infiltrate software development. While the methodology advocates for &ldquo;co-located, dedicated teams,&rdquo; in its ubiquity Agile is frequently applied to teams partially or fully composed of part-time workers. While there are lessons to be taken from the practice, Agile must be adapted to support, rather than hinder, part-time teams.</p>

<p>In this article, we’ll consider applying Agile to a team of 5-10 people each working 20 hours per week on a project. We’ll further consider the frequent intersection of remote work with part-time teams and discuss situations where contributors work as few as 5 hours per week on a project. We’ll also hear from professors Armando Fox at the University of California, Berkeley and Barbara Johnson at Grinnell College with their thoughts on part-time Agile teams.</p>

<h3 id="why-does-part-time-work-happen">Why Does Part-Time Work Happen?</h3>

<p>While the &ldquo;5 developers for 20 hours&rdquo; example may seem contrived, many situations lead to the scenario. You may have:</p>

<ul>
<li>Developers assigned to multiple clients, projects, or teams within a single company,</li>
<li>A team with contractors or co-op interns,</li>
<li>Volunteers working on an open-source or community project, or</li>
<li>An after-hours team working on a startup or product.</li>
</ul>

<p>While we will examine the many challenges involved in managing teams under these constraints, usually the alternative to working part-time with someone isn’t their full-time efforts, the alternative is not being able to work with them at all. While part-time workers and teams often require extensive compromises, with clear and effective management they can still be a huge net positive to a team and business.</p>

<h3 id="tenets-of-agile">Tenets Of Agile</h3>

<p>Given its prevalence in the software development industry, everyone understands Agile slightly differently. To get through adapting the framework together, we need a shared vocabulary to define &ldquo;regular&rdquo; Agile, you know, the kind that advocates for &ldquo;dedicated, co-located teams.&rdquo; Agile implements practices, rituals, and roles to promote effective work.</p>

<p>Agile, as implemented, involves certain practices:</p>

<ul>
<li>&ldquo;Sprints&rdquo; are discrete units of time, often 2 weeks, that determine the cycle of work for Agile teams.</li>
<li>&ldquo;Stories&rdquo; or &ldquo;user stories&rdquo; are well-scoped units of work that a single team member can complete in some fraction of the sprint.</li>
<li>Often, teams organize their stories on &ldquo;kanban boards&rdquo; or similar methods of tracking story state: to do, in progress, in review, and done in a given sprint.</li>
</ul>

<p>Agile revolves around four rituals:</p>

<ol>
<li><strong>Sprint Planning</strong><br />
This is a meeting that opens each sprint with writing, estimating, prioritizing, and assigning stories that the team intends to complete for the sprint.</li>
<li><strong>Daily Stand-Up</strong><br />
A chance for teams to meet every day to discuss the previous day’s progress, discuss the day’s work, and raise any roadblocks. Ideally, the meeting is very short (5-15 minutes) and is near the start of the workday to minimize the interruption of dedicated work time.</li>
<li><strong>Sprint Review</strong><br />
This is part of a meeting which ends each sprint with a review of work accomplished, new backlog items, missed estimates, and other quantifiers of team progress.</li>
<li><strong>Sprint Retrospective</strong><br />
A discrete meeting or block of time for discussing what went well and what to improve about how the team operates in qualitative terms.</li>
</ol>

<p>Agile teams usually have distinct, cross-functional roles. Common roles include:</p>

<ul>
<li>The &ldquo;project manager/team lead&rdquo; manages the team, assigns work, reports to management, assists team members, and performs other managerial duties.</li>
<li>The &ldquo;scrum master&rdquo; is responsible for leading Agile rituals.</li>
<li>A &ldquo;product owner/product manager&rdquo; represents the client or end-user to the team. They have an active hand in writing stories, reviewing product functionality, and communicating progress to clients and expectations to the team.</li>
<li>An &ldquo;individual contributor&rdquo; is any member of the team whose main responsibility is building the product. Developers, designers, QA specialists and writers are all examples of individual contributors.</li>
</ul>

<p>While these definitions are important for our shared understanding, the major theme of this article is that achieving your team’s goals is more important than implementing &ldquo;proper&rdquo; Agile. If this doesn’t exactly match your setup, common elements should help apply upcoming recommendations to your experience.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg"
sizes="70vw"
alt="'Scrum Board' by İrfan Simsar on Unsplash"
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘İrfan Simsar’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e0200d18-740a-45d3-ab60-096581b5d70b/board-irfan-simsar-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="constraints-of-part-time-work">Constraints Of Part-Time Work</h3>

<p>Immediately, we see how the constraints of part-time work cut into standard Agile. First off, in a given two-week sprint, each employee may spend 2 hours in sprint planning, 10 times 15 minutes in stand-up, 1 hour in sprint review, and 30 minutes in sprint retrospective, for a total of 6 hours in Agile meetings. For a full-time employee, that’s only 7.5% of their 80-hour fortnight, for a half-time employee it doubles to 15%. Add in other meetings and account for context switching and suddenly your individual contributors have very little time left each week to individually contribute.</p>

<p>Thus, part-time work exacerbates the need for good capacity estimation and up-front planning while reducing the time available for it. Fortunately, Agile’s notion of story points applies well. Story points estimate effort rather than time and thus stay constantly effective between full-time and part-time workers, though of course part-time workers will take longer to achieve the same amount of story points, which you can account for by measuring the team’s velocity.</p>

<p>Even if your development team is part-time, your clients may not be. Customer support, emergency bug fixes, outage repairs, and even regular communication can be more difficult with part-time work adding additional overhead.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg"
sizes="100vw"
alt="'Man in a watch typing' by Brad Neathery on Unsplash"
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘Brad Neathery’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/107f0a17-6c3c-4678-ae1c-d67d231d80c4/watch-brad-neathery-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="frequently-intersecting-constraints">Frequently Intersecting Constraints</h3>

<p>While not all part-time teams will experience these additional challenges, in my experience part-time work often overlaps with remote work, different time zones and availabilities, and classification of workers as temporary, contractors, or interns instead of employees. This is not an article about any of these things, but they bear mentioning.</p>

<p>Part-time work adds significant overhead to the already difficult task of finding a regular time when everyone is available to meet. If some team members work in the mornings and others in the evenings or are located across the world from each other, scheduling quickly becomes impossible. GitLab has published <a href="https://about.gitlab.com/handbook/communication/">extensive documentation on remote communication</a> that might be helpful.</p>

<p>Working with contractors, student interns, temporary hires, or other non-permanent teams or team members brings its own advantages and challenges. That said, however, someone got to the table, the Agile framework treats them as an equal member of the team and stakeholder in the project.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg"
sizes="100vw"
alt="'Untitled' (Meeting) by You X Ventures on Unsplash."
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘You X Ventures’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7abbdc79-3c84-487b-a3b9-c9b9d099b3d6/meeting-you-x-ventures-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="redefining-rituals-for-part-time-teams">Redefining Rituals For Part-Time Teams</h3>

<p>Now that we’ve framed the challenges that part-time work creates, let’s focus on solutions. While I’ve seen a number of successful modifications to Agile rituals for part-time teams, I reached out to Professor Armando Fox, co-author of <em>Engineering Software as a Service: An Agile Approach Using Cloud Computing</em> with David Patterson. In an email interview, he emphasized two key goals of agile rituals to retain:</p>

<blockquote>“The reason Agile is a good fit [for part-time teams] is the idea of using user stories as the unit of work. The key to doing this successfully is up-front planning and continuous check-ins.”<br /><br />&mdash; Armando Fox</blockquote>

<p>Sprint planning condenses up-front planning to a single high-value meeting. For part-time teams, the product owner, scrum master, and team lead (who may be only one or two people, more on that later) should do as much pre-meeting work as possible to define well-scoped tickets for the individual contributors to estimate and take. Fox said &ldquo;if stories are tightly-circumscribed, branches are short-lived, stories require modest amounts of code that can be delivered with good test coverage, and code quality is maintained through continuous code review (pull requests) as well as the use of code quality measurement tools, the team can successfully divide-and-conquer even if they’re not always working at the same time.&rdquo; That’s definitely a lot of &ldquo;if&rdquo; statements, working in this manner will take dedicated effort from the entire team, but should result in a quality product.</p>

<p>The other half of the equation is continuous check-ins. Agile’s daily stand-ups work great for co-located full-time teams, if everyone’s in the office by 9 or 10 AM the meeting happens more or less naturally. It’s tempting to replace this with an asynchronous check, like status-report emails, but Fox advocates that teams stick to the ritual. &ldquo;The team needs to check-in frequently &mdash; we recommend daily 5-minute stand-ups &mdash; so that any red flags can be spotted early. Even part-time teams can find 5 minutes a day that the whole team is available. Email isn’t good for this; an interactive meeting, where people can also mention blocking items and others can immediately speak up with suggestions, is the best format,&rdquo; he wrote.</p>

<p>For a part-time team, it may also be tempting to do away with regular meetings entirely and rely solely on the start and end of sprint check-ins. Fox warns that &ldquo;every team [that he has] coached at Berkeley has said that they quickly realized that once-a-week team meetings were nowhere near enough to keep everyone on the same page.&rdquo;</p>

<p>Sprint reviews and retrospectives are important components of Agile. If teams do not regularly evaluate their working practices and performance, bad interactions will continue unchecked and discontent will grow. However, the velocity measurement and end-of-sprint re-assignment tasks can be handled by the scrum master outside of meeting times, and the team leader can use one-on-one meetings and their perception of team mood in stand-ups and sprint planning to reduce the need for sprint review and retrospective.</p>

<p>If you absolutely need to cut back on the number and duration of Agile meetings, cut review and retrospective first. That said, it is important to celebrate the team’s progress each sprint and give people space to air grievances. A decent compromise can be to extend the last stand-up of each sprint to accomplish this communication within the team.</p>

<h3 id="defining-roles-on-a-part-time-agile-team">Defining Roles On A Part-Time Agile Team</h3>

<p>This section depends entirely on the composition of the team. However, there are a few useful heuristics for assigning roles. Responsibilities assigned should minimize communication overhead (which scales worse-than-linearly with team size), fit individual contributors&rsquo; abilities, and account for team members&rsquo; schedules and availability.</p>

<p>For this section, I turned to Professor Barbara Johnson, who teaches a team software development course that I am currently enrolled in at Grinnell College. She wrote &ldquo;I have sometimes seen teams come to rely upon what might be called a &lsquo;chief organizer&rsquo; who combines the roles of not only a scrum master (who organizes the team) but also the product owner (who coordinates and documents the client’s needs and feedback). This lessens the cognitive overhead of the rest of the team, who then can focus more on moving the project’s code and testing suite forward with each iteration.&rdquo; This matches my experience with part-time teams.</p>

<p>If possible, condense the managerial positions (team lead, product manager, scrum master) into a single role and assign that role to the &ldquo;fullest-time&rdquo; team member. If you have a team of 10 where only 1 person is full-time or otherwise has greater availability, that person should have as many organizational and communication responsibilities as feasible. Part-time teams require just as much communication as full-time teams and an even greater logistical effort, so concentrating that work in one person massively reduces communication overhead.</p>

<p>However, frequently this isn’t possible, either because no one has extra availability or because those people are better suited to individual contributor roles. In that case, I still advocate for condensing managerial responsibilities as much as possible but breaking the product owner back out into its own role. In this case, it’s important to be realistic when estimating how much further work these people will be able to do on user stories considering their other work for the team and client.</p>

<p>Most of the members of the part-time team will be individual contributors. There are two competing philosophies for individual contributors: generalist teams and teams of specialists. Imagine that your team is developing a web application. A generalist team would be composed of entirely full-stack developers. These developers would never be blocked on others&rsquo; work as, in theory, they are equally comfortable on anything from design to deployment. Alternately, if a designer, front-end engineer, back-end engineer, and site reliability engineer comprise a team, they will be fast and effective at their own work because they only spend their time on the thing that they’re best at.</p>

<p>As a team organizer, you may find yourself with a team of generalists, a team of specialists, or a mix. Putting together a part-time team of solid performers is hard enough without restricting yourself to one type of individual contributor, so, fortunately, both types bring something useful to the table. If you can recognize which of your individual contributors are generalists and which are specialists, you can assign tasks more effectively to maximize the impact of their limited work time.</p>

<p>Finally, on teams where people are working ten or fewer hours per week, it is tempting to throw out roles entirely and just say &ldquo;do what you can.&rdquo; Per our theme, these super-part-time teams need even more structured communication but have even less time for it. If everyone has such limited, scattered availability that you cannot justify assigning roles at all, it’s probably worth re-examining the structure, goals, and feasibility of the project.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg"
sizes="100vw"
alt="'At the bustling Times Square' by Saulo Mohana on Unsplash"
/>

</a>

<figcaption class="op-vertical-bottom">
(Image credit: ‘Saulo Mohana’ on <a href='https://unsplash.com/'>Unsplash</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6f510c00-a18e-41c2-87fc-899948283ffe/man-saulo-mohana-unsplash.jpg'>Large preview</a>)
</figcaption>

</figure>

<h3 id="client-communication">Client Communication</h3>

<p>Software development is slow, complex work, and part-time teams only magnify that truth. Agile includes the client in the process by writing user stories, rapid prototyping, a quick release schedule, and consistent communication.</p>

<p>As a part-time team, communicate reasonable expectations to the client. For a half-time team, remember that development time is cut by more than half, build an extra buffer into doubled estimates. As development time is limited, it is critical to solicit complete, accurate specifications when meeting with the client or end-users to avoid wasting your efforts.</p>

<p>Don’t let part-time work make you fall behind on client communication. Even if there is very little progress to report, soliciting regular feedback and posting updates at a reasonable cadence should increase the client’s patience with the slow development pace.</p>

<h3 id="conclusion-goals-methods">Conclusion: Goals &gt; Methods</h3>

<p>You can get a lot done in a part-time schedule. Outside of coding, 10-20 hours per week is enough time to train for a first marathon. With a strong team and good working practices, it is enough time to bring a great product to the market. Using Agile to encourage up-front planning and continuous check-ins with user stories, regular stand-ups, and well-defined roles will allow even part-time teams to overcome communication barriers and work effectively towards a shared goal.</p>

<h4><span class="rh">Further Reading</span> on SmashingMag:</h4>

<ul>
<li><a title="Read 'Bringing A Healthy Code Review Mindset To Your Team'" href="https://www.smashingmagazine.com/2019/06/bringing-healthy-code-review-mindset/" rel="bookmark">Bringing A Healthy Code Review Mindset To Your Team</a></li>
<li><a title="Read 'Creating Authentic Human Connections Within A Remote Team'" href="https://www.smashingmagazine.com/2019/08/creating-authentic-human-connections-remote-team/" rel="bookmark">Creating Authentic Human Connections Within A Remote Team</a></li>
<li><a title="Read 'Building Diverse Design Teams To Drive Innovation'" href="https://www.smashingmagazine.com/2018/05/building-diverse-design-teams-innovation/" rel="bookmark">Building Diverse Design Teams To Drive Innovation</a></li>
<li><a title="Read 'The Case For Brand Systems: Aligning Teams Around A Common Story'" href="https://www.smashingmagazine.com/2019/06/case-brand-systems-align-teams/" rel="bookmark">The Case For Brand Systems: Aligning Teams Around A Common Story</a></li>
</ul>

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Adapting Agile For Part-Time Teams

SmashingConf New York 2019: Videos And Photos

dreamt up by webguru in Uncategorized | Comments Off on SmashingConf New York 2019: Videos And Photos

SmashingConf New York 2019: Videos And Photos

SmashingConf New York 2019: Videos And Photos

Rachel Andrew



<p>We love running our event in New York, and given that it sold out a long way in advance we think that you do too. If you didn&rsquo;t manage to get a ticket, this post should give you a feel for what happened. We also have the video of the presentations to share with you.</p>

<p>Enjoy this roundup, and if you want to be there in person for one of our events next year, tickets are on sale right now!</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/183cd430-f62c-4d9a-88f5-0a448c08b882/ny-posters.jpg"
sizes="100vw"
alt="A set of mock show posters feature the Smashing cat"
/>

</a>

<figcaption class="op-vertical-bottom">
Topple the Cat greeted attendees by way of our Broadway posters (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<ul>
<li><a href="#the-presentations">The Presentations</a></li>
<ul>
<li><a href="#day-1">Day 1</a></li>
<li><a href="#day-2">Day 2</a></li>
</ul>
<li><a href="#workshops">Workshops</a></li>
<li><a href="#side-activities">Side Activities</a></li>
<ul>
<li><a href="#morning-run">Morning Run</a></li>
<li><a href="#evening-events">Evening Events</a></li>
</ul>
</ul>

<h3 id="the-presentations">The Presentations</h3>

<p>The main focus of the conference is the speakers and the presentations they bring. As with all of our 2019 events, some speakers opted to present without slides.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/734455b5-4fce-4a36-ab4e-b53c5d457e66/ny-brad.jpg"
sizes="100vw"
alt="One person in the middle of the stage, two behind a desk"
/>

</a>

<figcaption class="op-vertical-bottom">
Brad Frost, Dan Mall, and Ian Frost co-presenting (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>In the tables below, I’ve linked to slides for those talks which had them, plus the video of each presentation. Enjoy two days worth of learning from the comfort of your own couch!</p>

<h4 id="day-1">Day One</h4>

<p>The <a href="http://smashed.by/midtown">Day One Collaborative Doc</a> created by attendees is full of takeaways from the first day of the conference.</p>

<table class="tablesaw break-out" data-tablesaw-mode="stack" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Speaker Name</th>
<th>Talk Title</th>
<th>Video &amp; Slides</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dan Mall and Brad Frost</td>
<td>Designer vs. Developer</td>
<td><a href="https://vimeo.com/367846576">Video</a>, <a href="https://smashingconf.com/pdf/smashingConfNYC2019-designerVsDeveloper.pdf">Slides</a></td>
</tr>
<tr>
<td>Marcy Sutton</td>
<td>Garbage Pail Components</td>
<td><a href="https://vimeo.com/367853694">Video</a>, <a href="https://marcysutton.github.io/garbage-pail-components/">Slides</a>
</td>
</tr>
<tr>
<td>Trine Falbe</td>
<td>Designing For Kids Is Not A Game</td>
<td><a href="https://vimeo.com/367858039">Video</a>, <a href="https://smashingconf.com/pdf/2019-smashing-design-for-kids.pdf">Slides</a></td>
</tr>
<tr>
<td>Denys Mishunov</td>
<td>I Built A Frankenstein Monster:
3 Stories Of Migration</td>
<td><a href="https://vimeo.com/367865086">Video</a>, <a href="https://noti.st/mishunov/SfkHLg/i-built-frankenstein-monster-3-stories-of-migration">Slides</a></td>
</tr>
<tr>
<td>Maggie Wachs</td>
<td>Lessons Learned From A Decade Of Building Pattern Libraries</td>
<td><a href="https://vimeo.com/367869445">Video</a>, <a href="https://github.com/maggiewachs/SmashingConf2019NYC">Slides</a></td>
</tr>
<tr>
<td>Wes Bos</td>
<td>Slam Dunk Your JavaScript Fundamentals</td>
<td><a href="https://vimeo.com/367872808">Video</a>, <a href="https://wesbos.github.io/Slam-Dunk-JavaScript/#1">Slides</a></td>
</tr>
</tbody>
</table>

<h4 id="day-2">Day Two</h4>

<p>Check out the <a href="http://smashed.by/broadway">Day Two Collaborative Doc</a> for more resources and thoughts from our attendees and speakers.</p>

<p>Our mystery speaker was dina Amin. The Smashing Team love her <a href="https://www.instagram.com/dina.a.amin/">Instagram</a>!</p>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Mystery speaker was soooo good! Dina’s talk about the stop motion animation and her videos blew the minds away of the audience! Enjoyed every bit of it <a href="https://twitter.com/hashtag/smashingconf?src=hash&amp;ref_src=twsrc%5Etfw">#smashingconf</a> 🗽<a href="https://twitter.com/hashtag/animation?src=hash&amp;ref_src=twsrc%5Etfw">#animation</a> <a href="https://twitter.com/hashtag/productdesign?src=hash&amp;ref_src=twsrc%5Etfw">#productdesign</a> <a href="https://t.co/YRS41ou9LZ">pic.twitter.com/YRS41ou9LZ</a></p>&mdash; Naresh Baleswaran (@nareshbabub) <a href="https://twitter.com/nareshbabub/status/1184478978440126466?ref_src=twsrc%5Etfw">October 16, 2019</a></blockquote>

<p>We then enjoyed talks covering a wide range of topics from our day two speakers.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/49cca749-d654-4f33-b719-379e1a981eb9/ny-dina.jpg"
sizes="100vw"
alt="A woman presenting on stage"
/>

</a>

<figcaption class="op-vertical-bottom">
dina Amin (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<table class="tablesaw break-out" data-tablesaw-mode="stack" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Speaker Name</th>
<th>Talk Title</th>
<th>Video &amp; Slides</th>
</tr>
</thead>
<tbody>
<tr>
<td>dina Amin</td>
<td>Mystery Speaker</td>
<td><a href="https://vimeo.com/367875942">Video</a></td>
</tr>
<tr>
<td>Harry Roberts</td>
<td>Demystifying Vim, Live!</td>
<td><a href="https://vimeo.com/367879587">Video</a></td>
</tr>
<tr>
<td>Sara Soueidan</td>
<td>Applied Accessibility: Practical Tips For Building More Accessible Front-Ends</td>
<td><a href="https://vimeo.com/367882926">Video</a>, <a href="https://www.dropbox.com/s/g344gdjlijyuqj1/applied-accessibility-talk.pdf?dl=0">Slides</a></td>
</tr>
<tr>
<td>Remy Sharp</td>
<td>Using A Modern Web To Create 1980s Horrible Slow and Loud Loading Screens</td>
<td><a href="https://vimeo.com/367885607">Video</a></td>
</tr>
<tr>
<td>Scott Jehl</td>
<td>Move Fast And Don't Break Things</td>
<td><a href="https://vimeo.com/367887672">Video</a></td>
</tr>
<tr>
<td>Miriam Suzanne</td>
<td>CSS is Rad</td>
<td><a href="https://vimeo.com/367890815">Video</a>, <a href="https://sliiides.netlify.com/css-is-rad/">Slides</a></td>
</tr>
</tbody>
</table>

<h3 id="workshops">Workshops</h3>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3a2f5db7-48a5-4ca9-8f62-abc6d0320b56/ny-workshop.jpg"
sizes="100vw"
alt="People behind desks working with stickers and paper"
/>

</a>

<figcaption class="op-vertical-bottom">
Workshop attendees working together (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>Our workshops are a big part of each of our Smashing conferences. We held busy workshops the day before and day after SmashingConf New York, at the Microsoft Technology Center. Here is what attendees could choose from.</p>

<table class="tablesaw break-out" data-tablesaw-mode="stack" data-tablesaw-minimap>
<thead>
<tr>
<th data-tablesaw-priority="persist">Name</th>
<th>Workshop Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dan Mall and Brad Frost</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/dan-mall-brad-frost/">Designer / Developer Collaborative Workflow</a></td>
</tr>
<tr>
<td>Scott Jehl</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/scott-jehl/">Lightning Fast Web Performance</a></td>
</tr>
<tr>
<td>Marcy Sutton</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/marcy-sutton/">Building Accessible Sites With Gatsby</a></td>
</tr>
<tr>
<td>Vitaly Friedman</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/vitaly-friedman-ux/">Smart Responsive UX Design Patterns</a></td>
</tr>
<tr>
<td>The Deque Team</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/deque/">How To Translate Wireframes Into Accessible HTML/CSS</a></td>
</tr>
<tr>
<td>Rachel Andrew</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/rachel-andrew/">Next Steps With CSS Layout</a></td>
</tr>
<tr>
<td>Remy Sharp</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/remy-sharp/">Modern Universal React Dev With Next.js</a></td>
</tr>
<tr>
<td>Harry Roberts</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/harry-roberts/">Front-End Performance: Building Faster Websites</a></td>
</tr>
<tr>
<td>Vitaly Friedman</td>
<td><a href="https://smashingconf.com/ny-2019/workshops/vitaly-friedman/">New Front-End Adventures</a></td>
</tr>
</tbody>
</table>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Spending the next few days disgesting all of the front-end nuggets from today's workshop. Thanks <a href="https://twitter.com/hashtag/smashingconf?src=hash&amp;ref_src=twsrc%5Etfw">#smashingconf</a>! <a href="https://t.co/c8oBcWa0Fw">pic.twitter.com/c8oBcWa0Fw</a></p>&mdash; Misha Trombley (@mishhmich) <a href="https://twitter.com/mishhmich/status/1184951201332375552?ref_src=twsrc%5Etfw">October 17, 2019</a></blockquote>

<h3 id="side-activities">Side Activities</h3>

<p>A conference isn’t just about the talks and speakers. We want to make spaces where attendees and speakers can learn from each other and share experiences in a more informal setting. We want to offer something for everyone &mdash; from the party-goers to the fitness enthusiasts, and everyone in-between! So at lunchtime, we had lunch sessions: On Day 1, we saw the &ldquo;Web We Want&rdquo; panel discussion from Microsoft, and on Day 2, Deque ran a session for those who wanted to learn more about accessibility over a plate of lunch.</p>

<p>We also invited people who organize community meetups in the local area onstage to tell the audience about their group.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dc3c7484-90a1-4490-b619-dc5e67303a6b/ny-community.jpg"
sizes="100vw"
alt="A woman onstage under a slide saying Local Community"
/>

</a>

<figcaption class="op-vertical-bottom">
Community Groups talk to the Smashing audience (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<h4 id="morning-run">Morning Run</h4>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">What a smashing way to start a day of <a href="https://twitter.com/smashingconf?ref_src=twsrc%5Etfw">@smashingconf</a> 🏃‍♂️☀️ <a href="https://twitter.com/hashtag/grouprun?src=hash&amp;ref_src=twsrc%5Etfw">#grouprun</a> <a href="https://twitter.com/hashtag/morningrun?src=hash&amp;ref_src=twsrc%5Etfw">#morningrun</a> <a href="https://twitter.com/hashtag/5k?src=hash&amp;ref_src=twsrc%5Etfw">#5k</a> <a href="https://twitter.com/hashtag/centralpark?src=hash&amp;ref_src=twsrc%5Etfw">#centralpark</a> <a href="https://twitter.com/KajBergkvist?ref_src=twsrc%5Etfw">@kajbergkvist</a> <a href="https://t.co/1lo19y12Ed">https://t.co/1lo19y12Ed</a> <a href="https://t.co/elCmYwAePo">pic.twitter.com/elCmYwAePo</a></p>&mdash; Tobias Löfstrand (@tobeleaf) <a href="https://twitter.com/tobeleaf/status/1184081029595832321?ref_src=twsrc%5Etfw">October 15, 2019</a></blockquote>

<p>The SmashingConf run is becoming a fixture, and in New York we had Central Park to run around. We started just as it was getting light and joined the runners of New York for a lap of the park.</p>

<h4 id="evening-events">Evening Events</h4>

<p>The <a href="https://smashingconf.com/ny-2019/jam-session">Jam Session</a> this time round was hosted by Shopify. Attendees spent time socializing and hearing some lightning talks from <a href="https://twitter.com/tiffany_tse">Tiffany Tse</a>, <a href="https://www.twitter.com/partytimeHXLNT">Rachel Weil</a>, <a href="https://www.linkedin.com/in/aprilellsey/">April Ellsey</a>, <a href="https://twitter.com/TimirahJ">Timirah James</a>, <a href="https://twitter.com/jtjpatterson">Jordan Patterson</a>, and <a href="https://twp.io/">Taylor Poulos</a>.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0ca713fb-4955-4d82-8758-57397fc1f07e/ny-jam.jpg"
sizes="100vw"
alt="People watching a talk and raising their hands"
/>

</a>

<figcaption class="op-vertical-bottom">
The Jam Session (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>We also had a party after day one which was held at The Waylon, where there were some nice craft beers and a lovely outdoor space to enjoy. Luckily the torrential rain didn&rsquo;t arrive until day 2!</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e340d8ff-31d4-4e31-b401-6fb70d8588f3/ny-waylon.jpg"
sizes="100vw"
alt="People in an outdoor space at a pub"
/>

</a>

<figcaption class="op-vertical-bottom">
Enjoyng good conversations with new friends (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<h3 id="want-to-join-us-in-2020">Want To Join Us in 2020?</h3>

<p>We packed a lot into those few days! If you were there, we hope that you enjoyed it as much as we did. It was great to meet so many of you.</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9b34022b-e45d-4f7e-893a-e77111235f2d/ny-balloons.jpg"
sizes="100vw"
alt="An audience throwing colored balloons into the air, taken from the stage"
/>

</a>

<figcaption class="op-vertical-bottom">
Balloons! (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

<p>In 2020 we&rsquo;re back with many more cats, mysteries and 4 friendly and inclusive conferences. Join us in:</p>

<ul>
<li><a href="https://smashingconf.com/sf-2020/">San Francisco</a> — April 21–22, 2020.</li>
<li><a href="https://smashingconf.com/austin-2020/">Austin</a> — June 9–10, 2020.</li>
<li><a href="https://smashingconf.com/freiburg-2020/">Freiburg</a> — September 7–8, 2020.</li>
<li><a href="https://smashingconf.com/ny-2020/">New York</a> — October 20–21, 2020.</li>
</ul>

<p>The team are already hard at work making these events as amazing as those we have enjoyed running for you this year. Grab an Early Bird ticket and we&rsquo;ll see you there!</p>

<figure class="

break-out article__image

">

<a href="https://www.flickr.com/photos/drewm/albums/72157711342495838/">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4966a5cf-2d13-4fe1-80ae-ccc7431f0ea6/ny-thankyou.jpg"
sizes="100vw"
alt="A large group of people on stage under a slide that says Thank You."
/>

</a>

<figcaption class="op-vertical-bottom">
The Smashing Team on stage at the end of the conference (Photo credit: <a href='http://drewm.photo'>Drew McLellan</a>)
</figcaption>

</figure>

https://platform.twitter.com/widgets.js

Smashing Editorial
(il)

Source: Smashing Magazine, SmashingConf New York 2019: Videos And Photos

Collective #564

dreamt up by webguru in Uncategorized | Comments Off on Collective #564










C564_pagesjs

Paged.js

A blog which advocates for innovative approaches to making books in browsers.

Check it out










C564_frontend

Rethinking the Front-end

Shane Yu provides perspectives around the problems and goals of front-end development and discusses how to think about Component Composition.

Read it


Collective #564 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #564

How To Stop Analysis Paralysis With Design

dreamt up by webguru in Uncategorized | Comments Off on How To Stop Analysis Paralysis With Design

How To Stop Analysis Paralysis With Design

How To Stop Analysis Paralysis With Design

Suzanne Scacca



<p>As a web designer, you do your best to remove friction from the decision-making process. You place only one CTA above the fold. You keep interactive elements to a minimum. You make the menu only as large as it needs to be.</p>

<p><strong>But what happens when the content itself causes analysis paralysis?</strong></p>

<p>There’s an overabundance of choice all around the web, from e-commerce stores with thousands of products to content generation machines pushing out new posts every day. While you can’t do anything to stop the flood of information or items going out to your visitors, you can design your interfaces in a way that makes the decision-making process easier to bear. What’s more, you can help them walk away feeling more confident with their choice, too.</p>

<p>Let’s look at what it is about the psychology of choice that can be detrimental for conversions and what you can do to keep your PWA visitors from succumbing to it.</p>

<h3>Why Analysis Paralysis Is Hurting Your Conversion Rate</h3>

<p>Paralysis by analysis is what happens when someone finds a situation or decision too overwhelming or difficult. Despite thinking over the circumstances or options, they’re unable to make a clear choice, often leading to no action at all.</p>

<p>It’s the exact opposite of what we want to happen with our visitors and customers. And, yet, we see it all the time.</p>

<p>Take <a href="https://www.amazon.com/">Amazon</a>, with its hundreds of millions of products. Let’s say a shopper is looking for socks for an upcoming snowboarding trip. So, they search for “snowboard socks”:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg"
sizes="100vw"
alt="Amazon search snowboard socks"
/>

</a>

<figcaption class="op-vertical-bottom">
A search for “snowboard socks” on Amazon yields 728 results. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>There are 728 matching results for snowboard socks. While that’s nothing compared to the size of Amazon’s marketplace, it’s still way too many results to sift through on one’s own.</p>

<p>So, the shopper decides to narrow their search down to “knee-high snowboard socks antimicrobial compression”, which hits all of the key features they’re looking for:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg"
sizes="100vw"
alt="Amazon search knee high snowboard socks antimicrobial compression"
/>

</a>

<figcaption class="op-vertical-bottom">
A search for “knee high snowboard socks antimicrobial compression” on Amazon yields 8 results. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>That takes the list of 728 products down to a more manageable 8. However, there are a number of problems with this.</p>

<p>For starters, Amazon doesn’t actually present only eight options. The first thing it shows is a banner with sponsored results:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg"
sizes="100vw"
alt="Amazon search – sponsored products banner"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon displays sponsored products on a search results page before organic products. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>The next two rows <em>do</em> contain organic search results. However, the products either don’t have any reviews or high enough ratings to rave about.</p>

<p>To make matters worse, Amazon adds <strong>three more rows of sponsored products</strong> to the end of this page:</strong></p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg"
sizes="100vw"
alt="Amazon search results overrun with sponsored products"
/>

</a>

<figcaption class="op-vertical-bottom">
An Amazon search results page promising 8 results is full of sponsored products. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg'>Large preview</a>)
</figcaption>

</figure>

<p>Essentially, Amazon has tripled the number of products the shopper has to look at now. Not only that, but one could argue that it’s polluted the search process with so many paid products.</p>

<p><strong>It’s just a poor experience all around.</strong></p>

<p>It’s a similar story on mobile. The main difference is that, when the narrow search is applied, only five results remain. That said, Amazon continues to muddle search results by prioritizing sponsored posts. This is what the shopper sees above the fold:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png"
sizes="100vw"
alt="Amazon mobile search results with sponsored products"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon search results display only sponsored products above the fold on mobile. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png'>Large preview</a>)
</figcaption>

</figure>

<p>Once the shopper scrolls, they’ll see two organic products (with no ratings, much less) before being shown yet another sponsored product:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png"
sizes="100vw"
alt="Amazon mobile search with organic and paid products"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon fills mobile search results with paid product listings. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png'>Large preview</a>)
</figcaption>

</figure>

<p>What should have been a succinct product search page ends up running on and on with sponsored listings and Amazon recommendations. As you can imagine, this is an even bigger problem for mobile shoppers who don’t have the patience or time to waste.</p>

<h3>How To Simplify Decision-making With Design</h3>

<p><a href="https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice?language=en#t-574423">Psychologist Barry Schwartz gave a TED talk</a> on this exact problem and explained how it doesn’t just lead to abandoned purchases, but to less satisfying purchases.</p>

<p>Essentially, Schwartz argues that too many choices cause consumers to:</p>

<ul>
<li>Have too-high expectations whereby no option ever seems perfect or satisfying.</li>
<li>Focus on minute details or features they missed out on by not making a different choice.</li>
<li>Regret the option they settled on even if it proved to be the best.</li>
<li>Blame themselves for spending too much time analyzing a decision and still making the “wrong” choice.</li>
</ul>

<p>In other words, an abundance of choice puts your audience in the wrong state of mind. And if your site or PWA can’t afford to process returns or watch visitors walk away at a rate that a company like Amazon can, then you can’t let paralysis analysis become part of the decision-making process to begin with.</p>

<p>Here are some things you can do to make decision-making more bearable, even with too many options available.</p>

<h4>Prioritize Your “Big Rock”</h4>

<p>There’s a productivity hack called the “Big Rocks” method. Essentially, it says that if you want to get more stuff done, you have to take on your biggest challenge or priority first thing. All of the smaller tasks and requests nagging at you get slotted in once you’ve tackled the most critical ones.</p>

<p>And now I’m suggesting you do something similar with your design.</p>

<p>Basically, what you want to do is this:</p>

<ul>
<li>Look at all of the “stuff” you’re trying to put in front of your visitors.</li>
<li>Ask yourself (or your client): “Which one takes top priority right now?”</li>
<li>Then, stick it to the top of your home page.</li>
</ul>

<p>Why do this? Well, for starters, it’s much less overwhelming to show one thing than to throw everything you have at your visitors right away &mdash; or to force them to dig around and figure out where to start. Plus, chances are good that there’s something especially pressing you want every visitor to see.</p>

<p><a href="https://barkshop.com/">BarkShop</a> shows us one way you might do this:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png"
sizes="100vw"
alt="BarkShop Halloween sale banner"
/>

</a>

<figcaption class="op-vertical-bottom">
The home page of the BarkShop website displays a Halloween sale banner. (Source: <a href='https://barkshop.com/'>BarkShop</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png'>Large preview</a>)
</figcaption>

</figure>

<p>Notice how the top of the page isn’t littered with an inventory. Instead, the primary focus is on the Halloween sale.</p>

<p>This is clearly BarkShop’s big rock right now. If they don’t get their Halloween items out the door by October 31, they run the risk of losing money on the seasonal inventory. And while they could leave it up to their visitors to <em>assume</em> there are Halloween toys and treats available, why do that?</p>

<p>It’s hard enough showing up on a site like this and deciding what you’re going to buy for your dog this month. So, let your big rock become their guide.</p>

<p>You can see that it’s not just about the Halloween line either. Just below the banner, BarkShop has prioritized its top-trending toys. This is another trick you can use when designing product inventories and news sites. Display the most popular or top-rated/shared items first. There’s a greater likelihood <a href="https://www.smashingmagazine.com/2019/09/too-much-social-proof/">they’re going to click on something that others have shown interest</a> in than a bunch of random items they have to explore on their own.</p>

<p>Another way you might tackle big rocks in design is to go the way of <a href="https://www.apple.com/">Apple</a>:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png"
sizes="100vw"
alt="Apple home page promo for iPhone 11 Pro"
/>

</a>

<figcaption class="op-vertical-bottom">
The Apple home page banner advertises only its iPhone 11 Pro. (Source: <a href='https://www.apple.com/'>Apple</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png'>Large preview</a>)
</figcaption>

</figure>

<p>Again, Apple could’ve shown a bunch of its iPhones and iPads here or pointed visitors to different categories of products and accessories to explore. Instead, it’s put its big rock right up front: the iPhone 11 Pro.</p>

<p>Sure, there are probably plenty of Apple customers who come here looking for older models. But what makes more sense?</p>

<ul>
<li>Showing a bunch of similar-looking smartphone graphics that visitors are immediately put into analysis paralysis mode with?</li>
<li>Or showing them the latest model that everyone wants?</li>
</ul>

<p>You can do this with other kinds of websites, too. Blogs, for instance, will use the sticky post feature to show off their “big rocks” to every visitor who stops by. This might be the most popular post of all time or it could be something relevant to something happening at the moment.</p>

<p>Whatever it is, there’s a conscious decision made to stop visitors in their tracks and give them a moment of calm before they have to enter decision-making mode.</p>

<h4>Gate Off the Choices</h4>

<p>While you want your visitors to know that there’s a plenitude of things available, you don’t need to tell them how much there is. It’s only going to add to the pressure of the decision-making process.</p>

<p>So, whenever you can, gate off the choices.</p>

<p><a href="https://www.ehealthinsurance.com/">eHealth Insurance</a> is a website where Americans can purchase health insurance for themselves or their companies. With a wide variety of healthcare providers and dozens of plans available for each, a service like this is necessary for insurance-wielding U.S. citizens.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png"
sizes="100vw"
alt="eHealth Insurance home page"
/>

</a>

<figcaption class="op-vertical-bottom">
The eHealth Insurance website gates off its insurance provider options and plans. (Source: <a href='https://www.ehealthinsurance.com/'>eHealth Insurance</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png'>Large preview</a>)
</figcaption>

</figure>

<p>The only decision it asks visitors to make is what kind of insurance they’re looking for. It then asks them to fill out a simple enough form. It’s what eHealth Insurance uses to pare down the options:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png"
sizes="100vw"
alt="eHealth Insurance qualification form"
/>

</a>

<figcaption class="op-vertical-bottom">
The eHealth Insurance form asks qualification questions of visitors to help list the right options. (Source: <a href='https://www.ehealthinsurance.com/'>eHealth Insurance</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png'>Large preview</a>)
</figcaption>

</figure>

<p>Once filled out, eHealth Insurance shows the user a list of providers and plans that are available in their area. This keeps the consumer from having to:</p>

<ol>
<li>Visit individual health insurance websites to do their own research.</li>
<li>Sift through hundreds of options all at once (some of which they’d probably be ineligible for and others that would just be a bad fit).</li>
</ol>

<p>Websites like these typically allow you to compare up to three items at once, making the decision-making process even simpler.</p>

<p>Another way to gate off your choices is by asking visitors to start narrowing their choices from the moment they arrive as <a href="https://www.sothebysrealty.com/eng">Sotheby’s International Realty</a> does:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png"
sizes="100vw"
alt="Sotheby’s home page rental search"
/>

</a>

<figcaption class="op-vertical-bottom">
The first thing the Sotheby’s International Realty PWA asks visitors to do is narrow down their search results. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png'>Large preview</a>)
</figcaption>

</figure>

<p>This way, consumers aren’t distracted by all the great-looking properties or even the attractive prices. They’re still focused on taking action (e.g. finding a rental), but it’s more about taking baby steps towards the desired result which makes it much less intimidating. It’s also going to lead to a more satisfying result in the end as they won’t spend time looking at rentals they can’t afford, that don’t allow cats or that are too far away from their kids’ schools.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png"
sizes="100vw"
alt="Sotheby’s location search results"
/>

</a>

<figcaption class="op-vertical-bottom">
Sotheby’s helps visitors narrow their searches by location. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png'>Large preview</a>)
</figcaption>

</figure>

<p>The next page of the Sotheby’s search process starts to show matching results, but not before letting them know that there are “55 Luxury Homes for Rent in London”. And if that number is just too much to handle, that’s fine. Directly to the right of that note is a filters widget.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png"
sizes="100vw"
alt="Sotheby’s rental filters"
/>

</a>

<figcaption class="op-vertical-bottom">
Sotheby’s helps visitors narrow down their choices even further with comprehensive filters. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png'>Large preview</a>)
</figcaption>

</figure>

<p>Sotheby’s filters are great. Not only are all the essentials covered, but it’s even divided up the filters by category.</p>

<p>Let’s recap how smooth this experience is going to be for already-anxious home-buyers or renters:</p>

<ul>
<li>The first thing they see on the Sotheby’s home page is a search bar.</li>
<li>If they do the search, the next thing they see is the number of properties in the area.</li>
<li>If that number is too intimidating, the filters widget is there to help them narrow the list even more.</li>
</ul>

<p>By keeping the rentals off of the home page and even away from the top of the fold of the internal page, Sotheby’s can control how calmly visitors go through the decision-making process.</p>

<h4>Enable Side-by-side Comparison</h4>

<p>Internally, there’s not a lot you can do about choice overload except giving your visitors a really great set of sorting and filtering tools. Even then, once they start to see lists of related products, recommendations on previous purchases and so on, the analysis paralysis is going to creep back in.</p>

<p>One thing you can do to make this less stressful is by including side-by-side comparisons.</p>

<p>It’s similar to laying out pricing plans side-by-side. Rather than make prospective customers review their options one-by-one, stack up the top few choices. Then, align the specifications so it’s as easy as looking across a row to weed something out because it doesn’t fit the budget or the product is too large.</p>

<p>Although Amazon doesn’t handle analysis paralysis flawlessly, I do like what it does with its side-by-side product comparisons:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png"
sizes="100vw"
alt="Amazon comparison table"
/>

</a>

<figcaption class="op-vertical-bottom">
Amazon shows a table of similar products to customers for easy comparison. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png'>Large preview</a>)
</figcaption>

</figure>

<p>I can’t tell you how many times I’ve struggled to make a decision on Amazon, only to discover one of these comparison tables and immediately been able to make up my mind. It’s just so much easier to see a bunch of lookalike products all at once and to say “This one definitely won’t fit in my kitchen” or “That’s the exact color I’m looking for”.</p>

<p>You can do this with other kinds of websites, too. <a href="https://www.verizonwireless.com/">Verizon Wireless</a>, for example, uses a side-by-side comparison to make choosing between its plans easier.</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png"
sizes="100vw"
alt="Verizon Wireless 2GB wireless plan details"
/>

</a>

<figcaption class="op-vertical-bottom">
Verizon Wireless displays the details for its 2GB wireless plan. (Source: <a href='https://www.verizonwireless.com/'>Verizon Wireless</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png'>Large preview</a>)
</figcaption>

</figure>

<p>There are scroller dots below this block that indicate to customers that there’s more to be found. All they have to do is scroll to reveal more plan options. And because <a href="https://www.smashingmagazine.com/2019/10/breadcrumbs-pwa/">the scroller breadcrumbs</a> are kept to a reasonable amount, this doesn’t seem like that burdensome of a task.</p>

<p>The next block over, for instance, contains the information for the 4GB plan:</p>

<figure class="

">

<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png">

<img
srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 2000w"
src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png"
sizes="100vw"
alt="Verizon Wireless 4GB wireless plan details"
/>

</a>

<figcaption class="op-vertical-bottom">
Verizon Wireless displays the details for its 4GB wireless plan. (Source: <a href='https://www.verizonwireless.com/'>Verizon Wireless</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png'>Large preview</a>)
</figcaption>

</figure>

<p>Even though the specs can’t be seen see side-by-side, the details are simply broken down and are consistently laid out. So, when someone moves from plan to plan, the same details are in the same place which makes flipping back and forth quite easy.</p>

<p>Another thing I really like about this is the summary provided at the top of each card. The 2GB one tells customers right away that it’s the best plan if you mostly talk and text whereas 4GB is better if you stream a lot of content and surf the web. This way, if all the technical details don’t mean much to customers, the layman’s summary will help them more confidently decide.</p>

<p>While I realize side-by-side comparisons might be something you’d normally try to avoid on mobile screens, these two examples show that it is possible to do so without introducing too much friction to the experience.</p>

<h3>Wrapping Up</h3>

<p> As I said before, you can’t do anything about scaling back the multitude of options your clients want to present their audiences with. If they want to sell thousands of products to customers that are demanding them, then good for them.</p>

<p>That said, the way you design around these options can have an impact on how well or poorly they’re received. Just remember what Barry Schwartz teaches us about the psychology of choice. If your visitors, users or customers walk away feeling overwhelmed, drained or disappointed with the experience, it’s going to cost you. So, be mindful of how much you present the options to them.</p>

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, How To Stop Analysis Paralysis With Design

What Newspapers Can Teach Us About Web Design

dreamt up by webguru in Uncategorized | Comments Off on What Newspapers Can Teach Us About Web Design

What Newspapers Can Teach Us About Web Design

What Newspapers Can Teach Us About Web Design

Frederick O'Brien



It’s easy to get caught up in the latest trends in web design. Web technology is constantly improving, and today developers have a formidable range of features at their disposal. This makes for a forward-thinking, innovative space — as it should — but also one at risk of being unrooted. Every art has its ancient masters. In the case of websites, it’s newspapers.

When you dig into the basic principles of news design, overlaps with the web are frequent and oftentimes indistinguishable. Many web design best practices can be traced directly back to news design. When it comes down to it, websites are made for users to engage with, and hopefully return to. Newspapers have been playing that game for centuries, and winning.

Anyone with even a passing interest in web design stands to benefit from knowing how news design works, and why it works. This piece will examine several tenets of newspaper design and show their connection to best practice online. At the core of that connection is a principle childlike in its simplicity, one newspaper and web designers alike would do well to remember.

Hold The Home Page

Newspapers have been around since the 17th century. They’ve worked hard for their rules, and because their content changes daily the rules have to be abstract. Ninety-five percent of what we see in any given newspaper will not be there the next day. It is what don’t see that is essential for wrangling the contents of newspapers into shape.

This framework is what we’ll be looking at; some of the invisible rules that hold newspapers together. They are concerned mainly with form, and how readers process information. The parallels with web design will soon become clear, and hopefully the lessons too. Let’s start with an obvious one — above the fold.

Above The Fold

If you’ve worked on the web you’ve likely heard the phrase ‘above the fold,’ meaning the content you’re met with when you land on a web page. It is a newspaper term, and it dates back centuries. Due to their size newspapers are often stacked folded in half, so above the fold literally means the content visible above where they’re folded in half. It is the first thing potential readers see. It is often the one and only chance to make an impression, to get people to buy a copy because they just have to know more. If the newspaper isn’t worth picking up for the front page, what reason is there to think it’s worth picking up at all?

Cover of The New York Times, 21 July, 1969

I’d buy that for a dollar! Credit: The New York Times. (Large preview)

The space above the fold is the domain of the lead story, the most important piece of information in the entire paper. It has to hook the reader. This usually equates to big headlines, key pieces of information, and striking imagery. That said, there is not a rigid format. Whatever grabs people’s attention without distorting the truth is on to a winner.

Above the fold is a newspaper’s first and most important answer to ‘the pub test’ — what you’d blurt out if you were telling someone the crux of the story in the boozer. If you had the chance to tell your friends men walked on the moon yesterday, you probably wouldn’t open with the brand of shoes involved. You’d sprint in and yell, “Men have walked on the moon!” That’s above the fold. It’s where newspapers condense the most important story (or stories) of the day to the key points.

The same applies to websites, which no doubt is why the terminology has carried over. ‘Above the fold’ in web design (which online means what you see before scrolling) is the website’s answer to the pub test. What’s the single most important thing people should know? Though this is particularly relevant to home pages, it applies everywhere.

Apple website homepage

Three guesses what Apple wants you to know about right now. (Large preview)

According to a study of 25 million browsers last year, ‘above the fold’ is comfortably the most viewed part of a web page, with engagement peaking just below. From news to ecommerce to social media, the same principle applies: get to the point.

If you’d like to read more above the fold and front pages generally, Newseum’s Front Page poster is a good place to start.

The Gutenberg Principle

So you’ve grabbed someone’s attention. Congratulations. You’ll need to know about the Gutenberg Principle — or Z-pattern. Championed by ‘the father of newspaper design’ Edmund C. Arnold (more on him later), the Gutenberg Principle is a good rule of thumb to follow when thinking about how people engage with a page of content, be it paper or pixels.

The Gutenberg Principle states that when faced with homogenous content, we start at the top left hand corner and finish at the bottom right hand corner, flicking from right to left as we go. This stems from an idea called reading gravity. We in the western world spend our lives reading from left to right, flicking down and to the left to get to the start of the next line. Newspaper design tends to ape that flow.

Gutenberg diagram

The Gutenberg diagram, courtesy of Steven Bradley. (Read his Smashing Magazine article here) (Large preview)

Take the New York Times front page shown earlier for example. Your eyes zig-zag with each line. Where does your eye flick after ‘PLANT FLAG’? Almost certainly to ‘Voice from Moon.’ Breaking this flow tends to be jarring for readers because it’s at odds with a lifetime of reading habits. How often do you see the lead story hugging the right hand side of the page rather than the left? Not often.

The same flow applies to web design. Steven Bradley’s Smashing Magazine article on compositional flow and rhythm explores the principle in an online context, and certainly deserves a read, but I would add that there’s huge value in looking at its application in print. This is a principle that was being applied for decades before the world wide web came along, after all. Any given shortlist of Society for News Design finalists will be a masterclass in content flow. Here are some recent winners to whet your appetite.

Now to be clear, reading gravity isn’t quite as binding as, say, gravity. The eagle eyed among you may have noticed the qualifier that this applies mostly to ‘homogenous’ content. What’s more, it isn’t based on something innate in human nature — it’s guided by language. In languages that read right to left (Arabic for example) the same principle applies, but it is flipped.

Cover of Al Ghad newspaper

Right-to-left languages provide a mirror image of western newspaper layouts. Credit: Tarek Atrissi Design. (Large preview)

This mattered less in the day of print. Papers were generally limited to a geographical region and could reflect the primary language of that region’s audience. In the online realm anyone, anywhere could be visiting your website, so it’s not only valuable to understand the Gutenberg Principle, but to design websites that change shape depending on the language they’re being read in.

Al Jazeera website homepage - English

(Large preview)

Al Jazeera website homepage - Arabic

Al Jazeera flips its content based on the language it’s viewed in. (Large preview)

The Gutenberg Principle is not the only way people engage with content. Eye tracking studies have shown F-shaped patterns are also common online, for example, with more and more ‘hopping’ the further down the page readers go.

These patterns are all useful to know. They are not rules, just trends. Strong news design does not blindly adhere to the Z-pattern come what may; it uses it as a foundation. The same is true for web design. If in doubt, remember it, but don’t worship it. The human eye has an ingrained reading gravity, but great design leads rather than follows.

The adaptability of the web opens up amazing new possibilities for content presentation. The lessons of the Gutenberg Principle are starting points which can and should be played around with. The best rule breakers usually know exactly what the rules are.

For more information on the Gutenberg Principle follow the links below:

Nameplates

Every newspaper has a nameplate. It’s just about the only thing you can guarantee won’t change from edition to edition. It’s the bit at the top (or very occasionally, along the side) of the front page, and comprises of the publication’s name and logo.

A lot of these are iconic in their own right. The nameplates of publications like The Washington Post and The Sun are seared into the public consciousness. Nameplates are the branding, the bit that says, ‘We’re not that other newspaper. We’re this newspaper.’ It communicates who you are and what you’re about.

It also serves as a kind of directory. Newspapers often have teasers in their nameplates, pointing readers to stories that don’t quite warrant a spot on the front page, but are still worth knowing about. It’s a key player in the above the fold game. Stick around. Keep reading. There’s something here for you. Keeping in mind the Gutenberg Principle, the nameplate is likely the very first thing readers will see.

Nameplate collage

Newspapers and websites alike understand the value of nameplates for both branding and navigation. (Large preview)

Practically every website has a nameplate, only on websites we call it the header. Smashing Magazine has one, Amazon has one, Facebook has one. It’s weird for a website not to have one, and for it not to appear on every page. On the web every page has to have a bit of the front page about it. A lot of users arrive at a site via the root domain, but a lot don’t.

This is one reason why nameplates online tend to be busier than their print elders. They are able to do more, which is just as well given more is asked of them. But in news and web design the underlying purpose of the nameplate is the same: get the brand front and centre and guide users to something they’ll care about.

Grid Systems And Content Blocks

Newspapers are pure content. From cover to cover, they are packed with information, information which needs to be well organised and well presented. The grid system is foundational to newspaper design. As water shapes itself to a bowl, news content shapes itself to grid systems.

Columns are the most important element of this. Depending on a newspaper’s format (tabloid, broadsheet, etc.) it might have anywhere from four to fourteen columns. It is rare for the content of newspapers not to shape themselves to these columns one way or another. Text flows down a column then resumes in the next one. Images can span multiple columns, especially if they’re eye-catching.

Front page of Dagbladet newspaper

Early publications, like this 1905 edition of Norwegian newspaper Dagbladet, often stuck very closely to their grid systems. (Large preview)

Newspapers have evolved beyond the strangely rigid stream of consciousness affairs you’ll find in earlier efforts like those above. Now it is generally accepted that newspaper content should be organised in blocks, with each story forming its own box. This is called modular layout, and there are several reasons why it is the standard.

First, it is easier to organise. If every story fits in a clean, tidy space, they can be rearranged with relative ease. When you’re trying to fit dozens (or hundreds) of stories into a finite space with the clock ticking, this is a godsend.

Second, it is clearer. Good information is only worth so much when it’s presented badly. Blocks create pages within pages, where each piece of information is distinct and easy to follow.

Modular layout in The Guardian newspaper

Modular layout in action in The Guardian. (Large preview)

These standards have always played a role in web design, but they are particularly useful to understand now we have CSS Grid at our disposal. Not only do newspaper grid systems offer guidance for arranging content neatly and clearly, they show how content blocks interact with each other, and with advertising. The wrong alignment can look very silly indeed, while the right arrangement is a joy to read.

As ever, there are differences. For example, online there are rarely jumps (when you reach the bottom of a column and continue reading at the top of the next one) because web pages can go down indefinitely. This kind of layout generally makes less sense online because it leads to readers scrolling up as well as down to get through a single piece of content, which is pretty counterintuitive. As Rachel Andrew demonstrates, jumps can be just the thing for listings and small amounts of content, but the practice is generally a product of print’s physical limitations. The main value of jumps in web design may well be for stacking blocks of content, rather than organising copy.

What’s more, both in print and online abandoning the grid system can be striking in its own right. Just as Dada art recoiled from aesthetic norms of the early 20th century, so do brutalist websites invert the grid system to offer something more… unconventional.

Dada print by Theo van Doesburg

A Dada print by Dutch artist Theo van Doesburg. (Large preview)

Homepage of the Yale School of Art

Yale School of Art sticking it to the man, man. (Large preview)

As noted already, to break the rules first you need to know them. For this and everything else, Tim Harrower’s The Newspaper Designer’s Handbook is a superb place to start. For a more sweeping introduction, Carrie Cousins’ Utilising Grids in Print Design over at Design Shack is excellent.

And how much does this all matter when you move over to the web? Well, more and more. CSS properties like Grid, Shapes, and Flexbox makes it easier than ever to both follow and break the rules of the grid system. Just as newspapers routinely venture outside the invisible lines of their wireframes, so too can websites push the boundaries of their own medium.

In his book Art Direction for the Web, Andy Clarke dives head first into the lessons of print media (and others), showing how advances in CSS can add whole new dimensions to the grid system. As Clarke himself puts it:

For years we’ve told each other the web isn’t print. We’ve told ourselves the things we admire in other design media cannot — and sometimes should not — be used online. We needn’t think that anymore.

Hear, hear.

For more inspiration, watch Jen Simmons live code a print layout in CSS Grid at Smashing Conference 2019. Beautiful. And for a more in-depth history of the grid system and its usage, check out this ‘Grids Are Good’ presentation by Khoi Vinh and Mark Boulton.

Look Forward… But Look Backward First

The conventions above were forged by decades — in some cases centuries — of experience, and there’s plenty more where they came from. What they all essentially boil down to is understanding content, and how people are likely to engage with that content.

Newspapers at their best follow a cartoonishly simple principle: present information in ways that are as clear, as attractive, and as accessible as possible. That’s a worthy goal for any website. And don’t take my word for it. These ideas were championed by Edmund C. Arnold, the aforementioned father of modern newspaper design.’ Arnold designed or redesigned hundreds of newspapers during his career, including The Chicago Tribune, The Boston Globe, The National Observer, and Newsday.

Portrait of Edmund C. Arnold

Edmund C. Arnold, ‘the father of modern newspaper design.’ Credit: Josh Meltzer/The Roanoke Times. (Large preview)

He pushed for designers to have more influence, for newspapers to have flair as well as substance. He was also a journalist, and an academic, and wrote numerous books about newspaper design and typography. He knew his stuff. It is no coincidence that the Society for News Design (SND), of which he was a founding member in 1992, now holds two awards each year — one for news design, the other for digital.

Anyone keen to learn more about Arnold and his work could do a lot worse than starting with the resources below:

Newspaper designers are students of the web — so too should web designers be students of newspapers. As improvements in web technology open up new frontiers, it pays to know whether someone else has been here before. We are all looking for the same thing, after all. It’s all, fundamentally, the same language.

You can see this playing out in real time as newspapers adapt to the web. The gold standard of news design online at the moment is probably The New York Times, which was a finalist in the print and digital SND awards this year. What’s interesting about the Times online is the blend between classicism and innovation. The homepage still essentially looks like the front page of a print edition, while individual stories, like ‘The Plot to Subvert Democracy’, immerse themselves in the new possibilities of the web.

Homepage of The New York Times’ website

The New York Times blends best practice of news and web design to make something entirely new. (Large preview)

Or take a newspaper designer like Mario García — part of the generation after Edmund — who’s most recent book, The Story, was designed to be read on mobile phones. The best news designers relish change. The proof is in the pudding. (For those interested, García blogs daily about the overlap of news and web design.)

This, in a lot of ways, is the main takeaway of news design. Its top practitioners are not dogmatists — they are students. When asked at the twilight of his career what his advice was to the next generation of designers, Edmunc C. Arnold’s answer was not a series of rules. It was far simpler than that: know where you came from.

My message to young designers is this: look, kids, you can do better, but the only way to achieve your potential is to go back to — and understand — the basics. That sounds boring, but it’s reality.

Newspapers don’t hold all the keys to great web design, but understanding the principles that guide them can only benefit web designers. There are plenty of kindred spirits in those two worlds. I’m no web designer, but I recognise good web design when I see it in part because of what I know about newspapers. Purpose and style has a way of looking, well, stylish.

Web design guru Jeffrey Zeldman hit the nail on the head when he tweeted this more than a decade ago:

https://platform.twitter.com/widgets.js

Vitaly Friedman was bowing to the same altar when he said, “Good design is about effective communication, not decoration at the expense of legibility.” Both he and Zeldman would find plenty of allies in the news design space. Few, if any, mediums have a richer history wedding content and design than newspapers do. That struggle is all they have.

To The As Yet Unimagined

It’s worth reiterating here that there are clear and undeniable differences between news design and web design. In newspapers the dimensions of the space are always the same, while websites must adapt to radically different screen sizes and devices. In newspapers what you see is what you get, while websites can hide all sorts of useful features out of sight until they’re prompted to appear. The aim of this piece is not to convince you that news and web design are the same. They are, however, often very similar. To be master of one does not make you master of the other, but it helps.

Perhaps this is why Friedman collated a selection of award-winning newspaper designs all the way back in 2008. Back then he rued the fact that print techniques weren’t applicable online. Back then CSS wasn’t sophisticated enough. Well, its is now, and that’s really exciting.

The process never ends. It can’t end. No newspaper or website worth its salt is ever truly ‘done.’ It is always evolving. Look at the first ever newspaper and the first ever website and it’s fair to say a lot has changed in both worlds since then:

The first newspaper

1609 edition of Relation aller Fürnemmen und gedenckwürdigen Historien, widely considered the first newspaper. (Large preview)

The first website

The first ever website. (Large preview)

Both formats have improved massively since those humble beginnings, and there’s an awful lot left to achieve. As C. Y. Gopinath traced out beautifully in 2016, the parameters are always changing; web technology, screen sizes, devices, internet speeds, you name it. In the mobile age maybe the nameplate belongs at the bottom. Who knows? It all lies ahead.

In many respects a torch has been passed from news design to web design. If developers can push forward with the knowledge of their elders on hand, they’ll achieve things previous generations couldn’t even have imagined. What an incredible opportunity. I can’t wait to see what they come up with.

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, What Newspapers Can Teach Us About Web Design

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

dreamt up by webguru in Uncategorized | Comments Off on Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Vitaly Friedman



The web is full of interfaces that leave people out. Of course, it’s not designers’ malicious intent or developers’ lack of empathy that bring us there. It’s just really difficult to foresee a wide range of situations in which our users might find themselves in. We need to build robust and reliable solutions in a world that’s inherently chaotic and unpredictable. Where do we even start?

Because we often build and deploy under tough deadlines, we tend to break accessibility without even noticing it. Our products become slower, clunkier and more painful to use — often simply unbearable for keyboard- and screen reader users, and as such fragile and vulnerable for legal disputes. Let’s fix it.

Meet Inclusive Components, our new handbook for building fully accessible websites and apps.


<img style="border-radius:11px;" srcset="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png" sizes="100vw" alt="Meet Inclusive Components, our new book for building accessible, inclusive interfaces. Written by one-and-only
Heydon Pickering.”>
Because accessibility matters. We’ve teamed up with one-and-only Heydon Pickering to create a handbook for building accessible, inclusive interfaces. The eBook is finished, and it’s being printed this very moment.

About The Book

At its heart, Inclusive Components is a detailed, practical handbook for building fully accessible interfaces. The book examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. The result is accessible and robust components we author, plug in, and use daily.

For years, Heydon Pickering, a seasoned front-end developer with a focus on accessibility, has been writing about accessible solutions. We’ve teamed up with Heydon to produce a book with common challenges and solutions that he’s been refining over all these years.

For each component, the in-depth explorations are meticulously illustrated and all solutions are available as bulletproof code snippets, applicable to your work right away. Bonus: you’ll learn how to build your own accessible components with inclusive design in mind — all in a single book. Jump to table of contents.

332 pages. eBook already available as PDF, ePUB, Amazon Kindle. Printed book will be shipped early December. Written and designed by Heydon. Download a sample PDF (1.1 MB).


The cover of Inclusive Components, a new book by Heydon Pickering.


The inner spreads of Inclusive Components.

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,
“sales_price”: “29.00”,
“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “USD”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}
]
}

$
29.00

$
39.00

Quality hardcover. Free shipping worldwide, starting from early December.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,
“sales_price”: “15.00”,
“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}, {
“amount”: “15.00”,
“currency”: “USD”
}, {
“amount”: “15.00”,
“currency”: “EUR”
}
]
}

$
15.00

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Table Of Contents

Each chapter tackles a single component, addressing how different and vulnerable people might read and interact with it, and how they can be better accommodated. Download a sample PDF (1.1 MB).

1. Toggle Buttons
+
2. A Todo List
+
3. Menus & Menu Buttons
+
4. Tooltips & Toggletips
+
5. A Theme Switcher
+
6. Tabbed Interfaces
+
7. Collapsible Sections
+
8. A Content Slider
+
9. Notifications
+
10. Data Tables
+
11. Modal Dialogs
+
12. Cards
+
A preview of the book, with examples ranging from accordions to toggles, tables, notifications, dialogs etc. Download a sample PDF (1.1 MB). Large preview.

About The Author

Heydon Pickering

Heydon Pickering (@heydonworks) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards.

Heydon previously wrote Inclusive Design Patterns which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.

Testimonials

Artem Sapegin“Inclusive Components is a very deep and thorough explanation of development of accessible components with real world examples. Heydon Pickering shows several alternative approaches and explains pros and cons of each. It’s also a pleasure to read!”

Artem Sapegin, front-end developer, Wayfair

Sarah Federman“Inclusive Components is chock-full of practical and comprehensive advice on building accessible UI. It’s my go-to resource after the official WCAG and ARIA documentation. I’ve found it extremely helpful when building our design system!”

Sarah Federman, senior front-end developer, Adobe

Andy Bell“What Heydon achieves with his work on Inclusive Components is a pragmatic, friendly and approachable set of guides that help you to generate not just accessible components, but also resilient and progressive starting-points that will help you to build better websites and web apps in general. I often describe this work as crucial learning material for this exact reason.”

Andy Bell, independent designer & developer

Why This Book Might Be For You

The devil is in the detail and often the things you do with good intentions can impose accessibility barriers unknowingly. Inclusive Components is for every front-end developer who wants to learn how to detect and address potential accessibility issues in their work. The book will teach you:

  1. How to use <button> elements, how to apply styles to your toggle buttons, and how to label them.
  2. How to create managed lists that allow users to create and delete content — in an inclusive way.
  3. How to address and resolve accessibility issues with navigation menus and submenus (aka “dropdowns”).
  4. How to create accessible and keyboard-friendly tooltips and toggletips.
  5. How to create a “dark mode” theme that’s both accessible and maintainable long-term.
  6. How to build an accessible content slider to prevent harm for motion-sensitive people.
  7. How to create inclusive notifications with live regions to communicate with your users through visual and aural channels simultaneously.
  8. How to create data tables that are semantically correct, responsive, and sortable.
  9. How to build accessible dialogs and modal dialogs with performance and inclusive design in mind.
  10. How to create and group inclusive cards (e.g. for teasers).

Technical Details

Community Matters ❤️

With Inclusive Components, we’ve tried to create a very focused handbook with applicable, long-living solutions and strategies to create accessible and inclusive interfaces.

Our hope is that with Heydon’s book, you will be able to make better design and coding decisions as you build your interfaces. Perhaps it will even become one of those reference books you’ll reach to every time you need to build one of those common UI components.

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.

Stay smashing, and thank you for your ongoing support, everyone!


The cover of Inclusive Components, a new book by Heydon Pickering.

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,
“sales_price”: “29.00”,
“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “USD”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}, {
“amount”: “29.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “22.00”, “type”: “Book”},
{“amount”: “7.00”, “type”: “E-Book”}
]
}
]
}

$
29.00

$
39.00

Quality hardcover. Free shipping worldwide, starting from early December.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,
“sales_price”: “15.00”,
“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}, {
“amount”: “15.00”,
“currency”: “USD”
}, {
“amount”: “15.00”,
“currency”: “EUR”
}
]
}

$
15.00

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Source: Smashing Magazine, Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Inclusive Design And Accessibility: Live Stream With Heydon Pickering

dreamt up by webguru in Uncategorized | Comments Off on Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Vitaly Friedman



Accessibility can sometimes become an unfortunate afterthought as we race to meet deadlines and search for tips and tricks to meet client demands. We can cause problems for keyboard or screenreader users, and leave our products fragile and potentially vulnerable to legal action from people who find themselves locked out due to their accessibility needs. How can we get better?

One way to find out would be by joining our live stream with Heydon Pickering who will be sharing insights about the relationship between accessibility and design systems, and exploring how to build accessible components, and why he decided to write a book on accessible interface design patterns.

Live Stream On Inclusive Design: Nov 7, 5:00 PM GMT

The session will start today, November 7, at 6:00 PM Berlin time (1:00 PM New York time) — broadcasted live below!

For a few years now, we’ve been running live sessions with respected professionals on Smashing TV — our video channel for our dear Smashing Members, who support our little team and our little adventures every month.

Starting from November, we’d like to try out something new. As the webinars have always been about sharing lessons learned with the community, we’d like to open them up to everybody, with Members having a chance to ask questions about the projects and their work right after the session.


From Smashing With Love

To help you stay on top of things, you can subscribe to our bi-weekly newsletter in which we announce what’s happening in the Smashing universe. Each and every newsletter issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!

You can also follow us on Twitter, Facebook, LinkedIn and even stay updated with our bi-weekly Smashing Podcast. Please do always feel free to reach out and share your thoughts with us — we love hearing from you!

Smashing Editorial
(ra, il)

Source: Smashing Magazine, Inclusive Design And Accessibility: Live Stream With Heydon Pickering

Collective #563

dreamt up by webguru in Uncategorized | Comments Off on Collective #563







C563_gameoff

Game Off 2019

Game Off is an annual game jam, where participants spend the month of November creating games based on a specific theme.

Check it out



C563_spleeter

Spleeter

Spleeter is the source separation library by Deezer. With pre-trained models written in Python and using Tensorflow it allows you to extract vocals, drums, bass and piano from a music track.

Check it out








C563_sidebearings

Sidebearings

A collection of typography and lettering resources designed to focus on beginners as well as advanced type designers, graphic designers and enthusiasts.

Check it out







Collective #563 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #563

Exploring New Ways To Manage Content In WordPress

dreamt up by webguru in Uncategorized | Comments Off on Exploring New Ways To Manage Content In WordPress

Exploring New Ways To Manage Content In WordPress

Exploring New Ways To Manage Content In WordPress

Leonardo Losoviz



The combination of WordPress’ versatility for managing data (since its database model supports the creation of different content models, easily extensible through meta attributes) and Gutenberg’s rich user interactions provide a powerful mechanism to create, edit and manage content.

In this article, I want to shine some light on these upgraded capabilities, exploring the new tools at our disposition and presenting several new ones to be released sometime in the future.

Existing Features

The following features are already part of Gutenberg-powered WordPress.

Create Once, Publish Everywhere

As I have described in my recent article “Create Once, Publish Everywhere” with WordPress, the block-based nature of Gutenberg enables it to enhance how content is organized/architected on the database, making it available on a granular basis (block by block) to any application running on any medium or platform (web, email, iOS/Android apps, VR/AR, home assistants, and so on). Content managed through Gutenberg can then become the single source of truth for all of our applications, allowing us to reduce the cost associated with re-formatting content to make it suitable for each required platform.

Copy/paste from Google Docs with (almost) perfect formatting

Whenever we need to collaborate with other people to create content, we will quite likely use online tools such as Google Docs, Dropbox Paper, Coda or others. These tools make it easy for different people to edit the content in a document concurrently and provide and incorporate feedback. If we are going to choose a Content Management System to store our content, we need to make sure that it works well with these tools.

Gutenberg does the job fairly well: When copying the content from a Google Doc and then pasting it into a Gutenberg blog post, the formatting is preserved, bullet lists are properly transformed to the list block, and images are inserted where they should. There may be a few inconsistencies (for instance different spacing across blocks and in the original document) however, for the most part, the process is fit for use.

Copy/pasting from GDoc to Gutenberg
Copy/pasting from GDoc preserves the format of the document. (Large preview)

Crafting art direction

Several Gutenberg blocks support creating distinctive and engaging layouts and assisting the art direction of the site, to give it more personality and emphasize its identity. This way, even though we may base the site on a standard, plain-looking WordPress theme, we can customize the content’s appearance to make it stick out from the sea of sameness out there on the web. Let’s explore some of these blocks.

The Shape divider block allows to insert dividers in between two blocks. We can choose one among several basic shapes and customize its width, proportions and colors and then, with a bit of resourcefulness, create more intrinsic patterns from it. For instance, the divider below was created by first creating and customizing a divider, then flipping it both vertically and horizontally to mirror itself, then grouping these 2 halves so we can use it as a single unit (the grouping functionality will be available in core through the release of WordPress 5.3 next week, and is currently available through the Gutenberg plugin), and finally saving the grouped block as a reusable block so it can be used everywhere across the whole site:

Shape divider block

The shape divider block connects, or breaks apart, components. (Large preview)

The Advanced columns and Row layout blocks allow to create row-based layouts, inside of which we can place nested blocks (i.e. any other Gutenberg block). They are highly configurable: They offer to define how many columns the row must have, with what padding, margin and proportion of width for each column, setting an image or custom color in the background, and several other attributes.

Row layout block

The row layout block allows to easily configure the proportion of width among columns. (Large preview)

We can also create grid-based layouts with predefined content. For instance, through the Post grid, Post carousel and Post masonry blocks we can display a list of posts in different ways, defining what attributes from each post to show (title, date, excerpt, author, and so on), and through the Advanced gallery block we can create beautiful image galleries.

Advanced gallery block

Masonry gallery created with Advanced gallery block. (Large preview)

Some other blocks, such as Feature grid, allow to create grid layouts with predefined templates filled with custom content.

Feature grid block

The feature grid block enables to add custom content inside of a grid layout. (Large preview)

These are just a sample of those blocks which can help us fill the content with visually attractive layouts and craft the art direction of our sites. To keep exploring possibilities, we can head to the directory of plugins offering blocks and check these out.

Assisting the user while editing content

Gutenberg assists the user when creating content through the following features:

Real-Time Preview

The Gutenberg editor gives a relatively accurate preview of how the content will look like in the website.

Error Warnings

Gutenberg makes the content creator be aware of accessibility concerns. For instance, if our content structure jumps from an <h2> header to an <h4> one without adding an <h3> tag in between, Gutenberg provides a warning message about this potential error. Similarly, when setting up the color of some text against its background color, if the contrast between the two colors is not clear enough then Gutenberg provides a warning message and helps fix the problem.

Suggesting/Executing Improvements

Blocks can connect to third-party services to analyze content and enhance it. For instance, a service could suggest how to improve the grammar of the content, provide alternative titles and tags for a better SEO, and even automatically translate the content to another language, as done by this plugin which automatically translates from English to Hindi as the user types.

New Features Under Implementation

The following features will hopefully/eventually be coming to Gutenberg in the future.

Snap to grid when resizing images

Contributors are already working on adding a grid system to Gutenberg which will, among other things, enable to resize images in an assisted manner by snapping it to the grid:

Installing a block from within Gutenberg
Snapping an image to grid (image from the GitHub issue). (Large preview)

Inline installation of blocks

Sometimes, while we are writing a blog post, we find out that we need some functionality that we don’t have yet installed. Hence, we need to switch to the Plugins screen, search and install the corresponding plugin, and then go back to the blog post. This process adds friction to our content-writing workflow.

Wouldn’t it be nicer if we could install the required functionality right from within the editor itself, whenever we need to use it? Well, this proposal is already being implemented through this pull request (it first depends on blocks being installed on their own, i.e. without depending on being shipped through a plugin). Once merged, our content-writing workflow will not be impaired anymore, as visible in the mockup below.

Installing a block from within Gutenberg
Installing a block from within Gutenberg (image from the GitHub pull request). (Large preview)

Installing blocks directly from the editor could lead to unintended bloat, from making it too easy for the user to install blocks. To address this issue, after installing and using it, the block could be removed! This was not possible before Gutenberg, because if the plugin providing a shortcode (which was the way to render dynamic content inside the blog post before Gutenberg) was disabled, then the invocation of the shortcode would be rendered in the blog post (instead of the shortcode’s output), messing up our content. However, Gutenberg works differently: Blocks only save HTML content inside of the blog post (including HTML comments to store configuration attributes), so, if the block is disabled, its intended HTML output is still part of the blog post’s content. (Even though there may be problems if the block needs to load CSS assets which are not loaded anymore once the block is disabled. I am not aware how this issue will be handled.)

Page/Site builder

Currently Gutenberg can only be used for the creation of content inside a blog post or a page, however it will soon support the creation of any part of the website: Content-block areas can define the header, sidebars, footer or any section needed for our layouts. Automattic (the company behind WordPress.com) is already working on a plugin to add full site editing capabilities to its WordPress.com product, which should eventually be extensible to the open source WordPress software too.

Creating a new page with full site editing enabled

Creating a new page with full site editing allows to select a page template. (Large preview)

Real-time collaboration

Google Docs is incredibly useful to teams because it enables their members to work on the same document at the same time. Sometime in the future, Gutenberg will also incorporate a mechanism for real-time collaboration, allowing different people to work on the same blog post at the same time. This mechanism will (at least initially) be based on giving editing-locks to users on a block-by-block basis, as shown in the mockup image below.

Real-time collaboration through Gutenberg

Real-time collaboration through Gutenberg (image from the GitHub issue). (Large preview)

This feature will be particularly useful to online magazines (such as the New York Times and the like) since they may already have teams collaborating on a story (for instance, designers dealing with images, journalists, proofreaders and editors dealing with content, and others). Having real-time collaboration tools will enable these magazines to speed up their content-creation workflows and publish their articles faster.

Translation

WordPress core has never added support to translate content (it only supports translation of strings inside of core, plugin and theme files), but instead left this responsibility to plugins. Through Gutenberg, WordPress will finally add native support for this feature.

Translation is not a priority yet, so it has been targeted for Gutenberg phase 4, expected in the year 2020+. Since it is a long way off, there are yet no technical considerations of its implementation or mockups of its intended user experience. So we can only guess how it will be. Since it will be implemented after the real-time collaboration feature (described above), I would expect it will enable different people to translate the same blog post to different languages at the same time, block by block.

Inline media editing

Through the Media Library, WordPress already provides some image editing capabilities: resizing, cropping, rotating and flipping. These capabilities are very basic, and they are applied on to the image on a different screen, which creates some friction to the process of fitting the image into the blog post.

Through Gutenberg, the media-editing experience could be greatly enhanced: One one side, it could support editing the image in more advanced ways, such as applying effects or filters, altering the contrast, replacing colors, adding text as watermark, adding transparent regions, converting it to different formats, and others (for instance, Cloudinary provides an API to apply many transformations to an image, which could be perfectly accessed by a block). On the other side, the editing could happen inline, right where the image is placed inside the blog post. Then, for instance, if the image was added as an overlay against some background, and we add transparent regions to the image, we can visualize in real-time how the composite result looks like.

(I haven’t found any proposal to tackle this issue in Gutenberg’s GitHub repo, but I learned about this idea talking to some core contributors, who expected to be able to work on it some time in the future.)

Conclusion

Already being the most popular CMS (close to 35% of the web), WordPress has also the chance to offer the most compelling tools to manipulate content. This is because Gutenberg offers an appealing mechanism to create, edit and manage content: A single interface, simple to use, fairly powerful and versatile. With its new content management capabilities, WordPress can become the single source of truth of all our content, to power all our applications (websites, newsletters, apps, and so on) through APIs. Kudos to that!

Smashing Editorial
(yk, il)

Source: Smashing Magazine, Exploring New Ways To Manage Content In WordPress