Flip It and Reverse It

TL;DR - Reverse the feed - Load refreshed content differently.

Estimated read time: 5 mins.
Estimated time to understand this post: 10 mins.

Let me start off by saying, I use the words “Top, down, bottom, up, refresh, update” a lot here. It can get a bit confusing but I guess read slowly.

-

Recently, for one reason or another, my eyes have been hypersensitive to movement and light. I’ll assume it’s because I’ve been using f.lux for casual web-browsing and not the acute slant of my asian eyes. Basically, I’ve been noticing the way we browse our feed and how it doesn’t really make sense…Let me make my case with the Tumblr app.

We read text or view images from top to bottom, so consuming our feed is natural in the current state of things (the feed today is ordered in reverse chronology). But once we’ve exhausted the content of the feed, to refresh, we must (on the tumblr app and probably most apps) double tap the home button or scroll up to the top. Once there, we pull to refresh. Then we’re auto-scrolled to the absolute top of the screen where we see the most recent post. To continue browsing the newly refreshed contents, we go down again (like what we did in the beginning).

This set of actions can be broken down like this:

1. Go down to browse
2. Go up to refresh
3. Refresh
4. Update takes you to the absolute top
Repeat 1-4

-

Visually this is what your feed is doing. (Don’t worry it’s a little confusing to follow this GIF cause it’s slower than how we actually use it, but this is for real what we’re doing)

The problem here is that we often don’t notice, or we forgive too easily if we do notice, how many different eye and screen movement it takes to browse a feed. But this browsing habit can be simplified. A solution would be to reduce the movement to only one direction.

-

Which leads me to my first solution.

-

Solution A:
Solution A’s set of browsing actions is this:

1. Go down to browse
2. Go up to browse/refresh
3. Refresh
4. Load content but don’t push the user to the absolute top (Instead, crop the screen with newer content above the viewport)

Repeat 2-4 (You don’t need step one now because you don’t need to scroll down to browse content already seen)

-

In action, Solution A would look something like this:

By not allowing the app to auto-scroll you to the absolute top after a refresh it forces the user to manually scroll up themselves. By manually scrolling up to view unseen content, it encourages the user to browse the feed in one direction, in this case, up.

-

But Solution A isn’t exactly correct just yet. It has a huge usability problem. To my earlier point of how we read content (top - down). When we scroll up to see new content, each post is coming into view from the top (which means we’re seeing the bottom of each post first).

The flaw here is that we have to mentally log each post from the bottom-up • then • read • each individual post top-down. This would get old and annoying real quick.

Also we can remove step one of Solution A which is the first downward direction of browsing the initial content.

By the way, Solution A is what the Twitter App does.

But the key to a better solution can be found in this Missy Elliot song

-

Solution B:

All we have to do is flip it and reverse it.

The actual way to solve this is to order the feed in chronological order (newest at the bottom and oldest at the top). By ordering the feed this way, the user can scroll down to browse • and • scroll down further to refresh and browse again. In one direction.

-

The breakdown of Solution B is this:

1. Go down to browse / refresh
2. Refresh
Repeat 1-2

And this is what it looks like when you apply it:

IMHO: I think this makes the feed lighter, and I’m pretty sure this can be applied to most feeds. (Sup Twitter)

-

I know this sounds a little confusing but it’s really not.

The point of this is to simplify eye and screen movement when we’re browsing the feed. It’s a minute detail that can be arguably trivial. But, in my defense as a designer, these are the details we live for. And besides bro, we’ve had bigger discussions about more trivial design shit than just basic eye and screen movement.

Also… this idea can only work on mobile since the device is more forgiving of content orientation. Reversing the feed will probably fail on a tablet and definitely fail on the desktop due to it’s more traditional top-down orientation.

-

Also tumblr app, no hate over here, just sayin’

Dear Instagram

Estimated read time: 2 mins

(Full disclosure: I showed this post to a friend of mine and he quickly showed me Vsco Cam which does something similar…didn’t mean to do that)

Instagram, I love your product and I did expect a lot of UI growth from you with this new update and I was more than disappointed. I know your new push was to focus on the photo-taking experience, but the filter selection is a major aspect of that experience and it seems like you guys forgot it this time around. 

Your filter selection UI is incredibly annoying, I hate it. I also hate the names, what the hell is a “Walden”?

You’re probably referencing this:

But I wish you were referencing this: 

-

I see that you’ve made the filter icons bigger in this update so people can see the effects more but bro, what’s the difference between these two when you’re looking at it on the phone? The effects you’re portraying is way too subtle here.

The actual difference is pretty drastic.

And maybe the effect just depends on the individual picture and I get that. But the point is, your filter names and the effect icons doesn’t mean anything when it comes to the actual effect of the picture itself. 

-

The physical aspect of selecting the filters is sort of a pain here too. I don’t want to tap on each filter to browse through them. I mean I think it’s okay but there may be a better option:

Each filter is actually an individual element that is overlaid on top of the original image. 

This creates a physical reference to actual lenses being swapped in and out. The filter can be changed by swiping left and right instead of tapping on a particular icon. Besides everyone knows swiping feels better than tapping. 

-

Now when I’m in my filter selection flow, I generally go through each and every single filter (except the B&W cause everyone knows that’s for chumps) making a mental note of the filter I might want to come back to after I’ve explored all my filter options. But by the time I’ve gone through all my choices and want to test out the 2 or 3 filter options I’ve picked out, I’ve already forgotten the filter names.

“Shit was it Rise, or Hudson?” 

“Was it Nashville or Valencia?” 

I can never remember the names of them when I go back cause I don’t want to use that extra headspace. I’m lazy and I don’t want to think about your filter names when I’m already over exhausting my mental capacity to pick a filter for my photo. Now to solve this, you can just use numbers. You have 19 filters (including Normal). Now when I find a filter I like, instead of taking a mental note of “Earlybird” I can say ”10”. 

“Remember 4 and 10”

I think that’s a lot easier. 

-

So the flow here would be something like this: 

1. Take photo

2. Start swiping

3. Keep mental note of a filter’s number

4. Keep swiping until you finished browsing all filters

5. Use the bottom row for quick access to the filters

6. ???

7. Profit

Look, I don’t know what you guys are up to over there and for all I know you guys probably tried this and hated it.

And maybe there’s a reason for using filter names and icons, maybe it makes the person feel more artistic when they’re creating it. I don’t know. But I’m just saying, you guys can do something more amazing with the UI and I hope you do in the future. 

Love,

Allan

Pull To Create

Estimated read time: 4 mins

The act of creation and consumption have always been separated. You create content in one environment and you consume content in another, there’s no dialogue between the two. I understand there are certain limitations to this but I’m not talking about creating content in Photoshop or anything…I’m talking about User Generated Content on Twitter, Instagram, or Facebook. You know, these quick throwaway thoughts that we want to share with the world. And for the sake of argument and clarity, I’m going to use Instagram’s UI -to illustrate my point.

-

So…to close this gap between creation and consumption, we need to first make users feel like they’re closer to their community. As human beings, we have an innate need to communicate. From the primal need of survival to the higher desire to express feels. 

Humankind have invented tools for us to achieve that, from symbols to languages, telegrams to telephones, snail mail to email and texting to sexting. All of this is an attempt to make communication more efficient, to make it faster and to get us closer with each other.

–

Second, we need to make the act of creation more visceral. As humans, we’re soft-wired to be pathetic and empathetic, to “experience another’s plight as we are experiencing our own”. We even make technology more human, like artificial intelligence that mimic human qualities so we can relate to it more. This is all an attempt to reduce the UI and make technology disappear, so we can interact with it on a deeper level.

Now with that said, I think the following UI can get us closer to the devices and products we use. It isn’t even ground breaking, in fact it’s extremely simple. It’s so simple that I don’t know why no one has done it yet. So here it is.

-

-

Instead of pull to refresh, pull to create. 

Generally, when you create content, the create UI animates from somewhere and the content is posted at the top of your feed after a noticeable refresh. But that’s the separation! If your content is going to be at the top, why doesn’t the UI come from the top as well?

By pulling to create, you feel like you’re literally adding something on to the feed rather than having the feed refresh separately from you. This will make you feel like you’re directly contributing to your community. 

–

Next

Putting the creation and consumption UI on an equal plane as oppose to it sliding as a “card” from the bottom up (e.g. Twitter/Facebook/Foursquare etc.), or appearing as a new screen load (e.g. Instagram, Snapchat, iOS Camera etc.) also shortens the gap and enhances the dialogue of creation and consumption. 

–

Finally:

This animation here is pretty crucial and it emphasizes my earlier point of directly contributing to the community. The feed is loaded back into the content we just made rather than the entire feed being refreshed, like every app on this planet. Again, by constantly showing the user that their creation and their feed is directly related at all times, we can focus people’s attention on how it feels to create content. 

And maybe if we feel closer to the content we create, then we’d feel more responsible for it and stop creating stupid (late night drunk sub tweet) content. By the way, I am totally guilty of this. 

–

I know there are some issues with this UI so let me address some of them for you and please let me know of one’s I didn’t think of. 

Problems with it:

You can’t create unless you’re in the feed. 

Yeah, that’s true but as a user, we’re generally in two mental states. The state of creation and the state of consumption. We don’t look at our Instagram Explore page to feel inspired and then snap a photo, we look at the world around us and snap that shot. 

But also, it depends on what your priorities are. Do you want to contextualize the act of creation or do you want to make creation accessible at all times? I don’t think there’s a right/wrong answer here.

–

Where does the refresh go?

There are two solutions to this problem:

1.Take a page from Clear App where there are two pull down states, the first to refresh, and the second to create.

2. Put the refresh as a stand alone button, like the current Instagram UI. 

–

You have to go to the top of the feed in order to create, so if you’re all the way on the bottom it’s quite difficult. 

Yeah I know…But like I said, if you’re in the act of consumption, you’re rarely in the mood to create. And you can work around this by double tapping on the logo or the section you’re in to get back to the top of the feed if it’s really that big of a concern. 

–

What if people don’t know about this UI? 

Well, this is pretty easy, you can either put this in your walkthrough or…

The Timid Version, where you would use just a regular button on the top right like any other app but have the animation come from the top rather than from anywhere else. This still creates a similar effect but in my opinion, pretty boring. 

–

Anyways, this post and this UI might be stupid and there might be more flaws to this than what’s currently out there, but I know for a fact that this UI feels more lightweight and easy than any creation process on the market today. Nate Stedman and I have been playing around with this concept for a while and I want to take this opportunity to thank him for actualizing this idea (I love you booboo).

–

Soo yeah thanks for reading this, and look, I may be wrong and this might not be for you but what’s the point of innovation if we’re always trying to please the status quo?

In Response

Look, I never write. And I especially never write about design. Not only because I’m not a particularly good writer as you’ll see, but also cause there are too many other designers better than me and more respected than me who write better things than me. But through a gentle request via Twitter, I thought I’d give it a shot. Also cause I really like the article and I felt honored to be named amongst that group of designers.

-

In response to Allan Grinshtein’s post about flat design (founder of Layer Vault and the person who stole the twitter name I wanted, @Allan no underscore) here’s my two cents. 

-

So…skeuomorphism is just a technique that helps the user relate to an interface based on visual cues that have been previously seen. The reflective surface that makes a button look like a Jolly Rancher lets the user know that it can and should be touched/clicked. Because sometimes we see large colored buttons in real life that should also be touched…

Basically, skeuomorphism helps give the user a certain amount of comfort in relating themselves to the web. 

-

Now I think the use of skeuomorphism definitely helped bridge our connection between the tangible and the intangible. It’s been a huge catalyst in maturing our relationship with the web, however, when I look at that relationship now I find that the majority of people understand the web as the web. We no longer need that analogy to make it tangible. The web has earned its own sense of tangibility especially with the use of smartphones and tablets where we can literally hold the web in our hands. With that being said, skeuomorphism now has lost its purpose and seems more like a cheap trick that masks the true quality of an UI and I got some bones to pick with that 

-

We’re designing on glass. 

Remember in college where one of the first lessons they teach you is to understand your medium? Well our medium isn’t the “screen” its really…glass. 

And because we’re designing on glass, at least for me, designing a button that creates a sense of reflection and depth using reflective properties not only seem redundant since your glass is already reflective, but dishonest. In real life, when a button is pushed, you can feel its give and its bounce, but on a phone or on the screen, there is a lack of that physical feedback. A physicality that your mind knows exists but in skeuomorphic reality it doesn’t. So for me at least, it becomes one of those moments where reality doesn’t meet expectations and that disappoints me. 

-

Skeumorphism as UI

Skeumorphism is as much of an UI as the frosting is as a cupcake. Yes, the frosting is delicious, its the part that says “you should eat this”, but we all know it’s the cake part itself that’s doing all the grunt work. It’s the part that you hold, it’s the part that you actually eat, it’s the part that fills you, and it’s the part where you can slather that copious amount of frosting on. The cupcake is the UI, the frosting is just the bells and whistles, the pointless skeurmorphism that is slathered on top.  

Removing the frosting doesn’t remove the cupcake but removing the cupcake makes the frosting seem meaningless, indulgent and fleeting. So when I look at UIs now, I try to imagine how it looks without all the skeumorphic styles, without the frosting. Is the UI still good? Do I still want to click that button because the copy, the position, and the size, relative to it’s context is what makes it important? Or was the skeumorphic style used just to mask a poorly designed UI in the first place?

Also, skeumorphism doesn’t help the flow within a UI and we all know that the flow is what’s important. How quickly can we get a user to their destination without them thinking about it? And in that sense, skeumorphism is like that hot girl with no substance, or like that movie Drive. 

-

This doesn’t mean I’m not visually attracted to it, because it does look attractive. But that doesn’t mean it’s something that I would do. Skeuomorphism in UI design just isn’t my cup of tea, and I like my design like i like my women… 

-

Just kidding!