Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
Today we are continuing our new series of User Interface Design. With the vastly rising popularity of mobile apps and mobile web design User Interface Design is now a huge area for Designers to become proficient in. In this quick article we will be going over the UI Navigation for 4 different websites.
Each website will be detailed with a number and arrow which will be detailed below the image. Alright, let’s get started picking apart the navigation of our four chosen sites.
Apple
Apple is one of the highest visited sites and one of the most popular manufacturers of electronics. For a bunch of geniuses, however, their main user navigation is very nil. Apple has always been about being the best while keeping things on the minimalistic side and their website is no different.
1. The main navigation of Apple.com consists of one bar of navigation. No drop downs, just straight text with a slight gradient background and highlights. Their logo does not stand out and is actually placed within their navigation. The hover state of the navigation is a simple dark grey that will let you know where your mouse is and what piece of navigation that you are going to be clicking on.
2. The search bar for apple conforms to their simplicity. On a webkit browser the new search bar will actually expand when you click into it. For most browsers, however, you will just see it become white when active. The main thing that is wrong with the apple search bar is that you have to hit the “Enter” key in order to actually use the search. For many users this will not be a problem but there are people that will just sit their staring at the apple website trying to figure out how to use the search. In my opinion it is always better to include a search button because you never know who will be visiting your website.
Dribbble
Dribbble is a website that was created for designers of all types to showcase pieces of their work, completed and in progress. The community is an invite only community where each person is recruited by fellow designers in the community. Their navigation UI, however, is another story.
1. The active state for Dribbble’s navigation is actually pretty good, but it is pretty old as far as design aesthetics go. The rounded rectangle active state has been around for a long time, but for the overall feel of the navigation it works really well.
2. The remiander of Dribbble’s navigation is pretty simplistic as well. I really like the overall feel of the navigation though. The lighter blue-gray color fits well with the dark blue gray color of the navigation bar. The hover state for Dribbble is a nice light gray rounded rectangle as well, which again works very well.
3. The user menu for Dribbble is something that I have come to like very much. At first I absolutely hated the way they set up the user menu. I like to have my user menu somewhere that I can see without having to roll over something to get there. However, after time I realized that this was actually a very smart move when it comes to User Interface. By keep the user menu in drop down mode it means that less space has to be taken up by the menu, which in turn means more content being displayed.
4. I like Dribbbles search bar because it is plain view, but most of all it comes with a search button after the search bar. I know that I have personally gotten a few jobs from people searching Dribbble, which means that more than just designers use Dribbble every day. A lot of times design only communities will fall into the trap of trying to make the hippest, nicest thing out there, and it becomes hard to use for designers, which means that regular users would have a lot harder time.
MySpace
Once upon a time, in a galaxy not so far away, before Facebook, before Twitter, there was….MySpace.
MySpace quickly began to fall under the radar once Facebook came out and started gaining popularity. After letting Facebook have its run MySpace is finally trying to make a comeback. Even through the Facebook Reign MySpace remained a home for musicians and bands, but they are now trying to reign back the general user population with a new logo and design. Let’s take a look at their general navigation for the new design.
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.
1. The new logo has been the point of controversy for some time now. I am not going to get into the design aesthetics of the new logo. Instead I am pointing out the logo as being a general part of the navigation. You can click the logo to go back home at any time, but there is also a home button. This is something that MySpace did pretty well as most sites no longer worry about having a home button because their logo acts as a link back to the home page.
2. MySpace’s main navigation is a simple rounded rectangle that stretches across the body of the site. The navigation is a simple dark gray with separator lines. It seems that MySpace is now going for simplicity instead of the flashy and overpowering blue of before.
3. The reason that I pointed out number three is due to the redundancies in the design. If there was one thing that I don’t like about their new design it is the right side of the navigation. The redundancies in design are not that big of a deal, but why are they there? There is already a nice Sign Up / Login nav button next to their logo.
4. Number Four refers to the nice blue box next to the navigation that tells you there is two new pieces of navigation in the bar. Now, that’s all fine and dandy for the most part, but the new MySpace design has been up for some time now and the blue boxes are still there. It is a good idea, in theory, but people get tired of getting their attention drawn to something they have already seen over and over.
For MySpace I really wanted to review their primary, and very pretty, sign up/login form as well because there are several things that I really like about it.
1. MySpace has used more amount of space then necessary for their log in form but the results are for the better. Everything is lined up very nicely to the left, the input bars are nicely rounded, and the login button itself is a nice blue color that is very pleasing to look at. The biggest thing that I really like though is the alignment of the tags and the input menus. You don’t usually see the tags lined up above the input menus, but for this UI design it really works.
2. One thing that I don’t and do like about this section is the Sign Up area. I like how the area gives the benefits of why to sign up but at the same time I really don’t like the amount of attention drawn to it. If I already have an account I don’t want my eye drawn to sign up. The button design is really nice and the color works nicely with the design, but where did the green come from? Nothing in their design even has green, let alone that shade of green. It’s a nice touch but I think it is just a little too much and out of nowhere.
3. The Search Bar on this one is very simple and fits with the design. A lot of what I have to say about the search bar I have said about the menu; the colors, the simplicity, but I do have to say that I love the fact that they included a Search Button. That is one thing that MySpace has over Facebook, in my opinion.
Google
1. The subtle changes to Googles UI are definately nice to look at and a major improvement. If you thought that Apple was all about simplicity you have another thing coming with Google, most of the time. The new hover state is something that I can really appreciate. It is very subtle, at the top of your page, but it lets you know where you are at and with nice, pleasing colors. I have never thought I would get any inspiration from Google on UI or Design, but the new menu bar has proven me wrong.
2. I like how they refuse to clog up the top bar with everything that Google has to offer. The drop down menu is very simple, but jeez Google at least be gramatically correct and capitalize your “m” please. I would also like to be able to edit the options availble as far as what goes into the more section and what is viewable, but I am not sure if you can do that. As I haven’t really played around with the new UI I won’t count this against them, yet.
3. I actually don’t like the new user menu, but that is just because it is a drop down menu. As I said with Dribbble though that is mostly a personal preference. Design wise I think the text colors chosen for the entire menu are great and I love that they chose an icon for Settings instead of taking up more room with the word.
Conclusion
I hope that you enjoyed today’s article in our new UI Series. It was a pleasure for me to critique these designs and I would love to see what you have to say on these selected UI’s. You can head over to Facebook on our discussion board as well to talk about site UI’s you would like us to visit and critique.
Looking for More About the UI Series?
You can find more about our UI Series on our Facebook Discussion board. On the board you can request UI tutorials, articles, and even figure out how to submit your own site’s UI for review.
Your ads will be inserted here by
AdSense Now!.
Please go to the plugin admin page to paste your ad code.