Julia's Jubilant Thoughts

A journal for my experience with user interfaces.

[everydayinterfacebook-blog]

Post #10

The New York Times Cooking website is one of my favorite interfaces. It is very well-designed on all three levels of design. On a visceral level, the color red, which is used throughout the site, is known to be an appetite stimulant. The color, coupled with the appealing photos of food than are nicely organized, make me hungry and make me want to continue looking at their site. On a behavioral level, the site is easy to use because it allows me to save recipes for later with a single click. Then, I can go back to them whenever I want and intuitively group and organize them for increased efficiency of future use. The idea of the recipe box plays on a familiar concept and promotes user engagement by encouraging users to “collect” recipes. On a reflective level, it reminds me of my grandmother’s carefully curated recipe box, which in turn makes me want to curate my own collection of recipes from this site. 

[wu-julia-blog]

I am, unfortunately, not a cook and did not know about the New York Times Cooking website before. However, I enjoyed your interpretation of both the aesthetics and functionality of its interface. It is true that the visual traits appeal to the visitors’ appetite, not just through the color red and the photos but also the descriptive titles displayed through clean and sleek typography. Your description of the saving functionality as well as the ability to “collect” and organize recipes reminds me of Pinterest. Pinterest is also a portal where users can identify content that interests and inspires them, and save them into categories for a personalized and curated experience. Overall, this is an interface that enhances efficiency and memorability.

[wu-julia-blog]

Post #10

I’m obsessed with my Google Calendar. I love the color-coding and toggling between calendars, and the monthly viewing format helps me plan ahead. I’ve also recently been using the “Agenda” viewing option because it gives me a daily breakdown of my events in a to-do list format. However, due to the amount of events I add to my calendar, I can usually only see details of three consecutive days. I think that having the option of displaying days vertically—instead of horizontally—could make better use of the real estate on the screen. Another issue with this viewing format is that tasks are light blue, which coincides with the color of certain event categories. Although they’re not the exact same shade, users could get confused.

[mani-askari-blog]

Post#10

Facebook “add friend” feature. After reading Adam’s article discussing how different our relationships are online relative to our offline life, i was reminded that Facebook put all people in my life in one category “Friends.” My family, colleagues, primary friends, temporary friends, and the butcher across my apartment can all see, view, comment on all my posts unless i filter them out one by one. I would like to be able to categorize my contacts in a painless way that allows me to control who sees my posts, who can comment on them without trying to iterate through all my contacts every time and filter them out. The lack of this feature causes frustration and decreases the efficiency of use for the site. I strongly advise Facebook to allow “contacts” categorization just like the one Google Circle has!

[wu-julia-blog]

I agree with the pain point about “filtering out” people from some posts that we don’t want them to see or comment on. One personal example is that I’m friends with some people who I used to work professionally with, and it definitely makes me think twice before I write posts or share pictures. It does take work to manually categorize our friends once they’re already in our giant miscellaneous list. Also, sometimes the “circle” format helps us remember where we know a friend from. There are some people who show up on my news feed and I don’t quite remember how I met them. So explicit and intuitive categorization—starting with the stage of adding friends—could be beneficial for all kinds of users.

[wu-julia-blog]

Post #9

A mobile application I use regularly is The Economist Espresso—it delivers the most relevant daily news in pieces that are very quick and easy to read. This helps me save a lot of time looking for the highlights of news stories, but I also enjoy the sleek user interface. It uses colors wisely to separate sections and categories, and does not have too many features so users can quickly feel like they have a grasp of all the major functionality. I also like its use of checkmarks to indicate that a story has been read. At the end of every piece, there are clear options for the actions that a user can take. Overall, an interface that is high in learnability and efficiency.  

[rungeinterfaces-blog]

Post #8

After I read always-late-lucy’s post about how Netflix uses the colors red and black to remind the viewer of a movie theater, I started thinking about how other companies might use color to convey things about their products. Almost every company does this in some way. One great example is UPS. The UPS logo is brown and gold. The color brown is generally not a loved color, but in this case it works for UPS. Brown conveys dependability and down to earth principles. It also reminds people of a parcel wrapped in brown paper, a timeless image. The gold adds an air of excellence to the logo, without being snobby or flashy. 

[wu-julia-blog]

I like the interpretation of the UPS logo, as well as how you connected the dots between the colors and what they convey to the users. The mention of “timeless” is noteworthy, especially since in our Canon reading there was an emphasis on the timelessness of logos that have a lasting recognition. I also wanted to discuss the shape of the UPS logo—it looks like a badge, which could also illustrate the legitimacy and seriousness of the work they do, and encourages the audience to trust UPS with their letters, items and belongings.

[wu-julia-blog]

Post #8

LeetCode.com is an excellent platform for coding practice. Even though I’ve used LeetCode multiple times, it took me a while to discover some valuable features. For example, I only recently discovered that after completing one coding problem, I could follow the webpage’s suggestion to try a similar one. The “Show Similar Problems” button is quite small and hidden, and users don’t always notice it because it’s shown before the box where one types in their code (instead of after, or at the bottom of the page). Another limitation is that when browsing problems, users might not realize that they can sort the questions by category because the categories are named “Tags” instead, and only displayed towards the end of the page on the right side.

[justuandi1300-blog]

Post #7

Since the introduction of OS X Lion, auto-save is not uncommon – many applications such as Preview, iWork and TextEdit support it. But in all of these applications, save and save as remain an option. The new Microsoft OneNote has a more radical approach to files and saving.

1. There is no option to save at all. Files are auto-saved and that’s it – there’s not even a save as option.

2. There are no OneNote “files” visible to the user. Instead, information is stored in a notebook with multiple sections, which have multiple pages – much like a physical ring binder.

OneNote represents a radical paradigm-shift that is very much in line with Cooper’s philosophy; it successfully hides the workings of the filesystem from the user.

[wu-julia-blog]

This is an excellent observation. I’m an avid OneNote user, and I still find myself pressing CTRL+S all the time even though I know there’s no need to manually save. But even when I do stop trying to save, I like to make sure that my notebooks are running sync as often as possible, and OneNote also seems to do an efficient job at keeping my notes consistent across different platforms and machines. Another relevant point brought up by this post is that the concept of individual files is changed in OneNote—everything is stored in a notebook and accessed by the UI, and a user does not need to worry about opening pages on their own.

[mani-askari-blog]

Post#4

Today I would like to point out the problem right in front of my eyes that i have ignored for the past four weeks, tumblr file attachment. For the first three blogs i have posted on this site, i struggled to find out how to attach an image to my post. The main page interface has a “text” and “image” buttons without showing how one can integrate two tasks. I had to navigate back and forth between “text” and “images” to figure out how to embed one in another. After a while i realized that when you pick text. there is a little tinny tiny “+” button on the left of the panel (in which i am writing in now) that you can click and add images. This button’s visibility has caused me to be less eager to blog in this site. Apart from being barely invisible, the “add file” button is also too small to point and click on. my mouse has to wonder around the button for a bit till i can successfully click on the button and add my images to it. Also, the images do not embed nicely with the blog making it unattractive to read. I hope this problem will be solved soon!

[wu-julia-blog]

Glad you pointed this out! I had the exact same experience—I like including pictures in my posts but it did take some time for me to discover this feature in a “text” post. Even after finding out about this feature, I feel like there are still some aspects that negatively affect its usability: first, the “+” icon is not *that* intuitive for most users. Some people might recognize that it means adding some media, but others might not. A paperclip icon, for example, could be more self-explanatory. The other aspect is that the icon disappears after I start typing. So if I didn’t immediately see and understand the icon, I could completely disregard the fact that attachments were possible.

[wu-julia-blog]

Post #7

Quora is one of my favorite products, but I think its interface could be more informative. I remember subscribing to my favorite topics when I first signed up, and I sometimes I search for that list so that I can get suggestions for categories where I can find interesting topics. But that list is no where to be found in the home page, and I don’t know where to click in order to access my list of favorite topics. Another feature that bothers me a bit is the Notifications. If I have notifications, a red number will show up next to my “Notifs” tab and I need to click on it AND choose “mark as read” before the red bubble goes away.

[wu-julia-blog]

Post #6

A friend introduced me to TypeForm, a website that allows users to create beautiful and sleek online forms/surveys. As I was testing it out for the first time, I was impressed by the fluidity of its design—large buttons, a logical flow that guides users through the creation of forms and real-time updating so that surveys immediately reflect changes made by he author. Typeform also allows a user to start by choosing a type of survey from a variety of categories and within each survey, there are options for input fields (short text, long text, multiple choice, etc.) that are illustrated by thumbnails. I found this interface to be highly learnable due to its consistency, in addition to being attractive to users through appealing aesthetics.

[always-late-lucy-blog]

Post #5

My latest observation deals with my friend’s microwave. 

Traditionally, users expect to enter their microwave time on a number keypad in terms of MM:SS. However, the input on this microwave differs from this user model. Instead, pushing 1 through 6 only activates the “express cook” feature corresponding to that number. Moreover, there is nothing on the microwave indicating the time and power corresponding to each mapped express cook option.

Other Changes that would be beneficial: - Changing the color of the Stop/Clear button to be red – red usually indicates the termination of an action and can be quick when users are trying to quickly identify a button among the many choices on the microwave. - Changing the memory button’s title to indicate its function

[wu-julia-blog]

I have definitely encountered and had to use a microwave like this before. It is rather misguiding that the number keypad doesn’t just allow users to select the time. In addition to some of the improvements suggested by the author of this post, I would like to point out a few more confusing features: The “power” button—an important feature— is awkwardly positioned in between “defrost” and “memory” and the numbers 7 and 8 don’t seem to have a description on them while the other keypad options do. This is one of the interfaces that not only gets the user confused at first, it could also cause frustration when the user does not know how to accomplish a task they have in mind.

[wu-julia-blog]

Post #5

I recently got a Google cardboard and find it incredibly entertaining. I downloaded the Cardboard app for my iPhone, which allows me to use the phone as a viewing screen. I was a first-time user, but found the mobile app to be very intuitive and user-friendly. I felt I could turn my head to navigate the menu options, and the first option was a tutorial. The tutorial had two simple explanations: Press the button on the cardboard to click, and tilt the cardboard to return to the menu. I was able to quickly use the device in my hands. There were a few small details (not included in the tutorial) that I only learned after a few uses, but overall this a highly learnable interface.

[mani-askari-blog]

Post#5

I should have written about Windows 8 interface design long time ago. In my opinion, Microsoft lost many customers along with their confidence in many Microsoft products when it first introduced Windows 8. Beside the hardware/software problems W8 introduced, its interface changes were dramatic to the point that any dedicated microsoft user (including myself) felt stupid using the product and not only lost interest in the product, but also started disliking all other products offered by the company as well. vast number of UI changes decreased learnability, increased confusion, and annoyed the users. Huge icon-based tiles with small text, colorful boxes and lack of intuition for performing simple tasks caused me to put aside Microsoft products since then. One of the most annoying UI features was “which corner should i point to get to search?” or “Where do i configure my network settings?” The interface is so badly designed that much of the core functionality i liked and needed were buried deep within unnecessary tile boxes and transitions that i eventually became tired and switched to Apple products. 

[wu-julia-blog]

Perhaps the greatest reason for bringing back the traditional start menu in Windows 10 are the negative reactions generated by the interface of Windows 8. The most compelling statement from this post is the “lack of intuition for performing simple tasks.” It could take the users some time to figure out how to return to the desktop, how the apps are organized, and where some of the most basic features like settings and search were located. This could have been a result of Windows’ first attempt at designing for touch screens, which unfortunately ended up not being intuitive or user-friendly. Thus, it was an interface that lacked in learnability although it was supposed to increase accessibility.

[wu-julia-blog]

Post #4

I had to scan a piece of paper at the Rock and used their high-tech scanner for the first time. I was impressed by the intuitiveness of the scanner’s control panel: the two main features—scanning and saving—are the biggest buttons, so as a first-time user I knew where to input my most important instructions. After scanning my file, I saw it on a separate screen and thought that I wanted a better result. I looked at the Brightness and Contrast fields and my intuition was to use my finger to adjust those bars. That’s exactly what they allowed me to do, and ll my changes were immediately reflected on the screen. I found this to be a solid combination of learnability and efficiency.

[always-late-lucy-blog]

Post #3

Although doors provide affordances to show whether one should push or pull them, there are few affordances to show if one should push the left or right side. If one pushes on the side closer to the hinge, they would have to apply more force than necessary.

The door into my floor’s lounge provides a good design affordance for this problem.

If you look closely at the right side of the glass door, you can see a bar for users on the other side of the door to pull the door open. Because that bar is placed on the right side, we can assume that it would also be logical to push the door at that end when entering the room.

[wu-julia-blog]

This is a relevant comment about affordances—often times, users can feel ignorant for pushing on the side that’s closer to the hinge.

But while it helps to know where the bar for the users on the other side is located, I’m also curious as to why it isn’t the same shape on both sides. Because if the door was not clear—and most doors aren’t—then it wouldn’t be helpful. I wonder if the other side isn’t the same because the handle/bar requires more material, but I don’t see that big of a difference in the amount of metal.

[rungeinterfaces-blog]

Post #2

My next post is about an everyday interface that I have used incorrectly multiple times. At first I thought it was my own fault, but after the 5th time of doing it, I have a feeling it is a design flaw. I am talking about the shower handle on my shower. After I’m done taking a shower I grab my towel and dry off standing in the shower. Often times there is still water dripping from the faucet, so I will yank the handle one more time to make sure it is completely turned off. However, most of the time I actually turn the handle the wrong way and end up turning the faucet back on and spraying myself. What is wrong with this shower? Why do I always instinctively think that on is off? I think my problem with the shower handle is rooted in a design flaw of all shower and sink handles. It is often difficult to know which way is hot and which way is cold, or even how to turn on a shower in the first place. This could be simplified by a more generic design, that is used in all showers and sinks. There could still be different brands and types, but if they all functioned in the same way it would save everyone a lot of confusion. 

[wu-julia-blog]

Showers are definitely a relevant user interface complication! I usually get confused about which way to turn when I go to hotels, yet they’re supposed to be some of the most stranger-friendly tools. A possible improvement is to devise a way so that the shower knob is more intuitive—users don’t have to turn in the direction of the cold water label in order to get hot water, for example—or add separate instructions on the side to facilitate the users’ interpretation of  how to use the object.

[wu-julia-blog]

Post #3

LinkedIn is one of my most frequently visited websites, and I also really enjoy using it as a professional tool. However, one aspect of its user interface that I have always struggled a bit with is its layout when I click on “Profile.” As soon as I click on that button, I am taken to a page to edit my profile without even seeing it entirely first. In “edit profile” mode, a user has to scroll through the clunky, bulky sections for each job before they can find the right experience to edit. Furthermore, if a user hasn’t seen their profile first, it is unlikely that she/he will know what and where to edit.