Pattern hunt: Full-width mobile buttons

I recently found myself on a hunt for a screen pattern I know I had seen before but couldn’t think of off the top of my head: full-width buttons that go acrossthe bottom of a screen on mobile. It sounds super specific, but I was working with my team on some pattern validation exercises and we wanted to make sure we weren’t going down a path that would cause unnecessary confusion for our users.

I decided to compile the examples I found into a post to share with both my team and with anyone else who might be looking for similar patterns. And — here’s the part where I keep myself honest but declaring it publicly — I’m going to try to share patterns at least once a month in an attempt to write/create/share more.

I’ve split the examples up into three categories: Dual actions (one span with two separate buttons), single actions and flow progressions (this emerged as a very common theme; using full-width buttons to move the user to the next screen in a flow, typically within an onboarding exercise).

Category1 : Dual actions

Left and center: Gogobot; Right: Human
Left and Center: Airbnb; Right: Ibrahim Ali
Left: WeWork; Center: Caviar; Right: VSCO

Category 2: Single Actions

Left and Center: Hotel Tonight; Right: VSCO
Left, Center, Right: Airbnb
Left: WeWork; Center: Caviar; Right: Munchery
Left: Deep; Center: Ghani Pradita; Right: Sergey Jani

Category 3: Flow Progressions

Left and Center: Wildcard; Right: Caviar
Left and Center: WeWork; Right: Ibrahim Ali
Left: Hoang Nguyen; Center: Hopper; Right: Brewster

Do you have any suggestions for future patterns you’d like to see? Share your ideas with me on Twitter @hollymariegibbs

Like what you read? Give Holly Marie Gibbs a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.