UI Design Example: Screen Shot Utility Function of QQ

Tencent_QQ

For those of you who are not familiar with QQ. QQ is a Chinese mock up of ICQ, an online chatting software. It’s been in the market for more than a decade. A lot of people criticizing the company for not being innovative, but with tens of millions of active users, QQ’s first place position in social networking market in China is just unshakable.

Enough about the company and the software, let’f focus on our topic for this blog post the screen shot taking utility that’s offered in QQ. Taking screen shots has always been a pain for many us. As students, we are expected to make a tons of presentations, and write tons of papers. So we experience taking screen shots a lot. The most annoying part of taking screen shots is that most times there is an additional step of editing the screen shots between taking them and pasting them. By editing, I mean cropping the images to only included the intended content. I’m surprised that this is not a built-in feature for Windows PC. In windows PC, there is a screen shot key on every keyboard for taking screen shots. But however, by pressing the key, you are taking the entire screen. There is no options for taking a screen shot of a specific window or a certain area on the screen. For mac users, there is a hot key for taking the entire screen (command + shift + 3) and a a hot key for taking a square area of the screen ( command + shift + 4). Even though the features are their, it’s just impossible to crop the screen shot in pixel level to avoid the unwanted edges. And there is no option for directly pasting the screen shots to text processing softwares or documents on the internet. All screenshots are saved automatically on the desktop, which can be very annoying.

QQ’s screen shot taking interface has offered a perfect solution for solving this problem once and for all.

QQ20121209-5

The first noticeable difference of QQ’s screenshot taking utility and Mac’s built-in utility is that QQ shows a box of magnified view of the mouse location, and in the box there is a cross hair for accurate positioning. Therefore, with a little bit patience, it’s possible to get the screen shot right the first time without further editing it.

Screen Shot 2012-12-09 at 10.14.44 PM

The second important feature is that with QQ’s screenshot taking utility, taking screenshot of a window is super easy. You just need to move your mouse over the window that you want to take screenshot, and all the area outside that window will be darkened to indicate that you are only taking screenshot of the lighted area.

QQ20121209-6

The third important feature is that after you’ve done cropping the screenshot to the way you like, you can still have the option of adjusting it by moving the nodes before everything is final.  When you are adjusting the nodes the box of magnified area will show up again to make sure everything is absolutely perfect.

QQ20121209-1

And the buttons on the right gives you the option of adding colored boxes, circles, arrows, brush strokes, or text on the existing screenshot. And after you’ve accomplished all your goals, you have the option to cancel, save it to clipboard for directly pasting it to other files, or save it to file.

I think this is very good example of good user interface of solving a troublesome problem that’s been here since the dawn of GUI. I really wish this design can be system wise available for all PCs and Macs. Or it will be kind of silly just to open up your online chatting software for the sake of taking screenshots.

Dylan

UI Design Good Example: Smart Instrument for Garage Band on iOS

This time we’re gonna talk about another phenomenal Apple Product Garage Band. I had this app right after it came out and it absolutely blew my mind away, mostly because of the innovative user interface design of what they called Smart Instruments.

I know for a fact for a lot of people, being able to play an instrument has always been their dream since they were a child. To be able to play at a level that your music can be appreciated by others is not easy to achieve. It takes tons of practice. I remember when I was child, I played trumpet. And for the first few weeks, I couldn’t hit any note correctly so the sound coming out of my trumpet sounds more like animal roaring than any form of music. It took me years of practice to finally got to the point that people praise my performance not because they don’t want to hurt my feelings. However, most people don’t want to spend much time and effort to achieve that, and they typically don’t care about being able to play all kinds of music. Some people say that they will be pretty satisfied if they are able to play just one song. Because of this demand, many companies tried to use modern technology to simulate the experience of playing instrument. But there is balance of how realistic that experience is and how easy it is for people who are not familiar with the instrument. On one end we have Guitar Hero that you are just hitting the correct button at the correct timing. On the other end of the scale we have those piano simulators, that you have to play it like you play a real piano. I think the Smart Instrument in Garage Band for iPad falls right in the middle, and has achieved the perfect balance among all.

garage-band-grand-pianoLet first take a look at the Smart Piano. First of all, this interface shares many similarity to an actual piano with keys to generate sounds. But if you take a closer look the keys for Smart Piano are not for a single note but instead for chord. This can go back to my previous discussion about some people only wishes to play songs. In songs, piano are mostly for musical accompaniment not for melodies. So this design suffices for playing sounds. On the other hand there are less number of chords for songs than for notes. For popular music, generally speaking a song will only have 4 to 8 chords. So this design largely reduced the complexity of playing piano by reducing the number of keys to just 8. However, the user still has control over the combination of chords. So they still have the freedom to play any songs that they want. The other thing that hinders people’s ability to play piano is that even after you get the chords right, you still need rhythm. And here they offer 4 built-in ones that should cover most music genre, so the only thing that you need to worry about is changing chords as the song goes on.

garage-band-guitar-picker

We can see a similar design for Smart Guitar.

Overall I think Garage Band has done a phenomenal job of lowering the difficulty of playing instruments but still offers an infinite set of songs that you can play. I really enjoyed playing with it. I hope you like it as well.

Dylan

UI Design Bad Example: Sins of the New Youtube Layout

Just a few days ago, Youtube changed its layout. Many people’s reactions to are “What happened” “Why everything looks different?” “Where did the old video page go?”. I’ve had my experience with the new layout for a little bit. I think now it’s time to make my comments on why I think the new layout “sucks”.

First let’s exam why Youtube changed its layout in the first place. Youtube did this for making their sites more compatible across mobile platforms. Starting with the first generation iPhone, people are using their phone, and tablet more for browsing the internet.   This is because mobile devices are easy to carry around, and you can open and start using them instantly instead of having to go through the trouble of reaching your laptop from you bag and waiting for it to boost up. The problem with mobile devices is that they all have drastically different screen resolution and width to height ratio. Making a separate app for every platform is an insane amount of work. So Youtube decided to just change its home page layout and make it compatible for all platforms. This decision is made from an engineering perspective, meaning using new technology to technical problems, not from a usability perspective. This is often time where usability issues starting to arise.

The first and worst sins of Youtube is its white background. I think we can draw inspiration of this video talking about why using black text on white background for presentation is a “no”.

The video compares black text on white background for presentation to looking at a light bulb when it’s on. I’m gonna compare using a white background for a video streaming site to having all the lights on while playing movies in a movie theater. You have all the lights shooting at you with its full power, so it’s not relaxing at all. People get tired really easy.

The second sin of the new Youtube layout is the white space on the right of the screen. I criticized one of the presentation for UR4 for noting using the full screen. This is the same case here. It’s totally fine with me if Youtube wants to fit more stuff in the screen of mobile devices, but it’s not OK to let us PC users suffer from that. I think at least they should have the curtesy of making everything centered, and having two side bars on each side.

As for viewing videos, youtube decided to change it back to the way it was recently. So I’m not gonna further comment on that.

In the end, I wish when people integrate new technology to their product, they can think from the user’s perspective. It’s not always about staying on top of the newest technology. People love youtube for the content that’s on there, for the freedom to show off whatever they want, not for the technology. I sincerely hope that youtube can realize that. Otherwise, they may just drive people away to a different social platform.

Dylan

UI Design Example: iPhone Messages App

It may seem to you guys that I’m a huge Apple lover and Microsoft hater because of the comments I made on Windows 8. But I was just being honest with my opinions. Apple isn’t always perfect in the aspect of usability as I showed in the example of iTunes. Now it’s time to take a look at another revolutionary invention that Apple brought forth – iPhone Messages App.

more_messages_image_2x

The biggest innovation of this design is that it makes texting more “conversational”. Before we move on, I want to point out to you that this design is not that revolutionary or ground breaking as Apple boasted. This design mimics the design of early instant messaging softwares such as ICQ, MSN, etc. Instead of sending messages and replies back and forth, this design provides a context for users for what were they discussing earlier. This is useful because of the principle of “recognize instead of recall”. Users won’t lose track of what they were in the conversation anymore. This definitely works really well for online chatting, that’s why we see most social platform adopting this. But I can’t say for sure that this works also for texting. And here are my reasons.

First of all, texting is a much more expensive way of communication than sending instant messages online. So no matter what kinds of data plan (fixed number of text, unlimited text, charge per text) that you have for your phone, generally you would want to keep track of how many texts that you’ve send on a monthly basis. This is very different to emails or instant messages where you can send as many or as less as you want without worrying about anything. However, for texting, if you have a data plan for 600 text per month, and you normally don’t reach that number every month, you may want to look into your data plan to see if you can get less texts per month. On the other hand, if you always go above that number of 600, you may want to raise the number of texts for your data plan. Apple’s Messages App for iPhone is failing on this aspects. There is no easy way to count the number of texts in this App. Moreover, there are also messages with pictures, and also “free” messages sent through apple servers. There is really no easy way to have control over the money you spend on texting for users.

Second of all, the design of this App didn’t take mass text into consideration. There was one time, that I got a mass text from a friend, and my reply to this text ended up sending to everyone who received this mass text. I think the problem is that they messed up in chatting with multiple people feature. The app recognized this mass text as a conversation between multiple people. If it were conventional text application, there wouldn’t be such problem.

In the end, my opinion towards this design is neutral. I like the search feature clearly displayed on the top menu bar. I think Apple is being too aggressive and moving too fast with the changes in the cell phone industry. They are still fighting over matters of the sims card, GSM vs CDMA, etc. Cell phone carriers used to think they are sitting on a gold mine after they set up their signal towers. Now here is Apple jumping in telling them what to do. So they are resilient to these changes. I think for a change to be successful, we need everyone to stay on one page.

Dylan

UI Design Example: Study of Shower Knobs

In the spirit of taking usability analysis to everyday object. I’ve long decided to do a blog post on show knobs. The designs of shower knobs are very versatile. They have all different  shapes thus provide different affordances. But for the most of time, the affordances aren’t very clear. A shower knob can afford twisting, pushing, or pulling. Things become really confusing, when the design requires not only one but two or three of these action together to work. Just by the look of them, you can never tell how it works. This inconsistency across different design of shower knobs has resulted people forming multiple mental models in their head. They are forced to experiment with it, and figure out which mental model fits the product. Here are some examples of confusing examples of shower knobs.

This design is very common. The knob clearly indicates that you need to twist it. What’s problematic is the red and blue stickers. The picture shows one of many examples. The problem with this example is it implicates that you can’t adjust the temperature of the water , that you can either go “hot” or “cold”, where in reality you may be able to adjust the temperature by twisting it to different degrees. Another example is putting in a gradient red to blue semi-circle sticker, or two semi circles with the gradient of red on one side and blue on the other side, to the chrome plate behind the knob. The problem with this method is that, since there is no arrow pointing on the knob, you can never tell what level of temperature you are right now. The worst design of this kind is to add push pull feature to the knob, it’s complete madness. I won’t even go that far.

Another popular design of shower knob is this handle shape knob. The handle shape indicated you can pull it. And the handle pointing to the red and blue sticker on the chrome plate will also indicate the temperature of the water. However there is difference among designs on the limits of twisting. Some designs allow you to go from horizontal left to right, where neutral sits between. Some designs allow you go go from vertical down to up, or the other way around. This gets very confusing sometime, if you get used to one of these and expect all shower knobs to work that way. The worst case with this is that you can’t pull the handle, which is completely contrary to its affordance. The shower knob in my apartment right now is like this, so it took me a lot of time to get used to.

You may want to ask why I’m super interested in shower knobs. This is because people tend to feel insecure, and sometimes cold when they are naked in the shower. You just want that hot water to run down from the shower head as soon as possible. When that doesn’t happen because you can’t figure out how the knob works, it gets more annoying than something on your computer stops working.

UI Design Bad Example: Elevator in my building

There are people posting UI design issue of elevators. I’ve seen one UI design writing about a strange phenomena in a building that he visited, that when people see other people coming to the elevator, they would give them a friendly smile and close the door on them when they get there. He later discovered that people were really trying to press the button to hold the door, but because the locations of the close button and hold button were switched, they did the opposite.

This blog post focuses on the design issues of the elevator in my building, which may not be unique to others, but they are eating me from the inside if I don’t write about it.

Issue 1: Visibility of system status

The system status for elevator is intuitively simple. It should show on every floor that which floor it’s on right now, so people can make an estimation of the time they have to wait for the elevator. And this information is usually displayed on the top of the elevator door on each floor. However, here in this particular design it was replaced by a sign saying “Elevator B”. Not only does it not give you the information that you expect, the information that’s displayed prominently is completely useless.

Issue 2: “pressability” of the buttons

I was so confused when I saw this the first time. I had no idea what is pressable and what not. My first intuition was to press the black half of the button. It didn’t work. Then I tried the white key. It did the trick. But the problem was that it didn’t give me tactile feeling that the button goes down a little bit when I press it, however the button does light up after I press it. This is not a huge problem for me, but imagine if you were a blind person, how would you find out about where to press and whether have you pressed the correct button. This design flaw turns the effort to include the Braille illustration for floor number into waste.

There are many more things about is elevator that I really don’t like. But they don’t hurt the design as much as these two above. I’m just gonna leave a couple of pictures for you guys to make your own judgement.

Dylan

UI Design Good Example: Starcraft 2 UI design – Micro vs Macro

I just bought Starcraft II, and have been playing it for a while. Yes it does run on Mac!!! So it came to me that I should do a blog on it.

For those of you who are less familiar with Starcraft, or computer games, Starcraft II is a military science fiction real-time strategy game developed and released by Blizzard Entertainment for Microsoft Windows and Mac OS X. We all know strategy games. The most common example of strategy game in western culture is either Chess or Monopoly depending on your generation. Here we say Starcraft II is a real-time strategy game. This means that it’s not turn-based, so that you don’t have to wait for your opponent to make a move before you do anything. I would use the metaphor that Starcraft II is like Chess, but you’re allowed to move all pieces at any time you want. The goal in Starcraft II is simple – destroy all enemy units. And to achieve that goal, you need three things: collecting the resources to build your economy, developing new technology to gain an edge in combat, and produce as many troops as possible, as quickly as possible to crush the enemy forces.

In this blog post, I’m gonna talk about the interface design of Starcraft II in a PvP (Player versus Player) or PvA (Player versus A.I.) context and how it affects the gameplay of this game.

To win a game in Starcraft II, there are two sets of skills that are needed: Micro and Macro. Micro, or Micromanagement refers to any action that applies to an individual or small number of units. One example of Micro is Hit and Run, which means that if your units have the range advantage, you can kill all the enemy units without taking damage by dragging your units to keep a healthy distance between your units and enemy units. Macro, or Macro-management is on the other hand related to the large scale events, such as expanding your base, building your troops, developing new technology, etc. And the interface design of Starcraft II has made possible that the information needed for both are shown on the interface at the same time.

The picture above is a screen shot of Starcraft II. I’ve marked all the parts of the interface that are related to the gameplay with red square. Square a (Macro related) shows the amount of resources in numbers. Square b (Micro related) shows the ability the selected units have (move, stop, attack, patrol, etc). Square c (Micro related) shows the selected units, what they are, how many are they, etc. Square (Macro related) shows the control groups you have, most people use this feature to control their units in combat and produce units back in base at the same time. Square e (Macro related) is the mini map of the stage of combat showing both your units and enemy units that are visible to you.

From the design of this interface, we can actually see that the information related to Macro is designed to be glance really really quickly in a general sense, but the information for Micro is shown with excessive amount of details to the extent that not all of them are useful to you at the same time in a given situation. This emphasis on information related to micro is evidence that the game is micro focused, meaning that the game wants you to focus on most of your time and energy micro-manage the battle with the units you have to do most damage to your enemy and to preserve your troops as well instead of worrying too much about producing units, collecting resources back home. This pushes the players to engage the game in a fast moving and pressured set up, and let them fight each other till a complete destruction of one side or one side surrenders.

Why Blizzard does this to players, you ask? Are they promoting violence? This is because Blizzard games are built for competition. They intentionally complicates things, and forces you to practice in hope that you won’t be humiliated by your opponent or will be able to dominate your opponent. And therefore, players will spend more time on playing the game, and will grow loyal to the series and the brand.

Dylan

UI Design Good Example vs Bad Example: Course Website

Here I’m gonna compare two course website from two courses that I’ve taken.

Bad Example: CGT 511 offered by Purdue University Computer Graphics Technology Department

Problem 1: CGT home leads to a broken link

Problem 2: Project listed under Paper

Problem 3: Reading listed under resources

Problem 4: Assigned to and reading column is complete blank

Problem5: Deadline for assignment not clear from home page

Problem 6: click schedule go back to home page

Problem 7: no information about the instructor on home page

Problem 8: Top bar doesn’t link to home page

Problem 9: Text book picture not clickable

Problem 10: Font size way too small

Problem 11: Font size inconsistent in Syllabus

Problem 12: Lecture notes when opened by Safari on Macbook Pro with OS X is flipped to the side.

Problem 13: Lecture notes when opened by Safari on iPad with iOS 6 doesn’t allow scroll down.

Problem 14: Publishing lecture notes way early which leads to changing lecture notes after it’s published

Problem 14: No information about the TA found on the website

Problem 15: No section for announcement

Problem 16: the content isn’t centered

Problem 17: Top menu bar way too small for clicking

Problem 18: Inconsistency between project and homework, project links open up a new page, homework links open up a document

Problem 19: All projects listed under one page

Problem 20: doesn’t indicate which semester

Good Example: CS 61C offered by University of California Berkeley Electrical Engineer & Computer Science Department

Good design 1: Prominently display semester, location, and time of the course

Good design 2: Prominently display announcement and automatically take off old announcement

Good design 3: Show instructor and TA’s picture

Good design 4: Offer both pptx and pdf version of the lecture note (pptx is more convenient for taking notes and editing content

Good design 5: All assignments (projects and homework’s) are shown on the row of the due dates

Good design 6: Use different color to highlight holiday, midterm, final and review session.

Good design 7: Separate weekly schedule to show time and location for lecture, discussion, lab and office hour of both TAs and instructors.

Good design 8: Separate page for each assignment, lab and discussion

Dylan Liu

UI Design Bad Example: Syncing between iTunes and iOS devices

Hey, everyone! This time I’m taking on the crown Jewel of all softwares, the one that changed the world – iTunes. First of all, let’s be clear on how it changed the world. The significant change that was brought by iTunes is in the way that people buy music. It used to be people buying CDs or (before that) cassettes from the music store. Then there came the internet where everyone could share their music collection they bought with others without paying any fee to the publisher. Comparing to having to go through the trouble of going to the CD store and picking the right one from the shelf, downloading it online was much easier. So eventually, it came to the point that if one person bought the CD and shared it online, no others had to pay any more. And iTunes was made under such circumstance that user could have the ease of downloading music online, and at the same time the record company could get paid. iTunes did a phenomenal job on this matter.

However, in terms of usability iTunes has driven me crazy for many many times in the way that it handles data transfer between a mobile device for example an iPod and a computer. Apple intentionally uses the word “Syncing” instead of “Moving” or “Copying” to describe this process. Syncing implies that there are two copies of data, one of the computer and one on the mobile device, and after the completion the result would be the two share the same contents. Then here comes the question of which is the one to copy data from, and which is the one to copy data to. Back in the day that iPod didn’t have internet capabilities, computer would always be the one to copy data from and iPod will always be the one to copy data to. Then the problem arises – what if you have two computers, and each has a unique set of music collections, how can you copy both of them to your iPod. Well the answer is short that without additional help from other means of data transferring, you can’t. This is problem number one. And after Apple giving its iOS devices internet connection capabilities, iOS devices could download content on its own without computers. The design solution for syncing is that whichever has the most up to date data, it will be the one to copy from, and the other will be the one to copy data to. The problem with this is that the mobile device can have the latest version of apps, and the computer can have the music that the user want to add to their their device. The metaphor of syncing starts to fall apart as the case gets more and more complicated. This is problem number two. Problem number three is that as mobile devices gain internet capabilities, they can act as a stand alone device no need for computers. Rarely you would need to go to the computer to copy a file. And when you do, if you don’t change the default settings you will have to wait a long time for iTunes to back up data to your computer before you can copy that file. It has died on me for so many times during backing up data that I’ve already lost count. Personally, I think it makes no sense to copy data back to computers especially when the data isn’t not even readable on computers. If it’s for the security of the data, we always have the alternative to download the data from the source again instead of going to the computer for copies. Problem number four is that copying music, movies, books, etc (items that have licensing issues) from your mobile device to your computer is prohibited by Apple. Imagine that your computer was just re-installed that you lost all your music collection, but your iPod is still there. You would have to re-download the music through iTunes again instead of just syncing music back to your computer. For PC users, who re-install their operating system to eliminate computer virus periodically, this is a nightmare.

Why did apple make iTunes so hard to use in transferring data? Why do they still resist to change? As I talked about earlier, all these trouble is for the sake of preventing illegal copying of data so that record company can have their profit guaranteed.

Why people put up with this? My personal opinion is that Apple’s customers were drawn to the design of the iPod, which is arguably the best design there ever was, without even realizing that they had to deal with iTunes. I didn’t know this before I bought my first iPod. The people who could afford hundreds of dollars to buy a MP3 player are mostly the ones who have tons of money to burn. I remember some of my classmates bought a Mac and only bought music from iTunes to avoid the usability problems that I mentioned in previous paragraph. If this is not Apple, people would just stop buying the product. It’s sad how we let Apple bully us.

I’m not a die hard fan of Apple. But I’ve owned enough apple products to write this blog post. It’s just that the other companies are even more ridiculous and scary, I’d rather pay Apple and have some thing that “works”.

Dylan

UI Design Good Example 1: Terrifying Immersion of Dead Space

Background: Dead Space is a survival horror third-person shooter video game , developed by EA Redwood Shores, and released on October 2008. It’s available on PC, Playstation 3, and XBOX 360. The game tells the story of a space engineer Isaac Clarke, who battles “Necromorphs”, monsters created from corpses and an alien virus, aboard an interstellar mining ship, the USG ishimura. It has one sequel Dead Space 2, which was released on January 2011, and a midquel also called Dead Space on mobile devices. So to kick off our discussion of Dead Space, we need to first talk about the game genre. Let’s break down the key words. Third person shooter is a genre of games that emphasizes aiming and shooting in their game play. These games are distinguished from first person shooter games because of the design of the graphical perspective that is rendered from a fixed distance behind the player’s avatar, and slightly above them. Adding survival horror to that means that the game is not about players using their unmatched weaponry and skills to slaughter dumb AIs, but to survive or escape surprised attacks from enemies much superior than you. Here the hunter becomes the hunted. This genre is pretty well developed by genre defining games like Resident Evil 4. And the expectation for Dead Space was low before it came out. People said it would just be a space version of Resident Evil 4 because of the similarity in gameplay. However the developers’ serious effort in UI paid off, and made it better on the scary level than Resident Evil 4, and a huge a hit among daring players. How the UI design of Dead Space makes the game extra scarier? One short answer to that is that it helps players to be further immersed in the environment. Traditional shooting games largely use heads-up display (HUD, non-diegetic) to communicate with players about their current status. Players recognize many common features across different first person shooting games, such as heath / lives bar, energy / mana bar, time, weapons / ammunition, capabilities, menus, game progression, mini-map, reticle / cursor / crosshair, compass / quest arrow. However, if you take a look at the screenshot of Dead Space, all of these are no where to be found.
  Screenshot from Call of Duty: Black Ops 2

Screenshot from Dead Space

What would user’s reaction when they can’t find the information they need from this interface design? They would panic. This is bad if you are building a business application, or a website, but panic is just what horror games promote. The game deliberately place you in a situation that you are absolutely helpless, when monsters are approaching you. On the other hand this design is not just about making it difficult for players to get information thus causing them to panic.

Example of spatial interface in Dead Space: navigation system

Example of diegetic interface in Dead Space: aiming system

Example of spatial interface in Dead Space: communication system

We can also see from the pictures above that Dead Space has completely discarded Non-diegetic and meta interface out of the four kinds of user interfaces in games (see my shared post about user interface in video games). This design decision was made because these two interfaces both don’t fit into the game geometry, thus cost the feeling of immersion to diminish. On the other hand, having those two types of interfaces in the game would give the players a sense of comfort and safety, because they convey the message that “This is game. It’s not real.” to the players’ subconsciousness. By taking them away, the sense of comfort and safety will disappear, therefore making the players vulnerable in the virtual environment.

In conclusion, by intentionally breaking the all the rules of user interface design that help players get information and feel comfortable, the game Dead Space becomes extra scarier than all its competitors by large. It’s just like horror movies using dissonances to create a sense of tension and alert, but this time it’s through visual signal instead.

Dylan Liu