» Web Design in Japan

Rich Mirocco about web design in Japan. A good follow-up after reading previously linked article about Chinese web design.

Chaos. Countless columns. Tiny little pictures of low quality. More information than I can stand to read in… forever probably. The colors of the top navigation tabs run through the visible light spectrum. Twice.

» Stetho, Android debugging platform

Great open source project from Facebook:

Today, we’re open-sourcing a powerful new debugging platform for Android called Stetho. With it, developers can unlock much richer and more convenient access to data. And the best part: We use Chrome Developer Tools to serve the UI!

» Chinese Web Design Trends

Fascinating read. It’s a very different world behind the Great Firewall:

Websites are so 2010. In 2015, Chinese companies are building light apps, or qing ying yong (轻应用). Light apps are one-off, zero-download, hyper-targeted mini-sites that are typically built (and often animated) with HTML5. Oh sure, they do have a dedicated URL and they’ll load in a desktop browser if you absolutely insist, but they’ll probably look awful on a desktop screen. In some cases, they don’t even function at all after the page loads, given that some of them require swipes to navigate.

Light apps are designed for fruit-fly attention spans. They’re often single-page, single-message and intended to be single-use. In other words, users would open a light app once, flip through it, ideally pass it on to friends via mobile sharing, and then never look at it again.

» The Quadrant System in Drive

I’m a sucker for videos that analyze cinematography.

» Typeface Mechanics: 001

Tobias Frere-Jones, my favorite working type designer, starts a new series about typography. The first post is a gold mine, focusing on overshoots. Theory, clearly explained, with great examples. Can’t wait for more posts.

» Affinity Photo Beta

I have been experimenting with Affinity Designer, and it works great as a replacement for Adobe Illustrator, when it comes to illustration. For UI design not so much, but for that there is Sketch.

Affinity Photo goes directly where Photoshop for photograhy dominates. Again, not meant for UI work, but looks like a great competitor to Pixelmator.

» Silver, the Free Swift Implementation

Very interesting project. Swift as a language is very modern and quite fun. Swift as an implementation and compiler is just remarkable. I’m sure that re-implementing it – for Windows, .NET, Java and Android – is an incredible task.

Just as Apple’s Swift, this project is free, but not open source. I’m excited about the possibilities, but only real projects will show if it’s comparable to Apple’s implementation.

Sliding Screens Pattern

The difference between moving a mouse and touching a screen is direct manipulation and removal of abstraction. Removing indirections generally improves usability. Snapchat and Tinder have managed to remove an abstraction nobody noticed before — a tab bar — and replaced it with something direct. I call this a sliding screens pattern.

Snapchat and Tinder both are worthy of longer UX and UI analysis, but for now let’s focus on how they handle navigation between different sections of the app, how it’s different, and why it is a very successful approach.

Tab bar is an abstraction: you have to know, not experience or see, that different buttons lead to different sections. It’s fast, convenient, easy to learn - but nonetheless, it’s an abstraction. Sections, such as feed or profile, do not live inside these buttons, they live in the Land of Somewhere. Tapping a button replaces current screen with a screen from Somewhere. It’s an indirect manipulation - user cannot see where that section comes from. Replacing this pattern with something direct can lead to UX improvements.

Snapchat Map

Sliding screens pattern is about arranging those sections into a row of sliding pages. It allows to even have a “map” of the application: camera is next to snaps, stories are next to camera, and discover section is next to stories. Navigating the app becomes not a conceptional, abstract task of pressing tab bar buttons. Instead, navigating is physical and strongly spatial. User can know his place within the app, within a map.

Tinder Map

Tinder works very much in the same way, arranging sections next to each other. User’s profile, new cards, matches and moments. In case of Tinder, there are a couple of little details that make navigation very enjoyable. Navigation bar title is an icon, and icons beside it show nearby sections further explaining spatial arrangement. When you want to “Like” someone you have to swipe to the left - and to the left is where all your matches are listed. Sliding screens define the app as a series of spaces, and navigating means simply sliding left or right.

The sliding screens can go not only from side to side, but in some cases to other directions. When Snapchat introduced “Discover” a couple of weeks ago, they put this new section in the place of Contacts section. They didn’t hide Contacts under a button, creating an abstraction, a Somewhere place. Instead, they placed profile and contacts above the camera. So now camera can be swiped in 3 directions, and profile is sliding on top of camera. This way all the functions are still spatially arranged.

Likewise, when Tinder introduced Moments and camera, they put it under a button. However, pressing this button lifts the interface and reveals the camera underneath.

Sliding screens pattern is just one of many ways to implement app structure so that no screen would have to appear out of Somewhere. Mapping out app layout into spaces that are almost physically connected may help you design interfaces that are easy to understand and fun to use.