Google, design, and you

Our presentation starts out with the concept of design laws. The speaker uses computer generated optical illusions in the first part to show how we as humans see things. He talks about design principles such as proximity (grouping similar items together, the law of similarity (which looks to be the same/similar to repetition, or using a common theme throughout your design). He also brings up readability in the way that we read pages. Traditionally for English speakers, this is left to right and top to bottom (though it varies depending on the language, the Japanese for example typically read right to left). He emphasizes the importance of keeping things consistent for the user, since consistency is something that users are often looking for and find comfort in.

Another part he mentions is the use of peripheral vision. His example is when we are using our computer (or other device), when we get a notification of some sort (text, email, update, etc.) our eyes are immediately drawn towards it and we recognize it. Just like when the test subject walks into the chamber just in time to see the tiger that’s going to eat him/her.

The next part that is discussed is recognition. Users tend to notice the general shape of objects and recognize what they mean before they recognize the actual object (the silhouette of the phone vs the 3D rendering of the phone). This also is used in the recycling example he gives where if a recycling bin is circular, it’s a better indication that the bin is intended for cans or plastic bottles as opposed to paper/cardboard.

Our presenter then covers the idea of color-blindness, which is something that doesn't seem to get taken into consideration very often. Using the example of the map though, he shows that it doesn't have to be a barrier because it isn't just color that is used. Shapes, shades and values all help a person recognize what they are looking at even if they cannot correctly read the colors. Continuing in color, the use of color can aid in recognition. Like the Kubrick that we watched earlier, splashes of a particular color can help your object stand out over other things. The example he uses is the letters. I did find it easier to pick out the red letters in less time than to pick out the letter “G” (I still wouldn't have won the plush Android though).

Memory is the next piece of the design puzzle. The importance of our short-term or working memory is focused on. The idea of interruptions breaking our concentration and flow of work being a big part. An example I’ll use is when playing video games. With the current generation of gaming, notifications have become commonplace (achievements, friends coming/leaving online, required updates, etc.) and I do find those to be very distracting when I’m in the flow of a game (especially if it’s a game that requires total concentration, like pinball. Yes...I love pinball). This can be applied to a programmer who is writing code, or a writer who is working on a novel (or a blog post). In addition to getting distracted, we can also forget what we were working on or where we are in our work. Such as a programmer forgetting what line of code he/she was in. This is a large reason why I try to remember to turn off a lot (but not all) of the notifications I can get on my phone...they’re just too distracting!

The focus is brought back to repetition. In the example he uses is in reminding the user over and over again how something works for the first few times of use. Eventually the user will remember the command and will no longer need the reminder. The important thing for this is to keep the reminder in a consistent spot, and not overuse it to the point that the user become annoyed and no longer wants to use your app (if you keep telling me over and over again to do something long after I've learned it, I may stop using your program purely out of spite...and so may other users).

The final item brought up is the idea of time. Don’t let the user feel that you’re wasting their time. As the presenter shows, even just making a few tweaks can at the very least, give the impression that something is taking less time, even though it’s actually the same amount of time as previously. The example with the progress bars is perfect. When he went from the bar filling fast and then slowing down, it felt as if time had slowed down with it, and progress was being made very slowly. The exact opposite happened when he switched up the bar to go from slow to fast, I felt as if the progress was being made faster even though the speed of the bars were identical. If the user doesn't feel like they’re waiting, they’re going to be a happier user.

I really feel like I learned a lot from the video. There are so many different aspects of designing to make things a better and nicer user experience. If I use the skills that I’ve learned up to this point, and the skills I’ll continue to learn, I see no reasons why I won’t be able to design items that people will be happy to use and watch!

Of course though…

...in the end…

...no matter what you do…

...the tiger will still eat you.

Simple Bull****

While I may not be a huge Apple fan (I really despise iTunes, though I love my iPod), I do feel that they tapped into a psyche that no one else did previously. The article states that Apple used Picasso’s bull lithographs as examples of taking something complex and breaking it down to the most simple pieces.

It’s hard to argue that Apple has been more successful at doing this than anyone else. The first, and I think best example of this is the original iMac that was introduced in the late 90s. Prior to that, home computers required a lot of setting up, cables, and a good amount of knowledge on operation. Apple took the idea of the PC and simplified it down to it’s most basic components...the mouse, keyboard, and monitor. Sure, the computer was built into the monitor, but most people who wanted the iMac didn't care. Apple tapped into a market of people who had not yet made the jump into the home computer market. It was a brilliant decision that is likely a strong reason Apple has as many fanatics out there as it does.

They would continue to stick with the idea of simplicity with their other two major products...the iPod and the iPhone. MP3 players existed prior the iPod, but Apple decided to build a player that was white (very different from the black everything on the market), and would have only a couple of buttons. The white color would give it a very clean look, which also made it stand out beyond anything else on the market. Throughout the years they would continue to simplify the design by removing all the buttons except for the “click wheel” (which would eventually not even click but would become touch sensitive), as well as reduce the size from a deck of cards to smaller than a USB thumbdrive. During all these revisions, it would still retain the same usability and functions (with the exception of the iPod Shuffle).

Finally, Apple would take the idea of simplicity to the world of smartphones. Now, in this situation, Apple would make the iPhone the first smartphone on the market with a touchscreen and no physical keyboard at all. They made the icons on the display simple to read and use, restricted the ability to open it and mess around with it (again, for simplicity reasons primarily), and gave it a nice, sleek body to house it all in. Since it’s release, hundreds of smartphones have flooded the market...some better than the iPhone and many that are not. However, none of them can match the design of the iPhone for sleekness and cleanliness.

Apple has truly taken the idea of simplifying the bull to the highest levels, and it’s understandable to see why they've been so successful in it as they have.

Red Kubrick

As someone who has been a fan of Stanley Kubrick since I was in high school, I was rather excited to see this supercut. I was aware of some of the themes that he used in his movies (the one I was most familiar with was that he shot a lot of his movies in 1-point perspective), I was unaware of his use of the color red. Being familiar with his movies though, it seems like something I should have noticed previously.

Red is such a striking color, and he uses it to great effect. The effect I noticed that he uses it the most was as a sense of danger. You have the obvious with the bloody hallway/elevator from The Shining to the more subtle like the red lights of the airlock in 2001: A Space Odyssey. Even HAL 9000's red eye shows that he (it) is the villain of the movie, even if you don't know it yet.

The other uses I noticed included the orgy scene from Eyes Wide Shut, which gives a sense of something not quite right. Because that movie is all about relationship, it's appropriate that the scene be bathed in red to give a sense of what is happening is taboo.

I kind of wish the video was longer just so the viewer could get a better sense of the emotions that Kubrick was trying to convey. The use of the music from A Clockwork Orange was quite nice as well! 

Transitional Interfaces

In the article, the author discusses the use of animation in regards to transitions. I’ll admit, I’m not a huge fan of animations because I feel it can bog down the user experience with unnecessary loading, and if not handled correctly, can just look busy and even ugly. I do however understand how animation can be useful in interfaces, if used in a helpful manner.

The best example in the article is the first example given with the list. In the first example, the “new item” just jarringly pops up and shifts everything below it down. Now, if I were looking at an app and saw that, I may think that something is either wrong, or that particular button had just finished loading. It looks lazy and cheap (which it might be since that’s the default that the computer would choose). The two examples of using animation I feel work much better because they do indicate to the user that you've added a new item or feature, and it’s intentionally there.

Another part of the animated transitions that I did like, was using the animations to expand a window. The example I preferred was the second “list summary” example where the window expands downwards to provide a bit more information without looking excessive or like overkill (which I think the third example is). If you’re going to use animation as a transition, I think the good examples that I pointed are a good way to do it They don’t interfere with the user experience, and can actually enhance it, while looking cool at the same time.

The author is right, designers can sometimes obsess over the look and aesthetics over functionality. I consider myself a designer who has always been in love with technology, so I feel I’ve always had an appreciation for a functional application, even when does sometimes has to take a back seat. I know I’ve stated this in previous blogs, but I think it’s worth repeating...if you have a strong layout and it works properly, you can build a solid design around that. It’s much harder to take a fancy design, and make it functional.

Madison College App

In developing the design for me idea of an app for Madison College, I wanted to make sure that the look was clean and functional. In addition to that, I also wanted to be sure that all the selections I put on the homepage would be useful to the most people who might be using the app.

The first thing I put on the app (besides the school's logo) is a LOG-IN button. Since so many of the options in the app work with the student/staff user ID, I wanted to make sure the user would see a prominent spot to enter that information. So I placed it above the icons so that the user would know that logging in is probably the first thing they would want to do.

Next come the icons. I designed most of the buttons myself in Illustrator (with the exception being the Blackboard button) since I couldn't find buttons that looked how I wanted them. I made sure to make the buttons large enough to read on the phone (I checked it on my phone to make sure I thought it was legible). In addition to the buttons, I also included the names of each button so it wouldn't confuse the user.

Now for the purpose of each icon:

First off, we have Email and Blackboard. As a student, I probably use these two services from the school more than anything else, so I wanted to make sure they were the first two icons you would see. Students & staff would be able to have full access to their school email addresses, as well as important Blackboard information.

Next is the News button. This would lead to a general news page that would include campus news (including athletics), local and national news (through a general news feed like AP or Reuters), as well as weather and weather notifications (including watches/warnings and potential school closings). I use multiple apps to get news, so I think having a single place to get that information would simply make it easier for myself (and hopefully others) and would get me to use the app more often.

After the news would be the student information buttons; courses, calendar, and schedules. Now, I know these three may sound similar, but they do serve specific functions. The courses icon would allow you to sign up and register for courses as well as access the course description, similar to the paper course directory that is made available each semester. The calendar would be a feature similar to Google Calendar (and may even link to it if you use it). This would give a student a place to enter school appointments and items they deem important (exam dates, project due dates, etc), but also non-school items like dates, appointments (like haircuts, doctor/dentist, etc.). It would also use push notifications so you don't forget those important dates.

Then we have the schedule button. This would give the user access to their class schedule for the entire semester. It would have information on when & where the class is, as well as who the instructor is. It would adjust accordingly for classes that are added and dropped, in addition to handling half-semester classes. With it, no student should have to print out a paper copy of their schedule.

Our next button is the Search button. This would bring up not only the option to search the entire Madison College website, but it would also bring up the A-Z directory as well. While I realize that viewing the website on a phone is not the best option, I felt it was important to make sure the user at least has the opportunity to search in case there was something specific that isn't covered in the app. I feel if you're going to build an app for something that has a more robust website, you need to make sure your user still has access to that information.

The final buttons on the app are for the MATC library, and Financial Aid. Through the library button, a student/staff member would be able to search and reserve books & materials, see when said materials are due back (and provide push notifications for that), as well as reserve study rooms. The user would be able to search through the library’s inventory, and add themselves to the waitlist if an item is already checked out (again, a push notification would let the user know when the item is available). The financial aid button would allow the user to the student to view their available financial aid eligibility, how much they have received, as well as provide information on preparing for paying back the financial aid when they’re done with school. It would also provide a link to the FAFSA site so a student can apply for the next year’s aid. The financial aid page will also provide links and information regarding potential scholarships available.

As you can see, I’ve worked to make sure the Madison College app will provide as many of the essential services as possible to both the students as well as the staff. I want them to find it easy to use and useful. With large colorful icons that are easy to read text, I know I would want to use it, and I hope others would as well.

The Rest of the Book

The talk of "religious discussions" actually really helped me understand that there really is no typical web user. One of the best examples I thought was regarding Flash. I'm not a huge fan of Flash outside of games, but I think the primary reason for that is because it is so rarely used well. One of the sites that were part of the 25 worst designed sites used Flash so poorly that the navigation moved so rapidly it was making my partner motion-sick when we looked at it.

It seems to me, that the most appropriate direction for good design is try and design a site that most people will be able to use with little or no difficulty. If you can get usability down, I feel you can design the aesthetics around that, rather than try to go the other way.

Usability tests seem like such an obvious part of the process, but for a MO small business or individual, I can see why it can get overlooked a lot. When budgets are limited I can see why that step can get skipped. Unfortunately, as the government realized with healthcare.gov, if you do a major rollout and it doesn't work as advertised, it can really damage your PR and reputation. Even though they're not a website or app, I've seen major video game releases botched terribly because they weren't ready on launch day due to some very basic testing that maybe wasn't done. When it comes to potential money lost, it seems like the relatively minor costs of doing usability tests throughout the process will help ensure your roll-out and launch will go smoothly.

Again, it seems obvious that you should make your website as usable as possible, but it seems like there are times certain items are omitted intentionally, and that's always puzzled me. One of my favorite examples of that is from bestbuy.com. Occasionally I'll be searching for an item, and they refuse to put the item's price on the item's page. Often it will say something like "sale price" and then they give explanation that they can't give you the price until you've added it to the shopping cart. This annoys me to no end because it's an extra step in my shopping process that I shouldn't have to take, yet they insist that I do. Most of the time I do the opposite and decide I don't want or need the item. It's like going into store and telling me I have to take the item to a cashier to get the price. I'm not going to take that pointless step unless I genuinely need the item (and more often than not, there's always an alternative). Don't waste my time or efforts, or I may ignore you next time I need someone.

Accessibility honestly isn't something I'd really taken into consideration, but it makes sense that every designer needs to take it into consideration. Unfortunately I’m not terrible familiar with the homepage readers that the blind use to help them read websites, I’m definitely interested in learning more about how they work to make sure I can introduce that functionality into future (and existing) sites that I may work on.

At last, we've reached the end of the book. I love the letters that the author wrote to give to bosses who aren't in the actual design process, but want to make sure they get their two-cents in. In an era where more and more of our personal information is being collected (without our knowledge in some situations), companies need to be data collection. Privacy is being discussed more than it ever has in a long time, it’s important for designers to keep in mind that some users (including your possible demographic) may be turned off by those collection methods and will go to someone else who isn't as intrusive.

As for “pizazz,” I've said it numerous times throughout my blog that I think you need to make a usable and functional site before you try adding bells and whistles, and don’t use those bells and whistles unless they have some useful function to your audience (of course, it all depends on your audience/user base, and your client). Oracle isn't looking for a flashy and shiny website, but Chuck E. Cheese isn't looking for something sterile, boring, and corporate. Build a good site with a solid user interface, and the good design will follow.

Mobile First

So the primary focus of the video is as the title suggests…mobile first.  It does appear that the predictions and statistics he presented appear to have come true. Mobile devices (especially for web usage), have taken over PCs in terms of usage and sales. So many people are using their mobile devices for using the internet today. I still feel there is a place for PCs when it comes to web design, but I can definitely see where he is coming from. I do wish the video was in a higher resolution so I could see the statistics that he kept bringing up. Very disappointing since it was recorded back in 2010.

I think it might be difficult to design for a phone first, and then move on to a bigger screen from there does seem to be a difficult task. I personally feel it's easier to start large (like a PC screen) and then reduce and consolidate down, rather than try to go from small to large (like a photograph that's been scanned). I do appreciate that he goes into using the touch interface and the accuracy (or inaccuracy) of the human finger. While working on the wireframe for our current assignment, I wanted to make sure that I can use it with my own fingers (large enough icons, but not cluttered) because I have large hands. I figure if I can use it comfortably, most other users should be able to as well.

I remember using (or more specifically trying to use) my Motorola Razor for using the web. It was pretty similar to the example he showed. The triple tap just to get to letters was ridiculous when I think back upon it. I think I used it to get some news, sports scores, and weather info and that was it. It was, well, pathetic I think. It reminds me of when websites were just text back in the early days of the web ('95-'97).

One type of interface that is mentioned that I don't think should be a part of mobile use is the double-tap. Using a touch interface can be awkward when you're trying to tap in the same location twice in a row. Of course, that may just be my own opinion, but I don't think I would design a site or interface that used a double-tap for its touch interface.

Speed is important!  I don’t feel he emphasized this enough. Even with 4G, you want a mobile site to load quickly and be simple enough that it doesn't take long regardless of connection. In fact, I think it’s more important in case you’re in an area with the faster speeds are yet available (something that is still true).  I know if I try to visit a site that takes forever to load; I will likely leave that site and look for another that serves the same or a similar purpose. Don't make me wait, I'm not that patient.

I've never seen a site or app use the "insta-scrolling" that is shown off. Personally, I don't think it would be particularly useful. In fact, I could find it annoying if it was turned on and I tilted my phone and the text started scrolling without my knowledge.

The last function he talked about was the use of the camera on the device for recognition. I happen to the use the camera quite a bit when I'm out shopping to comparison a product with the price on Amazon. Recently Amazon has introduced the ability to take a photo of the actual product or item that you're looking at without even having to deal with either a barcode or RFID. I absolutely think this is a very important function for certain websites. I would love the idea of being able to take a picture of a movie and get reviews or IMDB information while I'm out shopping.

Despite what I said earlier about it being easier to design an interface with a larger display in mind and then condensing it to a phone or tablet display, I do feel the idea of taking mobile into consideration first is a strong direction to go in, and definitely something I will keep in mind.