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.