This weekend I decide to take a shot at redesigning Facebook's Newsfeed .. Wouldn't it be nice to have a cleaner more unable interface. Don't get me wrong but I do respect the designers at Facebook. It's hard to design for 1.9 billion people. Below is a link to what I thought might be new features / look to the site's feed. Feel free to let me know your thoughts on what you wish Facebook designers would incorporate into the site.
Oh, this is gonna be good.
Hi Tyler, since you've asked for them, here are my thoughts.
I think that it's a nice experiment for dribbble, but the change is not really meaningful.. You made the current fb design cleaner, but less usable (navigation? chats? groups?) You didn't find something in the current FB design that is broken, and offered a way to improve it. If any, you've only added some more usability problems.
Good luck! :)
Hey Ariel, Thank you for your feedback. I know your wondering like everyone else, where is the chats, groups? My solution to that was incorporating Facebook's AI "M". For example dictation "Show me the current groups I'm in" , "M" would then populate the newsfeed and status bar with all the groups your in. My next follow up to this design will probably have a visual animation for better understanding :)
How would you make they intuitive for those 1:9 billion people you mentioned? And what's the benefit here? Less clutter? Similar to the burger menu, you'd probably find that this design would reduce usage of groups and anything else dependant on that side nav.
Don't you think it adds a lost of steps to what we can currently access by a single click? And if I get your point you mean using voice-control to get the content you want, without saying that voice-control is far from being accepted, and probably won't ever be for that type of use, it makes it very complicated to use at work for example? or almost anywhere actually no?
You do know that Facebook's M is completely text based, right?
Yes for now it is , but who knows Facebook could be working on adding dictation.. Either way speech turns into text from there its recognized.
Props for making a realistic and viable Facebook redesign with ads and a sane layout instead of ones with huge stock photos (as if no one posts memes), ridiculous square grid layouts, etc. It's very thoughtful.
I do feel that the dark blue elements on the navbar need a little bit more contrast. I have some old laptops where those two blues would have looked identical.
It does look absolutely amazing though.
Thanks Lauren! I will take your feedback into consideration :)
How do you justify you design decision ? Why having this log-out button on the top right corner, is it really something we need to access directly? Does this trending card really makes sense? The search doesn't works to me. But most importantly, where is the navigation, how do I access the events, the groups, the chat... Seems like a flat version of Facebook without all the important features to me
Agreed, some justification would make sense. It looks good but I can't understand why the design is the way it is just by looking at it.
Hey just wanted to provide some justification to my design. The reason I took out groups and events is because , to the left Facebook's AI "M" would be able to show you them if you request. I thought it would great to incorporate Facbook's AI to the site, allow it to populate all that information in the Newsfeed / Status update section. As for the log out button, I thought some people would want to be able to log out since its hidden.
Type is way too small.
my dad would have trouble reading this :/
I like it a lot more than the original shot it was rebounded from. Awesome job! The "While you were away" card is my fav, would love to see how you'd implement it.
Thank you very much :) Im currently working an animation for "While you were away" card to demonstrate it's functionality.
It's hard to design for 1.9 billion people.
You said it!
This is very pretty, but as a piece of design, it doesn't reflect the realities Facebook faces.
Facebook is certainly not short of talented designers – and if they wanted to improve things purely on an aesthetic level they'd have plenty of volunteers! However their technical design work is hugely informed by UX*, testing and data (both site usage and demographics).
For example: things like the decision not to use webfonts and the size of the news feed were heavily influenced by the developing market I believe. As a truly global site, they've got to be really careful not to design Facebook for other designers with 27" iMacs ;)
* And I mean real, evidence-based UX with plenty supporting technical documentation – not just what we think works best!
Very nice looks but reminds of the new G+ interface.
Although this looks very nice, I'm not drawn to the news feed automatically, which I feel should be the most important part of the page. Each "box" as such is the exact same in terms of background colour, border and shadow - this takes anyway any sense of hierarchy
Hey, Tyler! What's the typeface you're using on this?
Hey David, I used San Francisco typeface
You know that its only the Mac Systemfont? So it's never gonna happen that Facebook use it on the Browser.
font-family: -apple-system, “.SFNSText-Regular”;
The letter-spacing ends up all wonky in Chrome with .SFNSText.
You know that Medium uses San Francisco for Mac users right?
While I agree with most thoughts here on usability, functionality, etc. I do want to give you props for taking a chance on posting this at all. Like you, I would love to see voice dictation become more prevalent across mobile and web experiences. Keep at it, man.
This is fantastic! I would echo others' comments that accessing further features like Groups may need another route other than just M, though I think having M as the primary way of doing so is awesome...it is 2015 after all. Perhaps adding the ole' hamburger menu to the left of the Facebook logo in the top left would address this without taking away the clean look here.
Though FB obviously does tons of testing, it is telling that among the major web properties they look so dated, busy and cluttered. I'm not sure why the developing world needs to have a dated user interface; I think that's a touch presumptive on those of us in the developed world. If anything, I feel like a new/less tech-savvy user would appreciate this clean look far more. Great stuff!
The design looks clean and easy to go browse through with categorised cards. But I have some doubts like,
- How will user navigate through groups? Through search?
- View list of online friends
- The top right icon seems to be of "sign out". How will user access Accounts & other settings?
- Currently, Clicking on your profile tab at top right takes you to profile page and clicking fb logo on the left to home. I'm confused with new layout of: Profile picture, name and home icon
- I think the top right icon in messages card is for groups rather than friends.
This looks nice but feels more like a reskin than a redesign. All the visual tweaks are nice and subtle. I'd like to see more thinking put into the actual experience.
Your right Casey. My approach to the design was to not drastically change the experience (redesign) but to added new features and tweaks that feel familiar but not foreign.
Following is my review of your shot of redesigning Facebook's Newsfeed. Though it is good, I am writing down most of the thoughts which came to my mind. The motive is NOT to demoralise you or your efforts.
Redesign in what sense?
To be honest, in my opinion, it should not be called a redesign. It is basically adoption of the current design modifying few things around to make it look clean but not as much usable as the current one.
What has been changed -
- contrast between elements
What has not been changed -
- overall colours
- layout (3 column)
- More spaced-out elements
- Absence of navigation from left area.
- Are you envisioning Facebook as a digital assistant like Apple Siri or Microsoft Cortana since you have prioritised the same and put it on the left top area. Even though, what actions do you think this digital assistant can perform to help the user?
- Trending do not have any categorisation. Moreover, the user can not see more than three.
- It feels like that the user can not change the visibility of his/her post (while composing) to either Public or any other since it is missing the highlight or the clue which we call 'affordance'.
- No clarity on clickable elements and their style, e.g., Update Status is highlighted as blue colour while the rest (Add Photos/Videos and Create Photo Album) are washed out, however, their icons are not. On the other hand, the time stamp and location under the person name on the post itself are also blue. The title Incoming Events in blue, the events are blue while the 'Create New Event' is washed out. So, which one is more important and which one is clickable? Further, 'More Info' in the Sponsored Ad section is black with an underline.
- No settings option, straightforward logout/exit icon.
- Spacing seems odd for profile picture, name and home icon. No separator (or negative space) there.
- I am confused about 'While you were away' section. Is this a chat or feed like Twitter for a person to catch up while he/she was away. Further, as soon user clicks 'reply' the text box would appear which gives him/her the opportunity to type and send the message to selected friend. Also, the person would have to scroll though such a small area to see earlier messages.
- Different types of symbol and colours have been used to represent the user/person as active. At some places, it is green and others it usual blue with lightning bolt.
- You have removed the icons from like, comment and share.
I wish you good luck for future improvements :)
Thank you for your advice, I look forward to using this insight to publish a better more understandable usable design
As daunting of a task it is to try what you are trying to do, I have to encourage you and others to do the same. Taking larger design challenges will introduce you to many small design challenges. Challenges you have not the experience of knowing, and that is fine. Just continue to to solve them as they appear. As long as you do it to crave the knowledge of a better user experience.
My two cents: Most the world will choose time over UI beauty, optimized UI's allow people in 2g countries browse facebook faster. And that's a larger demographic than what your design compensates for. It's this kind of thinking that will make a successful design for both businesses and users.
Often, Web design is not a great place for beauty to exist. Consumers pass through our website designs like a well tailored commercial. No one wants the commercial. They want the product it sells. Or in facebooks case, a window on a wall to other peoples lives, and let others see their life; few care how the window looks as long is it's not obstructing the view.
Our websites are forgotten as soon as users reach their goal. But if our designs are good enough, users come back because our website was less work than the competition.
This is just one side of the die. There are many way's to look at web design and what it can do for us. But eh, the more you know...
Thanks for sharing your post Tyler,
I would have rather seen you taking a current ux problem with the facebook feed and designing a (new) solution. This is more a visual tweak, altough it is very nice; so, props to you!
Thank you :) I tried to incorporate Facebook's AI "M" to solve the problem with the feed, but I should have shown a visual animation on how that would work. Pretty much the top left you would active "M" and ask what relevant content you wish to see, and the News feed and status update bar would change with the newly populated requested content.