Navigation and Selection among Multiple Factors

I’m looking for a new pair of glasses because my eye sight is sadly going downhill again. I stare at the computer screen for too long and work too hard ūüôā ūüė¶ So I launched, and¬†selected the first one among “shop complete glasses”, “shop frame only” and “shop lenses only”. Here came a page with a super long list of factors to select. The following (Pic. 1) is a zoom-out version of the page clearly indicating how long the list is, with all the whitespace on the right. What’s worse, all the factors are listed on the left as a single click, and the user cannot choose multiple factors. It’s not dynamic, just as indicated in the second screen shot (Pic. 2). All the choices are in a plain list. All the numbers are listed, this is why it’s taking so much space. The number should be designed as a bounded input field with up-and-down arrows. ¬†Moreover,¬†parallel¬†with “shape”,”rim”,”material”, “gender”, “brand”, “price”, “color”, “eye size”, “country of origin”, etc, there is one labelled “category”. “Category” is too much of a generic word. All the previous can be categories. This doesn’t indicate clear¬†hierarchy¬† It should be renamed more specifically as “glass type” or something in a more specific nature.

Pic. 1

Pic. 2

Pic. 3

This website does have an advanced search function, but it also has problems. It has two separated parts which serve the same purpose. They explain “B Measurement” in the individual glass frame page, but not here in the search. This is very inconvenient for the users, since they would most likely land on this search page first, and then the individual glass frame page. Also, after I configured the advanced search, it took me to the results, I couldn’t further filter the results using the tool bar on the left. I had to go through the long result list one by one. When I went back to Advanced Search, all my previous configurations were gone, and I had to re-do it again.

Pic. 4

I think it is the bread-and-butter for online shopping websites to have good navigation features to allow users to find the products they like. The shopping site can be failing if the users cannot easily locate and browse what they want. Intelligent recommender system can also further help the users to get to the products they like. Amazon and eBay are doing a much better job in this regard. Admittedly, they are bigger and richer companies, but every big and rich company started from somewhere.


MacBook Power Adapter Design Problems

I’m sure there are people who have criticized the power adapter for the MacBook, but this time it happened in my life. I’ve had problems with the MacBook power adapter before. It sometimes lost connections. But I never thought to criticize it. I was just thinking maybe the power outlets have some problems. The CGT512 course did change the thinking habits of many of us. I start to be more aware of things around, and start to have interesting and constructive conversations with people around about various design issues. Before the critiques, I’d like to say that I really like the MagSafe¬†magnetic head connector on the power adapter.¬†Apple did put a lot of thoughts into this. Another thing I like about the power adapter (including the iPhone/iPad power adapters) is that, unlike typical US electric plugs (for the two-prong type, one is smaller and the other one is bigger), the Apple power adapter has two equal sized prongs, so I can use this power adapter in China too, without any kind of¬†conversion.¬†But… here comes the critiques:

1. It takes too much space on the power outlets. 

Our CGT512 Usability Report 3 team had a meeting on a Thursday. We had the meeting in a lab, and many of us need power outlets. But the other team members have to move two other power plugs to make room for my adapter. The “huge” square takes too much space, and cannot rotate directions.

2.The wire connecting to the huge square is too thin, and would eventually be broken.

Besides taking too much space, one team member Nick criticized the thin wire. He said it would eventually be broken. And then I started to notice that part was actually getting yellow and looked aged. Then, about 5 days later, it is really broken, and stopped charging.

Then I started a conversation with a colleague who also use a MacBook, and we found other design issues with the power adapter.

3. The square is too huge and heavy, and the two short plug prongs cannot hold the weight, so it sometimes get skewed and loose, and lost the connections.

4. The adapter has a long extension wire, without the extension wire, it is short. If you forget the extension wire, sometimes you cannot reach the power outlet.

5. In order to use the extension wire. You need to take off the small cap with the two prongs and connect the extension wire, and then the small cap will get lost easily.

I think it’s interesting to be aware of these design issues in life and start interesting conversations with people around. But don’t become too much of a design-issue-picky-nerd ūüôā This is the reality, there is always room to improve!

MyPurdue “Look Up Classes” Usability Inspection

The web interface of myPurdue has lots of problems, but the one bothers me the most is the course navigation, since I use it quite often to look for courses. When I log in to myPurdue, and click the “Academic” tab, and then click the “Look Up Classes” at the navigation bar on the left, the interface of Pic. 1 shows up. The issue on this page is that the “Reset” button is completely useless, since I can just switch among different terms using the drop-down menu or choose “none” to reset, though I don’t think anybody looking for courses would choose “none”. This is okay, since I do not use it, it doesn’t bother me much.


Then I choose the term, and click “Submit”. Pic. 2 is what shows next. The two buttons at the bottom are confusing, since we usually see “Search” and “Advanced Search” elsewhere on the web, rather than “Course Search” and “Advanced Search”. Based on the instruction on top, “Course Search” is to search by subject, while “Advanced Search” is to search by section. Here, the order of concepts is that each “subject” contains a series of “sections”, while each “section” contains many individual courses. When you click “Course Search”, it goes to the sections under the subject you choose. When you click “Advanced Search”, it would go to the list of individual courses after your specification.¬†So “subject” means “major” here, which is really confusing for me. I thought subject means an individual course! ¬†Put all these aside, the subject list on this page actually only applies to “Course Search”, not to “Advanced Search”. The two buttons on the bottom are a bit far away from the subject list window, so my laptop screen usually cannot display all them at once. So I would only see the subject list window at the beginning, then I would start to choose the subject. The list of subjects is kind of long. After I spend a long time scrolling down and choose the subject, and then realize I can click “Advanced Search”. After I click “Advanced Search”, a new interface shows up, my choice of subject is gone, it asks me to choose from the subjects again! Maybe myPurdue should move the two buttons to the top of the subject list window and also make other¬†accommodations¬†to make all such buttons consistent.

Pic. 2

If I click “Course Search” button, it will take me to a series of sections shown in Pic. 3. Here, I don’t have a button to go back and start a new search like the one in Pic. 4. I have to choose a section to view, unless I go back to the Academic tab.

Pic. 3

Pic. 4

Pic. 5 is what it shows when I go to “Advanced Search”. The instructor list here is really really long, and I never have the patience to use it. If I have a specific professor name I would like to search for, the system should just let me input the name to search. For now, I’d rather go to the entire course list, and use Ctrl+F or Command+F (on Mac) to search for the professor’s name in the broswer, which is much faster than this humongous name list.

Pic. 5

Crop vs. Mask

As much as I like the iWork on the Mac especially Keynote compared with Powerpoint and Word in MS Office. I still have not got used to the “mask” function. “Mask” basically does the same thing as “Crop” in MS Office, but it provides more flexibility: both the mask window and the picture can be moved and ¬†adjusted in size. However, I do not feel this flexibility adds to any essential value. It still does the same thing as “crop”, and nothing more (at least in my 1 year and 4 months usage experience with Keynote, I have not needed to use anything more out of “mask” than just “crop”). It only adds to the hecticness of the users: sometimes I want to move the whole picture including the mask, but it turns out I only moved the under layer picture, or I want to adjust the mask but instead adjusted the picture. I have to spend effort to think whether I am adjusting or moving the picture, the mask or the entire thing. I am not very sure what kind of perceptual, cognitive, or psychological principles exactly apply here, or is it just me? At least, too much¬†flexibility¬†do not really add to the pleasantness of the usage experiences. I feel “mask” and “crop” are two different¬†metaphors¬†for the same thing, one is to cover the part you do not want, the other is to cut the part you do not want, and cutting maybe more direct than covering.

Moreover, I vaguely remember a previous version of MS Office had functions to do round-edged or circle cropping, but I cannot find this function anymore, or maybe it is just hidden somewhere. I find that very useful when you try to design a good-looking slides with round-edged pictures, but I don’t know why they decided to take this function down or hide it.

How do you feel about “mask” and “crop”? Which¬†metaphor¬†do you prefer?




How to Design Good Buttons?

Buttons are naturally to be pushed or pressed, but when the device gets more and more functions, the control using buttons get more and more complicated too. It is easy for the design to convey the press-ability of a button, but how to intuitively tell the users that they can double press or long hold the buttons to perform more functions without consulting the manual? In The Design of Everyday Things, Don Norman tells a story about a projector. Short press a button on the projector can forward slides, while longer press the same button would backward the slides. But this function is so invisible that nobody would easily figure out without reading the manual or consulting the technician. I encountered similar problems with buttons.

I love my car, but I had some problems¬†figuring¬†out all the buttons. I like to listen to the radio while driving. I’d like to store a couple of radio stations that I frequently listen to, so I will be able to quickly switch among them while driving. I browsed through the menu, and only found the “autostore” function, in which it will automatically scan and store the six strongest radio stations. But these six stations may not be my favoriate and may not be in my preferred order. So how can I¬†manually¬†store the stations I like? I couldn’t figure it out without the manual, so I gave up for a while, but this problem kept bothering me every time I drive! So I checked the manual. After a long while, I found the instruction to manually store stations buried in long text under the title “Autostore” indicated in the photo below.

I thus realized that when I press the “Radio” button, the radio bands will switch among AM, FM1, and FM2. Only under FM2, I can then long press the number buttons on the right to manually store radio stations. I was also wondering what is the difference between FM1 and FM2 for the long time before, so this is why! I am the kind of person who would dissect a bad-designed manual to find the solution if I’m in the mood, but not everybody would do so. It would be dangerous trying to find the right station while driving without pre-storing them! Who would figure out the difference between FM1 and FM2 without the manual? Who would figure out they have to long press the buttons under certain mode to store the radio stations without reading the manual?

I also found other bad design aspects of these buttons. The “info” button takes too much space and is not really useful. Most of the radio stations do not have text information. Maybe CDs do. But who would really need to read these information while driving? And the typefaces of these texts are not really the easily readable types. Moreover, I burn my own CDs with my favorite music which I do not need to read the information about while driving. The six numbered buttons are also kind of a waste, because they are only related to stored radio stations. They can be designed in a more condensed fashion and store way more than just six stations. I thought my car has six CD cases or something at the beginning because of these six numbered buttons!

Our stove-top fan in the kitchen also has button problems. In the photo below, the left most button controls the light. Each time you press this button, the light switch among off–>on (bright)–>on (dim)–>off. In my opinion, the order between bright and dim should be altered. The default ON mode should be dim in order to save energy. Then if people feel it’s too dim, they can press again to get to bright. For what it has now, people would keep using the bright, and realize they can turn it dim when they finish cooking. At that time, they’ve already finished cooking, and they have to press twice to turn the light off.

All the other five buttons are for controlling the fan. First of all, since the light-control button has nothing to do with the other five buttons, it’s probably be better to put more space between this button and all the other buttons. ¬†Second, I do not believe a stove-top fan needs this many (four) different speeds. A weak and a strong would probably be enough, at most three different speeds, four would be unnecessary. Usually people wouldn’t try to adjust among all these different strengths. Third, the symbol for the weakest strength of the fan is “Q”, which is inconsistent with other strengths indicated by the lengths of the vertical bars. According to the person who installed the fan, “Q” means quiet fan. After I got to know this, it starts to make sense to me, since the weakest mode is quiet, but this “Q” symbol didn’t make any sense to me before he told me this. I was just feeling it was so inconsistent and odd compared with the other vertical bars. Fourth, the logic of using all these buttons is so complicated. It started to make sense after I purposefully learned it, but before, I just feel it is complicated logic. In order to use the fan, one has to press the right most button first, then all the four lights above the four different speeds buttons will start to flash. Then you can press any of the fan buttons to turn the corresponding speed on. If you mistakenly pressed the right most button, and you want to press it again to stop the flashing lights, you cannot do this, you have to choose a fan mode by pressing one of the four buttons. I later learned that if you leave the lights flashing without choosing a speed, they will stop flashing after probably half a minute.¬†When you done cooking, you press the right most button, and the light above the fan mode you’ve used will start to flash. This means the fan will turn off in two minutes. If you want to turn it off right away, you have to press the right most button again. How would one figure out all these complicated things without a manual? I do trail-and-error each time I cook, until I decided to learn the logic for writing this blog.

In order to maximize the number of functions can be controlled, ways of pushing buttons such as long/short pushing, double pushing, or complicated combinations are introduced. However, these are not natural to human users. Easy solutions include adding more buttons, or adding screen feedback, but these are also more costly. So I think it is a great challenge to design intuitive and economical buttons that can control many functions.

Should the users be forced to learn all the controls from the manual? Or maybe things like color, shape, and height of the buttons could be properly designed to convey meanings more intuitively?

Purdue Recycles: Good Idea, Bad Recycle Brochure Design

So our research team moved to the new office! Everything is nice here! I was just confused about the wastebasket. I vaguely remember I’ve seen this kind of blue waste bins with two separate openings other places on campus, and they might be recyclable-only, but not very sure, and I never fully recognized the purpose of the two openings.

I saw a recycle brochure on my new desk, and I gave it a glance, and saw the big title “Where do I place trash that’s NOT recyclable?” and the picture of this blue waste bin under this title. I also glanced some keywords like “office papers”, “recycle”, etc. I didn’t have time to read through the brochure carefully, you know, I am always buried¬†in piles of works! The colleague next to my desk assumed that we should just put the recyclable office papers in the smaller opening, and organic trash in the bigger opening. This sounds reasonable, because our main recyclable things in the office should be the office papers, and that small opening is just the right size for office paper. Then that big opening must be for non-recyclable¬†trash, because the brochure shows a picture of this bin under the “where do I place the not recyclables?” So we did that, put the brochure away on the side self, and went back to work…

The next day, I found the building custodian collected the office papers, and put the brochure back at the center of my desk, and this happened again for another day. So there must be something I did wrong that the custodian wanted me to pay attention to the brochure. So I dissected the brochure, and realized what they actually mean is that the blue bin with two openings is recyclable-only (small opening for office papers, big opening for mixed-recyclables), and this kind of bins is by my desk. And there is another type of trash bin for trash, and this kind of trash bin is¬†centrally¬†located throughout my working area. For a non-native English speaker, I can only understand the difference between these two locations if you put them together in comparison. But these two are on the opposite side of the brochure, so I do not have the context to compare them! Our working area contains sections of semi-open cubicles, I would think our cubicle is one of the central areas, since we have four of this kind of blue bins here! ¬†I went out, and did see grey trash bins labeled “trash” on the hall way, but I didn’t pay attention to them before, because I was buried in other works. After all, why on earth would they put a recyclable bin picture under that big title “where do I place trash that’s not recyclable?”

As I indicated above, they should probably at least change the position of these two paragraphs, and add a trash bin picture for non-recyclable trash. I understand they probably run out of space, so they put the blue bin picture here, but this causes a big problem for people who do not have enough time to carefully read the brochure. I can see that the designer put thought on the aesthetics and content of the brochure, but this one small problem of positioning cause big problem, and would influence the revenue of the recycle program.

Before I took CGT512, I would feel so bad that I didn’t read the brochure carefully and made the mistake, but this class is making me critical and more conscious about things in life now. I would accept everything being designed and try to learn and adapt to them before, but now I’m criticizing them, of course, also appreciate good things if they are designed well. Also, I realize how important design is, since it is everywhere in life, and influences the outcomes of many efforts.

Microsoft Academic is Making the “Co-author Path” Button Wrong

Below is a typical author profile on Microsoft Academic Search–an academic search engine that provides more visual analysis rather than merely lists the publications as that in Google Schoolar. I’ve heard from another fellow that a strong feature of Microsoft Academic Search is that it has a cool design of collaboration networks of each author. So I went there and checked it out. I just couldn’t find the proper place to click to get to the author’s collaboration network graphs! After my colleague pointed to me, I still felt it’s conter-intuitive somehow. Was it jus me? Can you find easily at the left column, a place to click to directly get to the author’s network graph?

Okay, it is here! It is indicated using a red circle below, where if you click, you will get to the authors’ collaboration network graph and some other graphs. I felt awful at the beginning that it is designed so big in order to catch the users’ attention, why I couldn’t see it? Was there any problems of my eyes that I simply omitted it?

After learning about the Gestalt principles and other design knowledge, now I know some reasons. First of all, this icon doesn’t have the affordance of clickability as written in one of Dr.V’s blog posts. It doesn’t look like something that I can click. It doesn’t have convexity like a button. It just looks like a logo there. Second, it is being designed big in order to catch the users’ attention, but this violates the Gestalt’s law of smallness in figure-ground organization. Not all big things are in the spotlight! All other items above and below it are smaller than it, so we would treat the other smaller items as the figure and feel this like the background. Third, beside smallness, this design also violates the Gestalt principles of contrast in figure-ground organization. All the items above and below it have the same design, but this one is different. Being different is supposed to make this icon stands out, but why not? Because the color schema of this icon is very similar to the overall background and is much lighter than the color used in the items above and below it. My eyes feel it may be part of the background that I do not need to care. If the designer wants to make this icon stand out, the color schema need to provide more contrast. Finally, it violates the Gestalt principles of similarity and continuity in grouping. The “co-authors path” actually is somehow related to the group of “Co-authors”, but right now the design makes it doesn’t belong to either the group above it nor the group below it. What’s worse, the color schema is very similar to the line graph on it’s right. My eyes feel it’s an extended part of the line graph on the right. So it somehow gets grouped with the line graph on the right. Overall, my eyes and brain feel this is a non-clickable logo that is either part of the line graph on the right or part of the background that I do not need to care.

I also found that the text inside of this icon changes among “co-author path”, “co-author graph”, “citation graph”, and “genealogy graph” kinda randomly each time I refresh the page. I understand this happens because there are several different types of graphs being offered, but that it takes the user to refresh the page each time to find this out is a bit disturbing. If the changing of text inside of this icon must be used, I would suggest to make the text flash automatically, which also brings in motion that can make this icon more eye-catching.

Good thing is that, this interface does offer another way to get to the graphs. The user can click the orange title “Co-authors(n)” and get to the co-authors page, and then click “View Co-author Graphs”. This is not as direct, but right now seems more intuitive than the logo-like icon/button thing.

What do you think?