How we get from one TV episode to the next on your streaming service of choice requires finesse. The right design pattern saves time through less menu navigation once you reach the end of an episode. But too aggressive of a yank to the next show generates a hurried feel, giving you barely a breath to process what you watched before zooming off to the next show.
The services I subscribe to today – Netflix, Amazon Prime, Disney Plus, Apple TV Plus – take different approaches to this next episode design challenge. All but Disney Plus have an algorithm that detects when you’ve finished an episode, generally the moment the closing credits begin to roll. At that point, UI appears to suggest moving on to the next show. This feature ensures I get the correct episode when I pick back up the series later.
Disney has no next episode detection and no corresponding UI at the episode’s natural endpoint. Continuing the “latest” episode of a show usually drops me midway through the previous episode’s credits. The net effect means I have to manually browse to get to the next episode.
For engineers building user interfaces, I find there’s heavy emphasis on technical chops and little to none on design comprehension. Yet a subset of design skills can distinguish great from merely good UI engineers.
I’d term these skills “pre-visualization”: understanding design specifications before writing any code, and at a level beyond what designers formally deliver. A big part of pre-visualization is the ability to break down specs into reusable components. You discern visual patterns from existing parts of your app, site, or larger OS, and apply them to a designer’s work. In many, if not most cases, much of the spec maps cleanly to what came before. Common UI patterns like buttons, form elements, and navigation generally repeat themselves. Some will not.
To become a better web UI engineer, study design, communication, and vocabulary. Even if you cut back on some extra technical training, it’s worth it. That’s because the difference between good and great UI work rarely comes from technical prowess alone. It’s distinguished by creativity, visual insight, and sound organization.
Yes, JavaScript and styling fundamentals are important. You need to understand the tech behind your craft. But the solution to a tech blocker can be a tool or coworker away. And once you learn the basics of one MVC JS framework or CSS coding methodology, you can learn another.
Reusability is a bigger issue. Every time you change styling or write a new UI element, consider its impact elsewhere. Think ahead to where the application will grow and how you can cut repetition. It’s more than an blind grep through the code. It’s finding patterns. And visual patterns or usage trends are especially tricky to detect.
Flexbox is a powerful web styling tool, one my favorite recent CSS additions. It’s an effective replacement for hacky, float-heavy layouts. Given its wide browser support and mature feature set, I lean on Flexbox for most project work.
However, I’m surprised many developers stay away from Flexbox. They’re worried about browser support, a big learning curve, or otherwise strange behavior. They shouldn’t. Here’s how to get started.
Inefficient web styling slows performance, adds inconsistencies, and harms developer and designer productivity. But many teams don’t prioritize CSS tech debt; gains are subtle and hard to measure. And CSS testing suites aren’t as robust as those for JavaScript, Rails, and other web languages.
Yet the effort necessary to keep web styling lean and efficient is overblown. The key is abstracting page level styling into reusable components.
Components are distinct groups of elements on a page. Common examples include navigation bars, carousels, and form sets. Components should be standalone, easily moved to different pages without breaking layout. Some styling methodologies substitute other terminology for components, calling them modules or blocks. And the size and scope of component usage differs widely among projects. Large projects, given their size and scope, tend to rely more on components than smaller works.
Web styling advances at a ferocious rate. Vanilla CSS is a rarity. Almost every web presence relies on new frameworks, preprocessors, and workflows. Yet even in the midst of progress, the fundamentals often trip up our work.
Our CSS fights against the natural DOM (Document Object Model) flow. The DOM flows from left to right, and from top to bottom. Block elements expand as wide as possible within a bounding container. Elements grow only as tall as absolutely necessary. The more we resist this flow, the more likely things break.
To avoid this, I follow three rules. Whenever my layout feels janky or otherwise hard to debug, it’s usually because I’ve strayed off course from these guidelines.
As a publishing platform, the web is on hard times. Paywalls and subscription plans are rarely successful. That makes ads and trackers the primary source of revenue. Yet ad tech is usually poorly designed, intrusive and inefficient. It slows down pages and pisses off users. That’s been underlined in recent articles highlighting the performance of The Verge , iMore and others. An otherwise simple news post bloats into megabytes of data, with ads and trackers taking the overwhelming share of that weight.
In the face of web bloat, users are opting out. Many strip out ad and tracker content with tools like AdBlock and Ghostery. Or they abandon the web for faster native publishing platforms like Facebook’s Instant News and Snapchat. Along these lines, Vox’s Ezra Klein predicts publishers morphing into a wire service, where the web becomes just one of many content platforms to publish on. Large publishers like Buzzfeed and The New York Times have already moved in this direction.
This is concerning. In reality, the web can be performant with ads, a subject matter for another post. A weakened web presence makes for an ugly future for publishing. It hurts the publishers themselves, and us, as readers.
Apple Music shares a lot of the same DNA as other streaming platforms. There’s a huge music catalog, the ability to save a collection offline, curated playlists, and radio stations. Yet its UX feels distinct, more segmented and compartmentalized compared to its streaming peers. That’s a plus for streaming newbies and more casual users. But it comes at the the cost of comprehension and cohesion in the long run.
It’s easiest to cover Apple Music’s UX shortcomings through example. Say you browse through playlists in New on iTunes, and then jump into the For You segment to browse further. At this point, there’s no way to jump back chronologically into your previously accessed playlists. Each segment has a separate state and history. Or you want to find the source (e.g. album, playlist, radio station) of the currently playing track. It’s often awkward if not impossible to do so. Even search adds a binary toggle between My Music and Apple Music to further separate results.
I recently attended the third annual CSSConf here in NYC. The conference scheduled sixteen speakers over two days with varied content and subject matter. Some speakers talked about the gap between design and development. Others touched on coworker relationships and styling for the web’s future, “post CSS”. Most focused on CSS-based web development. Here are a few takeaways that are easy for almost anyone to integrate into their workflow.
The redesigned Bloomberg Business has been controversial ever since its launch. To many designers, Bloomberg’s maximalist layout is tacky and garish. I think critics are missing the larger picture. The home page’s dominance is waning. Bloomberg’s brash, over the top design is an effort to make it relevant again.
User flow on “content first” sites (e.g. blogs, media, Tumblr) has shifted in recent years. Social media, share services, and content aggregators have fragmented web site’s visitor flow. Articles and other permalinks have replaced the home page as a site’s main entry point.
Many companies, most notably Buzzfeed, have thrived off this shift towards social discovery. So most of their attention, optimization and A/B testing focuses on article pages. Meanwhile, other pages that link to these articles (home, section, feed) feel ignored. Most still rely on a busy, reverse chronological listing that feels like a relic of web design from years ago.
Bloomberg, at first glance, follows this “article first” design methodology well. Their articles have the same share friendly article template – big social media buttons, full bleed imagery, provocative headlines – as the competition. Yet Bloomberg dramatically shakes up the design of their home and section pages, which have:
Highly opinionated, brand driven aesthetics. A bold use of color, bordering on (or pushing past?) garishness. Text overlapping imagery. Web 1.0 era gradients. Blocky headlines with large white padding.
Varied story density. Content is in a responsive-friendly grid format. Yet every Bloomberg section mixes up how much is presented, and where.
No linear or chronological order. The layout rarely follows a clear pattern other than a “top story” or two placed at the top. Some pages have low density sections followed by high density sections. Others reverse this layout.
Bloomberg designers realize the battle for engagement has blown beyond the initial article. Now it’s the page after – usually a home page, section page, or feed – that requires creative focus. A unique, memorable second page experience can build a web brand and improve the odds of return traffic.
Bloomberg isn’t alone in heavily revamping and stylizing their home and section pages. The Vox Media properties and Medium have taken similar actions; they’ve carved out an aesthetic niche (Vox leans towards maximalism while Medium thrives on its simplicity) and a fresh articles listing format.
Overall, it’s a welcome trend. With web sites increasingly reliant on sharing and social media for visits, article design is starting to feel a bit stale. Now it’s the pages that bind the articles together that are getting a shakeup, with Bloomberg, Vox and others leading the charge.
