These are the tasks I am now working on:
0. Facebook UX teardown (already completed, so this is task 0).
1. Design teardowns for the Facebook Home Page, News Feed, Profile, About, and Photos Page. This includes sketches of the visual hierarchy for every page listed above.
2. Balsamiq Mockups for Facebook Home Page, News Feed, Profile, About, and Photos Page.
3. Upload # 2 and # 3 to Github
I'm looking forward to getting a lot of things done today, and these tasks are going to require a lot of focus to get completed and to stay organized. So, I'm going to start my Saturday off by drawing the visual hierarchy for each of the required pages by hand. Once that's done, I'll do the mockups for all five of the required pages on Balsamiq and save the files as pdf's (so that when I upload them to github, people without Balsamiq are capable of viewing them), and then, after that, I'll write up the design teardowns, organize all my work, including the Facebook UX teardown, which I've already completed, and load it all up to github, then send a pull request to the Viking Code School, and be done with the module.
Whew!
I've got quite a day ahead of, let's go! :)
O.k. I'm done sketching the Facebook pages, and now I'm working on the Balsamiq mockups, and guess what? There's a "site map" icon/feature in Balsamiq that lets you enter the information architecture via text and it will draw the information architecture boxes out for you. Man. That one would have come in useful in the last couple of days as I was hand-crafting information architecture for various sites.
The more you know.
O.k., back to the mockups.
I got up to half of the third one, so I'm halfway done. I was very detailed with my mockups, but Trautman did mention we don't have to be, so it's not required, but I just really enjoyed working with Balsamiq, and by actually doing the detail work, I learn more and more about how to use the tool because more situations come up and I then have to figure out ways to get the tool to do what I want it to do. It's an amazing tool. I'm more impressed by it every day. O.k., time to sleep.
SUMMARY OF CODING SKILLS
0. Facebook UX teardown (already completed, so this is task 0).
1. Design teardowns for the Facebook Home Page, News Feed, Profile, About, and Photos Page. This includes sketches of the visual hierarchy for every page listed above.
2. Balsamiq Mockups for Facebook Home Page, News Feed, Profile, About, and Photos Page.
3. Upload # 2 and # 3 to Github
I'm looking forward to getting a lot of things done today, and these tasks are going to require a lot of focus to get completed and to stay organized. So, I'm going to start my Saturday off by drawing the visual hierarchy for each of the required pages by hand. Once that's done, I'll do the mockups for all five of the required pages on Balsamiq and save the files as pdf's (so that when I upload them to github, people without Balsamiq are capable of viewing them), and then, after that, I'll write up the design teardowns, organize all my work, including the Facebook UX teardown, which I've already completed, and load it all up to github, then send a pull request to the Viking Code School, and be done with the module.
Whew!
Facebook UX Teardown
- Who is the main user of
Facebook?
Every literate man, woman, and child on earth with friends and acquaintances. The site is not designed to be optimal for loners.
- What are the top 3
critical goals for that user?
The first is to see what friends are up to in their personal lives, the second is to update friends on what the user is up to in their personal life, and the third is to consume/share miscellaneous media content, be it news, makeup tips, music videos, etc.
- What is the site's
approximate information architecture? (in general -- don't get
caught up in the details too much)
The user logs in via the landing page, then is taken to a feed which contains updates from friends as well as ads targeted at them and allows the user to create posts for friends to view. This feed is flanked to the side by many links to news, events, more ads, groups the user is a member of, and apps, for example. Above the feed, we have a navigation bar, which includes a search bar, a link to the user's personal page, a link to the home page, a link to find friends, and other links for various purposes such as to check on friend requests received and to adjust privacy settings. The information architecture for this web application is not a simple hierarchical chart, it's more like a never-ending series of spiderwebs connected to many other spiderwebs, with the login page at the center of each user's web.
- For your top user goal,
what is likely to make the user's experience particularly
satisfying?
Seeing the most important updates from friends on the home page.
- To accomplish this goal,
how does the user flow through the site's architecture? (ie. which
pages are visited and what are clicked?)
On the landing page, the user enters their userid and password and clicks on the Login link. That's it, one click, and the user is taken straight to the home page feed which provides content created or shared by the user's friends (as well as ads). The content is organized based on the relative importance to the user, determined by the user's actions on the site and the interactions thereof with Facebook's algorithms for determining the most desirable content for that user.
- What style(s) of
navigation is/are used? Do they answer the two key questions (Where
am I and how did I get here? Where should I go next and how do I get
there?)?
The primary links which serve to orient and guide the user through the site are in the horizontal navigation bar on top of every page. The Home link does not remain highlighted when the user is on the home page, and the same goes for the other links in the navigation bar, so no, the user does not know where they are, unless they are familiar with the site, and there is also no trail showing the user how they arrived at their current destination. Facebook does not really guide you as to where to go next or how to get there. In that sense, it is similar to an open world video game in that users are free to go anywhere they would like to go. It is very easy to become immersed in Facebook, bouncing from a friend's post, to a news article, to the profile of a person that commented on a post or article, to a profile of a friend of that person's, and so on and so forth. The loose, relatively unrestrictive information architecture of Facebook encourages the user to roam freely, consuming the limitless amount of user-generated/shared content, while simultaneously being served targeted ad content provided by Facebook's clients. If the information architecture was streamlined, the user would log on, retrieve the information the user needed, and then log off quickly. That expeditious use of the site would not be ideal for advertisers and would adversely affect ad revenue for Facebook, so the lack of clarity in regards to site navigation helps Facebook's business model.
- What does Facebook do
well to allow the user to accomplish the top goal effectively,
efficiently and with good satisfaction?
The home page feed gives the user the content the user desires to consume. It accomplishes this through the interaction of the user's actions on the site and Facebook's algorithms (and certain user-modifiable settings).
- What does Facebook do
poorly when allowing the user to accomplish the top goal
effectively, efficiently and with good satisfaction?
The ads. The ads are inserted into the user's feed and get in the way of the user viewing their friends' content. That said, the ads keep Facebook in operation, so people understand and are willing to continue using the product despite the distraction they create from the user's top goal of getting updates on their friends' personal lives. This cooperation by the user is aided by Facebook making the ads as unobtrusive as possible (designing them to have much the same look and feel as the rest of the site) and attempting to make the ads relevant to the user.
I've got quite a day ahead of, let's go! :)
O.k. I'm done sketching the Facebook pages, and now I'm working on the Balsamiq mockups, and guess what? There's a "site map" icon/feature in Balsamiq that lets you enter the information architecture via text and it will draw the information architecture boxes out for you. Man. That one would have come in useful in the last couple of days as I was hand-crafting information architecture for various sites.
The more you know.
O.k., back to the mockups.
I got up to half of the third one, so I'm halfway done. I was very detailed with my mockups, but Trautman did mention we don't have to be, so it's not required, but I just really enjoyed working with Balsamiq, and by actually doing the detail work, I learn more and more about how to use the tool because more situations come up and I then have to figure out ways to get the tool to do what I want it to do. It's an amazing tool. I'm more impressed by it every day. O.k., time to sleep.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
Javascript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 72)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 29% Complete
3. Ruby Programming 0% Complete
4. Ruby on Rails 0% Complete
5. HTML5 and CSS3 0% Complete
6. Javascript and JQuery 0% Complete
7. Getting Hired as a Web Developer 0% Complete
Hours Spent Coding Today: 6
Total Hours Coding: 484
No comments:
Post a Comment