What Does a UX Designer Do?

I couldn’t resist posting this:


Posted in User Experience Design (UXD) | Tagged , | Leave a comment

Two More Reasons to Love Gmail

I’d like to extend a kudos to Google for two relatively new design improvements on Gmail. Brace yourself for a barrage of screenshots!

The first improvement is a “Track package” button that will often appear next to an e-mail sent to a Gmail user’s account. In the user’s inbox, where the collection of e-mails are listed, this button will appear next to an e-mail/message that contains tracking information for shipment. Take a look at this screenshot to get a better idea of what I’m talking about:

Screen Shot 2013-06-10 at 9.42.18 PM

This improvement is yet another example of a service streamlining the experience for users; what’s great about this improvement is that it’s subtle and unobtrusive, so it likely won’t bother users who choose not to use it.

Now, instead of opening the e-mail message and searching for the tracking information, users can simply click on this button, which will automatically bring up their shipment tracking information. For example, when I click on the “Track package” button in the screenshot above, the following page loads in a new tab on my browser:


I also want to praise Google for another fantastic improvement that makes the process of sending e-mails with large attachment files so much easier and quicker. In the past, when users tried to upload an attachment file that exceeded 25 MB, they received an error message telling them the file was too big to send. There were only a few solutions: (1) somehow shrink the file (e.g., compressing the file into a zip folder, which still may not have shrunk the file below 25 MB); (2) save the file in the cloud and point to its location; and (3) save the file to an external drive.

Now, if an attachment exceeds the maximum file size, users see this:

Screen Shot 2013-06-11 at 8.54.38 PM

This is similar to Solution #2 mentioned above (save in the cloud and point to its location), except Gmail is doing the work for you and automatically saving the file to Google Drive. After users click on the “Send using Google Drive” button, the following instructions appear:

Screen Shot 2013-06-11 at 9.02.30 PM

If users choose to send their attachment via Google Drive, they can upload file sizes as large as 10 GB, which is quite amazing. Once users select a file or multiple files, the screen will now look like this:

Screen Shot 2013-06-11 at 9.01.48 PM

Upon clicking “Upload,” the file will save/upload to the Gmail users’s Google Drive, which requires no set-up, since all Gmail users are automatically given their own Google Drive space when they sign up for a Gmail account. After the upload is complete, the following message is shown:

Screen Shot 2013-06-11 at 9.33.37 PM

In this box, users can determine how they want to share the file with the recipient(s). There are 3 sharing options: (1) recipients of all e-mail services can access the file in view-only mode; (2) recipients of all e-mail services can add comments to the file;  (3) recipients of all e-mail services can edit the file. If users select the “Send without sharing” option, then only other Gmail recipients will be able to view the file. If the recipient is not using Gmail as their e-mail service, they would be required to create a Gmail account (or log-in to an existing Gmail account) in order to view the file.

This improvement achieves the same goal as the new “Track package” button:  it streamlines the process of sending and receiving e-mails, simplifying and smoothing out the “bumps” that might frustrate users or slow them down.

So, in sum, for all my fellow Gmail users out there, Google just made our experience even better.

Posted in User Experience Design (UXD), User Interface Design, Web Design | Tagged , , , , , , , | Leave a comment

Small Improvement on Wikipedia Makes a Big Difference

Wikipedia has made a subtle improvement to its site that should greatly improve the site’s usability and user experience.

The average article on Wikipedia includes footnotes (citations) of research sources and additional relevant information. Until recently, when a user clicked on a footnote number within the body of the article, the page would automatically “jump”  to the bottom of the page where the numeric list of footnotes resided.

But that design was somewhat problematic: when users clicked on a footnote number and were redirected to the bottom of the page, they would have to scan the list of footnotes to find the number on which they clicked. Which, initially, doesn’t sound too bad, especially since the selected footnote is highlighted in a light blue color to make it stand out among the other footnotes. However, this “jump” would cause users to lose their “reading spot” on the article, forcing them to scroll back up the page and find where they s

The solution? Well, Wikipedia now offers a “Reference Tooltips” feature: users can  hover the mouse cursor over the footnote number in the article, which will prompt the appearance of a pop-up box. This box contains the footnote’s information (e.g., a citation or a link to another resource). In a nutshell, this feature prevents the automatic “jump” and, therefore, prevents users from losing their spot on the page. In the screenshot below, I hovered my cursor over Footnote #42 on Wikipedia’s Memorial Day article, which prompted a pop-up a box containing information about Footnote #42:

Screen Shot 2013-05-26 at 7.40.20 PM

In addition, Wikipedia makes this Reference Tooltips feature optional and somewhat customizable. If users click on the gear symbol that appears in the right-hand corner of the pop-up box (see above), the following Options box appears:

Screen Shot 2013-05-26 at 7.55.28 PM

A small, subtle change can make a significant difference in improving user experience, and this new feature illustrates that fact.  Looks like Wikipedia is listening to its users.

Posted in Usability, User Experience Design (UXD), User Interface Design, Web Design | Tagged , , , , , | 2 Comments

Micro-Moments and Conversations

I recently came across this article on Twitter, in which experience designer Stephen Anderson describes “micro-moments” and how they relate to interaction design.

According to Anderson, micro-moments are “the smallest units of interaction in an online experience; like when Kayak.com automatically activates the return-date calendar after you’ve entered your departure date.” Anderson also argues that interactions should be treated as having natural “conversations” with users.

I can immediately think of a few other examples of micro-moments/”conversations”. How about when your e-mail service asks you, before sending an e-mail, if you want to add an attachment to your e-mail because it recognizes the word “attachment” in your message?  Google search engine’s automatic query suggestions also comes to mind. Or when you type a friend’s name into a Facebook post, you’re automatically prompted to “tag” the friend in your post. Micro-moments can extend beyond online experiences, too. For example, your vehicle probably emits a beeping/warning noise when you open the door and you’ve left your keys in the ignition or the lights on. In each of these examples, the service or machine is “talking” to you.

Take a look at this video, created by Anderson, that explains micro-moments and how to make interactions mimic natural conversations with users a bit further:


I think micro-moments are much more prevalent that most users realize, and it seems as though this concept doesn’t receive a lot of attention in the UXD field. I’m glad to see an expert promoting this practice and shedding light on its importance to interaction design and UXD.

Can you think of other micro-moments you’ve encountered? If so, please share them here!

Posted in Human Computer Interaction, Interaction Design, User Experience Design (UXD), Web Design | Tagged , , | Leave a comment

Trend: Flat Design

I’ve been reading about a trend called “flat design,” which is a form of user interface/web design that involves minimal use of drop shadows, gradients, 3D graphics, or anything else that would give the illusion of depth.  Flat designs have been showing up on both desktop and mobile apps. Even Google and Microsoft have been

There are arguments for and against this design trend. As far as aesthetics go, I’d argue that flat designs can facilitate a simple, sharp, and clean look for a user interface. However, implementing too much of this design, especially for a long period of time, may eventually cause your website or app to seem dull, amateurish, and/or less interactive to users.

Whether you’re pro- or anti-flat design, David Martin said it best in his article on Design Woop.com:

“As with any design trend, people can often overlook the project needs or requirements. The focus on any project should always be how best to convey and represent the clients needs and their brand. In essence their is no such thing as one style or trend being better [than] another, it all comes down to what works best for the project in question.”

Check out some great examples of flat design.  Feel free to share any thoughts/opinions you have about this trend.

Posted in Mobile Design/Devices, User Interface Design, Visual Design, Web Design | Tagged , , , , , | Leave a comment