After years of residing in the dustbin of design, the horizontal scroll has been resurrected in the enterprise arena once again. This time it’s by one of the most innovative design leaders in IT, Apple.com.
It should come as little surprise that Apple.com would venture into territory that even the most forward-thinking design firms fear to tread. Apple.com’s website team frequently crafts beautiful, mind-bending animations that push design boundaries and delight visitors. So, upending the rules of the game is nothing new to them.
But can Apple.com breathe life into what has been hailed as the most hated scrolling approaches ever to hit a desktop screen?
“A horizontal website is a lot like your artsy younger sister who dresses weirdly and doesn’t seem to acknowledge a world outside of her own imagination. Since horizontal websites are not universally embraced by the web design community, those who design in this genre must live with a hope that they are advancing design in some small way.“Jacqueline Thomas – 40 of the Best Horizontal Scrolling Websites
Apple.com’s horizontal scroll approach, while beautifully rendered and perfectly executed, isn’t exactly groundbreaking.
Instead of the screen scrolling up and down, it scrolls from left to right. The only thing that makes it stand out from the historical iterations, aside from being better looking, is that the end of the page shows a bit of flourish by changing to a vertical scroll (go to 02:24 to see it in action).
History repeats itself
Horizontal scrolling has been vilified since its inception in the early 2000s. Even Jacob Nielson called it out as a flawed design in his article Top 10 Web Design Mistakes of 2002 – then doubled down in 2005 in Scrolling and Scrollbars.
As stylish as Apple.com’s presentation is, it still contains all the usability hang-ups that plagued this design approach since the beginning – and even comes up with a few of its own.
- The scroll bar is located on the right rather than the bottom. On the one hand, this makes sense because it aligns with common convention. On the other, users may expect to get a scroll bar on the bottom since the page scrolls from left to right. In either case, the user skips a beat looking for the scroll bar, which is time better spent reading about the product.
- Some links take the user to vertical scrolling pages, which can give them orientation whip lash especially when they pogo-stick between the main marketing page and supplementary pages.
- The change from horizontal to vertical scrolling at the end of the page is disorienting for the average user. Therefore, it can be particularly distracting for visitors with visual disabilities.
- People in certain demographics, particularly the elderly, can be confused by this design.
Know thy user
So, does it really matter if the page design for one version of one product doesn’t support one demographic?
There’s no arguing that people over the age of 65 aren’t Apple.com’s target market. Most iPad users are between the ages of 25 to 34 and people in the 30 to 49 age group have the most disposable income. Those coveted groups will probably convert to a horizontal scrolling design just fine.
The bigger question is how will that affect the bottom line?
Only 7.5% of iPad users are 65 or older, and this design is only used on the iPad Pro. So, the impact of this design decision on Apple is probably negligible, even when you account for the people in this group that purchase iPads as gifts.
However, other enterprise website teams interested in making the leap into a controversial design like horizontal scrolling should sharpen their pencil and do the math before getting their design team involved.
Hope springs eternal
Despite, or because of, this design’s flaws, the Apple.com team did put some elbow grease into making the iPad Pro page as usable as possible. There are some things it does right.
- The page maintains its sticky header, which is a common convention throughout the site
- The page rolls with a mouse scroll wheel, which aligns to vertical scrolling conventions
- The animations are as solid as a rock. No skipping, pixelating, or stuttering
These small overtures don’t overcome the number of usability challenges this page faces. However, each one is a step in the right direction to making the horizontal scrolling design more tolerable for the masses.
What is most interesting is the horizontal scroll approach doesn’t make it to Apple.com’s mobile site. The page is flawlessly reproduced using the conventional vertical scrolling format.
The decision to go to a vertical scroll orientation on mobile is surprising. Since many mobile apps use horizontal scrolling approaches it is actually more accepted than on desktops. This makes mobile a more attractive venue to test horizontal scrolling designs before they’re applied to the desktop.
Horizontal scrolling designs are enjoying a renaissance, largely on artistic websites. Design groups, branding organizations, advertising firms, and artists are playing with this design approach and improving its usability with every iteration.
However, Apple.com’s venture into these controversial waters takes this bleeding edge design approach and brings it into the enterprise environment. It also reminds its fans that Apple isn’t just an IT company – but a design firm unlike any other.
Category: Case Study
Class: Website Trends
Websites Profiled: Apple.com
Related siteIQ Research:
- 5 lessons from Apple.com’s “now you see it, now you don’t” launch
- The truth about Apple.com
- 5 things you probably didn’t know about Apple.com
- Top 10 Web Design Mistakes of 2002 – Jacob Nielsen
- Scrolling and Scrollbars — Jacob Nielsen
- 40 of the Best Horizontal Scrolling Websites – Jacqueline Thomas
- Who Is the “iPad Generation?” — Richard Washington