DICKS Sporting Goods: Shopping Cart Floating Action Div

30 UIs, 30 Days: Day 17–18

I was looking to buy some running shoes from Dicks Sporting Goods online store when I noticed a UI Problem with their shopping cart. The Continue button was awkwardly placed. Considering this is a a crucial step in completing a purchase submission I started to think about alternative solutions for their shopping cart experience.

The Floating Button

In order to fix this issue, the button would need to be always viewable, without being in the way. The first thing that came to mind was the Material Design floating action button.

The problem with this solution is it can cause some usability issues depending on th structure of the UI. figuring out a way to get around this makes the floating button a challenging solution. I began to wireframe my idea.

Wireframe

The initial design for the floating button was had was very visible, but was OD awkward, kind of like this Schwarzenegger Gif.

Like Schwarzenegger, this design had the potential to be sleek and sexy, so I decided to finish up my design and create a Hi-Fi Mock.

This is not ideal, but it’s close.

Day 18: Floating Div, Not Button!

I was sitting at my uncles FANCY beach house out in Fire Island talking to my grandma about Murder Mystery novels when it hit me. The button floating on its own causes problems. It needs to be a floating div.

This floating Div would contain 3 things:

  1. The Scorecard option condensed.
  2. Order Summary Details condensed (which open into an overlay with the cart details).
  3. The Action button.

I finished my conversation with granny and got on Sketch.

Floating Action Div