From Notes

Swiping stories and how mobile interaction patterns evolve

Once in a while a new interaction pattern pops-up and you wonder why it took so long to figure out.

The ‘stories pattern’ is one of these patterns. It’s a truly native mobile experience. Born on native.

Snapchat, Facebook, Instagram, Medium
Snapchat, Facebook, Instagram, Medium

In design we often still treat the touch screen as a regular computer screen. We moved from skeumorphic design, a way to make people understand a new medium by reusing anchors from the past to a more mobile originated visual design.

Infinite scroll
Facebook figured out that if you build a smart infinite feed people will scroll indefinitely. It’s still a web pattern based on the scrolling behavior of your mouse. It works fine on mobile too.

Tinder familiarised us with card swiping on a phone. Using one hand to hold your phone and use your thumb to go through dozens of cards like an experienced card dealer in a casino throwing out the cards.

Google matured the card concept with their Material Design guidelines and Google Now.

The stories pattern
Snapchat was the one to crack and grow the ‘stories’ pattern. Successfully copied by Instagram and now rolled out into Facebook (test) and Medium.

It’s a way to horizontally swipe through something with one hand, like a deck of cards. Only the cards fill the entire screen.
There is no vertical scroll or partial view, it’s screen to screen to screen. Building a horizontal oriented infinity feed of little experiences or moments.

Stories features on Snapchat, Facebook, Instagram and Medium
The great thing about this pattern is that it works just better with the motion of your thumb.

You stretch your thumb a little bit and there is something new.

Figure from: A comparison of smartphone interface guidelines using primary navigation patterns by Pukar Bhattarai, HCI-E MSc Final Project Report 2016 UCL Interaction Centre, University College London.
Figure from: A comparison of smartphone interface guidelines using primary navigation patterns by Pukar Bhattarai, HCI-E MSc Final Project Report 2016 UCL Interaction Centre, University College London.

Something that might be fun. It’s addictive, you can peek at the next card, on small swipe and your on to something new that might be exciting or not. The Skinner box.

This is the one-armed bandit of mobile. It’s a nice and small gesture and it’s addictive.

Good design is as little design as possible

Dieter Rams, 10 principles for good design

As often with great design. In retrospect it’s staring you in the face. Why something so simple was so complicated to discover.

Building habits

I started blogging over 12 years ago. Starting a blog was the easiest way to share ideas and work.

Over time it got easier, WordPress came around and I got better at it.

The challenging part of writing is starting with it and keep doing it. It’s like any other skill. You have to create a habit, stick to it and keep practicing.

When to hit publish?
When Twitter and Facebook really took of I moved from blogs to Twitter and my posting frequency declined and died a slow death. There is so much good stuff to read. Why should I write more? When is something enough to publish?

I do miss it, not because I have something to share with the world. I like how writing makes me organise my thoughts. And make it easier to shape an idea into something that can be easily communicated to other people.

Since a couple of years I co-organise the Behavior Design meetup in Amsterdam. It’s a quarterly meetup about the design of behavior. We ask experts and designers to share their insights.

Over the years I learned a lot about how to change behavior. The model that BJ Fogg presents still stands out to me, because it’s so simple and easy to apply. (B) Behavior = (M) Motivation (A) Ability (T) Trigger (B = MAT).

So let’s try some behavior design analysis to my writing 🙂

Goal
So here’s my goal. Writing helps me structure ideas. I want to improve this behavior (B) and be better at communicating ideas.
The motivation (M) is ‘oke’, it’s not really high, I don’t want to be a writer. I do wan’t to improve. I do like writing.

In BJ Fogg his model you want all actors in the model to work together. If motivation is low, you need to make it really easy to do and by creating a trigger you ensure that you keep doing it.

My Ability (A) is quite high. I have a million excuses to do other stuff. Although finding 30 minutes to write can’t be that hard. There is no technical barrier anymore. Medium is a great way to share stories and get feedback from people. All you need is browser and a computer. No excuses here.

Then the most important part. The trigger (T), it’s what makes you start and what keeps you going. I used to write a lot on my daily commutes in the train. Which is a great trigger. Sit, music and a slow internet connection. I now commute by car to the office, so I need to find another time and pace.

Having a pace is important. Don’t start at a pace that is too high, and don’t make it too slow either, if you don’t write often your stories become way to important and to important to finish.

Not sure what my pace and trigger is yet. Let’s start with once a week.

on Chat bots

Chat bots are the new UI. Or at least there is a lot of interest in adding bots to chat apps to deliver services.

On May 19th we’re organising a special Behavior Design meetup regarding this subject. How can a conversational interfaces or bots influence the behavior of the person it’s talking to.

Martine van der Lee from KLM will talk about how they use Facebook Messenger to help clients check-in. Willem-Paul Brinkman from the TUDelft knows everything about conversation strategies and Niels ‘t Hooft a writer, writing for games will share his experience.

In preparation of this meetup I’ve been reading a lot regarding conversational UI’s. Here are some of the stories I think are worth reading or listening to.

What I learned from it.

  • Young people grow up with conversational interfaces. It’s part of what the internet is to them. Figuring out how to serve them in these interfaces is necessary to connect with them.
  • The app store is a terrible place to be in. It’s difficult to be discovered. Adding your services to existing apps sort of creates a meta app store that makes it easier to reach people
  • Chat bots are most often just (html) apps within a conversation. It’s not always about conversational UI, it’s about showing your service or link when someone needs it.

I think it’s a fascinating topic.

If you like it make sure to join our meetup. It’s currently sold out, although there is a small waiting list. Usually some spots open up close to the event.

Update
Check out this story by Esther Crawford building her own bot and writing about the experiences

Who’s responsible for an evil machine?

Joi Ito posted an interesting remark to the VW story on Facebook. With increased usage of machine learning algorithms. Computer try to optimise results. Results that can be great for operating the machine, although it can have side effects.

There is a thread over email with various people right now about how just auditing the code will not be enough since with machine learning, you don’t actually “program” the rules, but the machine learns them. If a machine optimizes in a way that breaks a rule, is it the programmers fault, and how do you detect it. I think that how and with what data we train AIs is going to be an exceedingly important way to manage things as relatively straight forward as breaking laws all the way to ethics.

The code used during the VW emission check probably didn’t have anything to do with machine learning. It’s a very simple check.

The software was relatively straight-forward: during an emissions test, the wheels of a car spin, but the steering wheel doesn’t. No turning or jostling of the steering column, indicates the car isn’t out on a normal drive and that an emissions test is underway. That activated a defeat device that limited the harmful gas emitted by the car, allowing it to pass the test.

With machines getting smarter running their own optimisation tricks. Who’s to blame when the machine makes a choice that’s probably completely rational for the machine, although against societies values.

Make in this story at Fusion as well.

Microinteractions for iOT with Dan Saffer

This is one of the best presentations about design I have seen in a while. Dan Saffer (ex-Jawbone) talks about microinteractions for connected devices at Solid.

With more connected devices around us, complexity increases making an important case for simple interactions. Making something really simple work in an environment with connected devices is a challenge in itself.

Triggers, Rules, Feedback, Loops and Modes

Microinteractions Trigger Rules Feedback Loops and Modes
Microinteractions Trigger Rules Feedback Loops and Modes

Dan refers to different categories of actions. This model is similar to models promoted in Behavior Design where a trigger combined with motivation leads to an action. Some actions are standalone, others are about changing behavior in the long term and require loops and modes.

I like how Dan talks about these from his extended product experience and knowledge. Specifying manual triggers (visible/invisible) and system triggers.

Watch his talk (video)

Watch the video

Responsive Design mode in Safari

I just discovered the responsive design mode in Safari. This is nice. I think it’s a great tool, even when it’s limited to showing Apple devices.

The past weeks I have talked to multiple companies about how they approach responsive design. Mobile is over 50% for most companies, even approaching 70% numbers. Most websites start from a web view and adapt for mobile. Responsive Design is often, web design optimised for mobile.

This is wrong and we need better design tools to fix this. The Safari responsive design mode is a good start. While we design and build most websites behind a computer, most viewers aren’t viewing this from a computer.

Hiding a div is not how you scale down. We need to think the other way around. How to scale up and thinking about browser memory and mobile bandwith. Mobile first, really means mobile first. Start with the best mobile website you can think of and scale up.

The ad-blocker discussion on mobile browsers linked to this design approach. Loading too many ads and external scripts that make a scaled down page just too heavy to handle for most mobile browsers. Resulting in a bad experience, ads that are too big, content that is out of the first view, sites that crash or never load.

Safari Responsive Design Mode
Safari Responsive Design Mode

Behavior Design in Marketing

On October 6th we’re organising the 11th Behavior Design meetup together with Info.nl. The meetup is part of the Amsterdam eWeek. A week filled with events.

Behavior Design meetup at the Amsterdam eWeek 2015
Behavior Design Amsterdam at Amsterdam eWeek 2015

We have some great speakers. Most of I know personally and really admire. A great line-up.

  • Ingmar de Lange, pushing brands for years by focussing marketing on products and actions instead of words.
  • Ellen van Den Berg head UX of DDB & Tribal Worldwide, she will co-present with Apo J. Bordin.
  • Tom De Bruyne, founder of SUE Amsterdam. Tom is a long time advocate for Behavorial Design in marketing.

There are still a few seats left.

See you October 6th!

“Bitcoin desperately needs design”

The IDEO futures podcast interviews Andreas Antonopoulos, author of Mastering Bitcoin.

In the interview he is talking about design methapors and the problems surrounding Bitcoin and blockchain mass-adoption right now.

It’s interesting too see that a lot of the things happening in this space are inevitable. At the same time there is still so much too gain. From a design perspective there is huge potential in this domain.

Certainly worth your time to listen if you’re into bitcoins and design.

Design in Tech report 2015 by John Maeda

Slide from Design In Tech Report 2015

As Design Partner at Venture Capital firm KPCB John Maeda released the Design in Tech Report 2015 earlier in March this year. It gives a great overview of what’s happening in the design field at this moment. Where design is getting more relevant to companies with the month.

We get more and faster technology, with more and different contact moments. This makes it more difficult to make easy to use products and services. Resulting in giving companies that are design driven an advantage.

I answered some questions in a survey in the approach to this report, you can find my name – really small – somewhere in slide 30 where designers where asked if coding skills matter for a designer. As an answer. I think they do. Coding skills do make you a better designer, it makes you understand how thinks work. You don’t have to be a top coder. It’s like being an architect understanding the impact of construction and materials make you a better designer.

Design in Tech Report
Design in Tech Report