App #13, Foldable Display

In spite of Samsung releasing, yesterday, the worlds first Foldable Phone to hit the smart phone market.

Android announced support for foldable displays yesterday over Twitter and even included a cute GIF to show the foldable interaction for a video app, possibly Youtube.

Here’s the gif:

Android-Foldables.gif

Android VP of Engineering Dave Burke said, that a big part of making foldable devices work is something called screen continuity. For example if you're using an app in folded mode and want to switch to unfolded, specific software is needed to make that transition seamless.

Today, I want to learn more about screen continuity, current user interfaces, and re-design current popular apps with foldability. (Also I need to practice drawing basic objects - to help polish my wireframes)


This is my first time designing for a non-apple device – and I’m not happy about it.

Just watched yesterday’s Samsung Keynote. The good –Samsung expanded the possibility of the phones display offering new opportunities for designers and developers to further explore what they can do with their products. However, the usability of the phone is questionable and although it’s cool, do people actually need it? Or is it just another Samsung gimmick?

The presentation was awful, speakers stuttered and sounded insincere. The apps didn’t animate rather static screens played varying between each other through opacity transitions. Samsung also introduced another brand new User Interface called ONE UI, which focused on assuming the placement of a users finger and with that in mind placing the elements in areas that are easy to touch. As they mentioned in the presentation, they are trying to better intertwine their hardware+software, but it’s clear that previous iterations of UI is making their judgment cloudy, also they are running Android, so aside from Samsung’s native apps, they still have limited control on the entire scope. However, on the bright note, Google is working on recreating android specifically for the foldable device, so the interactions will be left to the professionals.

The more I think about this presentation, the more I realize how confused Samsung is – I predict that the phone will not impact the industry much – however I am interested in designing for it as a challenge.


Schedule for today

  1. Research other types of foldable display (nintendo 3ds) and explore how they leveraged the layout – better understand the purpose of continuity and examples

  2. Discover and Find inspiration in foldable user-experience examples

  3. Choose what apps or screens to redesign in the foldable layout

  4. Design the physical foldable device - and animate it through sketch (need to understand how it flips)

  5. Design

  6. Upload

  7. Animate

  8. Upload

Screen Shot 2018-11-08 at 11.32.17 AM.png

Here’s my first go ahead, it’s a bit messy, but I wanted to share it before scrapping. Screen 1, is the regular user interface, which mimics Apple Music’s typical homepage. In order to introduce continuity, when the unfolds, the list items, shift from folders to radio-buttons. When a list item is clicked - instead of navigating the user to another page, the elements of the list are showcased on the right. I don’t like how when the user selects albums, they still see the entire menu, on the left it is a waste of space. Excuse me as I type out my thoughts..Since the user didn’t click any buttons before entering ‘continuity’ what should be displayed? Recently Added can be displayed - because it is visual and it takes the user farther along the journey – but if recently added is placed on the second page - what can fill up that space? I think recently added should stretch across the bottom of the page - perhaps the list items can stem across the top – it would be nice if no elements were added rather - the current elements shifted.

Granted, there is a lot going on here.

  1. I shifted library list items - to a search bar with recent searches and trending

  2. I extended ‘Recently Added’ to stretch across the bottom of the screen in a carousel layout

  3. I extended the play bar and offer volume control on the left

  4. On the top right - I added a for you section to continue browsing.

The music app has a lot of elements, I’m curious to try out another one - Instagram.

I tried shifting away from sketch and leveraging screenshots to manipulate in photoshop, but doing this loses the feel of the foldable display – so I need to continue working in vector format – I’m not sure why I feel so uneasy about this post, perhaps it’s because it’s hard to visualize the foldable layout without seeing it in action. But truth is, I have no idea how google made that initial animation … 

For the next phase of the project, I think I’m going to copy google and wireframe elements from an app of my choice – and work on that animation. But how to animate in 3d? Ahh

Google’s didn’t add any elements (except for adding video thumbnails) while shifting forms, rather the same elements were resized and placed in different spots.

Is designing in continuity the same as shifting landscape to portrait mode?

I also believe that Google choose to design the interface for the Video App to not give away much information of their process b/c the video app is the easiest route, since the content is not shifting

I haven’t found any good examples of continuity.

Ok, it’s not that Google choose the easiest element, it’s that they choose the right element. Right now, I need to be cautious about which screen I choose to design. Google decided not to use the YouTube home screen because there is too much going on, instead they designed the ‘video specific’ page.

I came to this conclusion while working on wireframes for a sample shopping app - that I was going to showcase with continuity – but I was working on the shopping app homepage. I realized - I need to focus on a specific product. OK, I’m finally getting somewhere – 

Progress shot, designing wireframe for shopping app (with continuity) Basing the wireframe design off of Googles - I like wire framing like this, it helps you really understand space between elements.

Progress shot, designing wireframe for shopping app (with continuity) Basing the wireframe design off of Googles - I like wire framing like this, it helps you really understand space between elements.

Bad post today, but I’m shot. Going to do some photography to get my mind off of the project.

Until tomorrow,

Clay White.png

App #14, Tippr.me

App #12, FallBoard