Everyday 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. 

[rungeinterfaces-blog]

Post #10

This week I thought about the three levels of design and what level some of my favorite products appeal to. I found reflective design the most interesting, because I think it is one of the most powerful. It has the ability to make people purchase something they may not necessarily need, or pay far beyond what the product is worth. A concept that is closely tied in with reflective design is brand perception. Lulu lemon, for example, does an excellent job of portraying their brand in an attractive way. Their entire company is built on reflective design, and whenever a customer sees a pair of yoga pants, a mat, or a bag with the lululemon icon, they are reminded of fitness, fun, and youth. Lulu lemon has branded themselves so that any customer truly believes that if they purchase something from lulu, they are not just purchasing a pair of pants, but a lifestyle. The association of a pair of pants being from lulu lemon increase the value of the pants, purely because they are associated with fitness, happiness, and overall well-being. 

[everydayinterfacebook-blog]

It’s true--the key to Lululemon’s success is the way their design appeals to consumers on a reflective level. They have equated a lifestyle of fitness and health with all of their products. In addition to being appealing on a visceral level (their clothing is simple, flattering, and more elegant than any workout gear that has come before it), successful on a behavioral level (their clothing and gear are actually functional), Lululemon’s reflective design promotes a lifelong goal of mindfulness, fitness, and positivity. In selling the idea that you can always continue to grow through the reflective design of their products, they will continue to attract long-term customers. 

[everydayinterfacebook-blog]

Post #9

I am a big fan of the New York Times, and I particularly enjoy reading their content online. That being said, I do think their desktop site has room for improvement. In terms of layout, the homepage is obviously modeled after the front page of their newspaper, which makes sense in terms of the user’s familiarity with the format of a newspaper. The information displayed “above the fold” on the desktop site feels natural from the user’s perspective because it so closely mirrors the original version of what they’re seeing. However, the format is not adaptive. When the user narrows the width of their browser window, the user then has to use the bottom scrollbar to view all of the information on the page. The columns and photos are not responsive to the user resizing the screen. Additionally, this format is likely to leave the articles posted on the right side of the picture getting fewer views than those on the left. Since people who read in English do so from left to right, users are likely to skim the articles on the left side of the photo and then scroll down, rather than look to the far right of their screen. 

[always-late-lucy-blog]

Post #9

As Jeff delivered his presentation on Layout and responsive layouts, I was reminded of the Brown Canvas website. Most of my courses make use of Canvas to post grades and assignments, so I often have to check it. However, Canvas makes no attempt to implement responsive design techniques for mobile users. I am left with an interface with tiny, unreadable text.

To remedy this, the interface should move around the location of the left and right columns when the screen width is changed. Instead of focusing on vertical section columns, mobile-friendly designs should make use of horizontal section rows that users can naturally scroll through on their devices. This would leave more space for the main content, displayed in the center.

[everydayinterfacebook-blog]

I absolutely agree with always-late-lucy’s post. While canvas has a mobile app that is fairly easy to use, I deleted it from my phone because I ran out of storage space. Website developers shouldn’t rely on users to download their mobile app. If they did studies of user personas, they’d quickly learn that many of their users want to look at their sites on mobile devices, yet don’t want to commit to installing an app to their phone. Instead, they should create a responsive interface or mobile-specific site with adjusted proportions. On a phone, any page on Canvas is almost all whitespace, and the columns are far too narrow relative to the total width of the screen. Furthermore, the text is too small to be legible. Without some serious design changes, Canvas will continue to be almost unusable on phones without the mobile app. 

[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. 

[everydayinterfacebook-blog]

This is an excellent point. Additionally, UPS reinforces the idea of brown boxes not only through their logo, but also through their brown, boxy trucks and their classic slogan, “What can brown do for you?” The color brown has become inextricably linked to UPS for the American public. It probably helps that Brown is not a very popular color, so aside from our beloved university’s, they are the only corporation that comes to mind when I think of the color brown. UPS designers were very clever to choose the color brown and remind their users of the idea of brown boxes in so many different ways. 

[everydayinterfacebook-blog]

Post #8

I know I am not alone in struggling with difficult-to-open plastic packaging. Most thick plastic shell packages are terrible interfaces. There is no obvious tool to open them. Your hands? Useless against even the thinnest of these packages. Scissors? Will twist and break before they’ll help you open one of these packages. Knives? Useful at breaking into one of these packages, but not able to do all of the work for you. You’ll most likely have to cut in the surface, then stick a finger inside and try to tear it open without making your hands bleed. While they do a phenomenal job of protecting their contents, these packages are a nightmare for any user trying to open them. They are particularly horrible interfaces because they do not offer the user any affordances. Why don’t they include a thinner area, where the user could cut along a perforated line? Why does the plastic they seem to all be made out of stretch and bend instead of tearing cleanly? These interfaces are low in learnability, memorability, and efficiency. I find that a tool that helped me previously may be totally useless in opening a very similar, yet slightly different plastic package. I have to improvise each time I try to open one of these. Luckily, more manufacturers are moving away from the nearly-impossible-to-open packages I’ve described to packages with more affordances for users, like the one below with an “easy open” tab. 

[justuandi1300-blog]

Post #5

The online menu for the Ratty is not very user-friendly. The daily menu is presented as a table, where the columns are the four different food stations.

1. Why list food by station? Most people walk around the Ratty and see where to find which item – all they care about is what is on the menu in the first place.

2. Why list everything? A majority of the available food is served every – they should highlight the daily specials. Currently, new items appear in random spots which is not very learnable.  

3. Why is there no overview between dining-halls? It is very hard to compare the offerings of different halls, because this requires users to leave the current page.

It seems like a good user study would have revealed all three of these problems.  

[everydayinterfacebook-blog]

I understand why the designers of this site decided to organize the information by food station, but I agree with all of justuandi1300’s other points about the Brown Dining website. It makes sense to have things ordered by station, so vegetarians or people who normally prefer the vegetarian options, only need to look to the Roots and Shoots column. All of the food that is available every day should not be presented alongside the daily specials. Instead it should be somehow separated visually from the rest of the information, so regular users of the site don’t have to waste time scanning all of the offerings, looking for the new items. As justunandi1300 says, this is not learnable, nor is it efficient. It would be nice if instead of being able to view all of the daily offerings for a single dining hall on one page, users could instead view all of the offerings across campus for a given meal on a single page. The designers of the site should have spent more time thinking about their user personas. 

[everydayinterfacebook-blog]

Post #7

The app pictured above is called 30/30. It is a task-managing app designed to increase users’ productivity in their everyday lives. I love this app because it upon opening it for the first time, the user is presented with a list of “tasks,” which teaches them all of the gestures they need to know in order to be able to use the app. Additionally, when creating a task, the three icons on the center have highly self-evident purposes. The +/- feature allows you to customize the length of time you want to allot yourself for the task, and the lock allows you finalize your edits. The play button triangle is an image that all modern-day users of smartphones are now familiar, and is synonymous with start. The interface for creating and managing tasks is mostly intuitive and any gestures specific to the app are explained in a straightforward way that allow the user to gain practice and familiarity with them. 

When the user begins a task, they are presented with a timer, and the opportunity to delete the task, indicate that they have completed it, or come back to it later. The interface has high learnability and the gestures are easy to remember after you’ve performed them a few times, giving it high memorability as well. Creating a task is simple, and easy to replicate, so this app has a high efficiency value for regular users. 

[everydayinterfacebook-blog]

Post #6

Exhibit A:

Exhibit B:

In this post, I will explain why I am such a huge fan of Exhibit A over Exhibit B. Both are relatively simple tools used to extract the juice from a lemon cut in half. However, A’s interface makes it very apparent to the user how to use it. Its geometric form is full of good affordances. The two parts connected by a hinge make it obvious that the user should pull top and bottom apart. The lower cavity is a half sphere that shows the user which way the cut lemon should be oriented when it is inserted. When the user closes the handles, there is a gap between them that signals to users that they are to squeeze them together in order to juice the lemon. From start to finish, the interface makes the process of juicing the lemon highly intuitive. 

Exhibit B, on the other hand, has an ergonomic grip that makes it clear where the user should grab it to use it. However, it does not have affordances to signal whether the user is to poke or twist, and which way to orient the tool and the lemon with respect to the bowl to catch the juice. Using exhibit B almost always leads to seeds falling into the bowl because the interface doesn’t afford the user with hints about the best way to use it. It is less effective, less efficient, and less intuitive to use than Exhibit A. 

[justuandi1300-blog]

Post #6

Typical mechanical pencils allow the user to extend the lead by pressing on the eraser on the top of the pencil. This makes mechanical sense – the only way to extend the lead is to push it downwards. But it is not a good user interface, as it leads to to frustration and wasted lead, when the user accidentally extends the lead while erasing.

Today, at the Brown Book Store, I discovered a superior type of pencil. It allows the user to extend the lead by pressing on a button on the side – far away from both the eraser and the actual mine. This prevents both mistakes and getting the user’s hands dirty. Note, that the UI is good because it shields the pencil’s inner workings from the user to provide a more intuitive UI – just like Cooper wants to hide the inner workings of the file system – in order to provide a better user experience.

[everydayinterfacebook-blog]

I completely agree with this post. I cannot tell you how many times I have accidentally extended the lead in a mechanical pencil while trying to erase something. Another issue I face with traditional mechanical pencils as well as the type pictured above is that if I wear the eraser down too much, it becomes too short to remove and then I can no longer add more lead. A mechanical pencil with no eraser and no lead has lost all of its functionality. While justuandi1300′s pencil above is definitely more user-friendly than a traditional mechanical pencil, my mechanical pencil of choice is the one below. In addition to having a button on the side to extend the lead, this pencil does not have the same issue with the eraser becoming too small and preventing the user from adding more lead. The whole colored top of the pencil is removable, so even if you use the entire eraser, you will always be able to add more lead, ensuring that the pencil never loses its core functionality. 

[everydayinterfacebook-blog]

Post #5

I absolutely love apps that make my life easier when I travel. One such app on iOS is Passbook. Amtrak and all major airlines now allow you to add your mobile boarding pass to your passbook for easier access. Before passbook, but after the advent of mobile boarding passes, I remember either having to take a screenshot of the pass and then go into my photos to look for it to show it at security or my gate.  

Passbook was clearly designed with the user in mind. Within 2 hours of your flight departure, your pass appears on your lock screen, allowing you to access it with a single swipe whenever you need it. One clever update to the app causes your phone’s brightness to automatically go up to 100%, so you pass’s barcode or QR code is guaranteed to be bright enough to be read by the scanners at the airport. Passes are sorted by type, and travel passes are arranged chronologically. The Passbook app has a great interface because the people designing it put in a variety of features to benefit the traveler persona (often hurried, always carrying luggage). The app is very streamlined and easy to use, mostly because  it doesn’t require much input on behalf of the user. 

[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

[everydayinterfacebook-blog]

The worst microwave I’ve ever had to use was actually an industrial strength microwave that was, ironically, extremely effective in warming my food. The interface however, made absolutely no sense to me. It had buttons for 1-9, but instead of being able to input time in MM:SS, or even an express cook option like the one described above, this microwave had a  completely unique mapping system: 1 (10 sec), 2 (30 sec), 3 (45 sec), 4 (1 min), 5 (2 min), 6 (3 min), 7 (4 min), 8 (5 min), and 9 (6 min). Only after using this microwave for MONTHS did I come to learn this. And even then, I would frequently mess up the time I wished to input. How does the number 5 signal to the user that  the microwave is going to start cooking for 2 minutes? It had no affordances for users to infer the time corresponding to a given number key. This interface had extremely low learnability and memorability because it was so counter-intuitive. 

[everydayinterfacebook-blog]

Post #4

I’m not exaggerating when I say I have been waiting YEARS for Starbucks to allow customers to order ahead. Their mobile app has been a staple on my iPhone for the last three years or so, as long as it has allowed users to pay with their phones in store. This is a very useful feature, because it’s definitely faster than rifling through your wallet to find your credit card or Starbucks card. If you’re an average Starbucks customer, odds are, you’ve had your smartphone out the whole time you’ve been waiting in line anyway.

The new beta order feature makes every part of your Starbucks experience better. The app allows you to browse your recent orders, as well as popular menu items, including food. The tile format is aesthetically pleasing, the pictures are large enough that you can actually see what you’re getting, and it’s easy to scroll through. The feature allows you to browse by type of drink, or enter search terms. 

When you select a base drink, the interface allows you to customize your drink. The fact that the default option is presented in a different color makes it clear to the user that it is indeed an option. The arrows on the right indicate that they will take the user to another page where they will be able to change the default options. This interface is very learnable because it has affordances for first time users to see where they can change the default input. It’s an incredibly efficient interface because it stores users’ previous orders, including all customizations, and makes them the first to appear, so regular users don’t have to go through the same selection process each time they use the interface. 

[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!

[everydayinterfacebook-blog]

This is a problem with which I have also struggled. Tumblr can be great for only photos, or only text, but it is hard to integrate them in the same post. Before reading mani-askari’s post, I actually hadn’t noticed the + symbol to add photos! I was simply copying and pasting the image files into the text editor, or dragging and dropping them. The little + disappears as soon as you start adding text, so I don’t know how the interface is supposed to help you add photos to a text post. The interface’s efficiency and learnability could be greatly improved if they had an affordance for users to add other media to text posts after they begin typing. 

[everydayinterfacebook-blog]

Post #3

The old Brown Job and Internship Board (JIB), much like Brown 25 Live (see Post #1), appeared to have been designed 20 years ago. The website was updated approximately two weeks ago. While its design is much more modern and aesthetically pleasing, some critical features were not added to the new site, making it more difficult to use. Arguably, the most important piece of information in a particular job posting is the application’s due date. For some reason, the new version of the site does not always include this valuable tidbit of information. When you try to sort the postings by deadline, it shows you multiple pages of postings with deadlines that have long passed. Why are the old posts still displayed? In preview mode, on the far right you can see the date that the application was posted to the site. Does anyone find this information useful? Wouldn’t everyone rather see the deadline in this spot? When you click on one of these postings, only after searching around a bit, scrolling down, and looking at the right side of the screen do you see that “This schedule has closed.” There is no other way to tell that the deadline for the application has already passed.

Oh - but wait! Only after scrolling through four pages of postings sorted by deadline do you come across a helpful bit of information. “Apply by tomorrow.” This is great. However, the site allows you to submit an application up until 11:59 pm on the due date, so you cannot actually tell which applications are still open and have the earliest deadline. While the old site was definitely outdated, at least it was easier to use and displayed key information clearly, rather than making you hunt around for it. Unfortunately, the learnability and efficiency of the site have decreased since it was updated.

[rungeinterfaces-blog]

Post #3

Snapchat is truly one of the most frustrating interfaces I deal with on a daily basis. Even though I use it very often, I find myself struggling with some of the features. One of these features is the chat. First of all, the recipient of your chat gets a notification when you start typing, which is just weird. Can the recipient not wait a couple more seconds until the message is actually sent to get a notification? If I accidentally open an old chat with someone, are they going to get a notification that I am typing? Secondly, once the message is sent, it takes a while to actually be received. I will often get a notification that I have received a chat message, but when I open up the conversation it doesn’t appear immediately. Be careful here - because if you navigate away from the conversation, the message is actually deleted. The number of times I have received a message that I never actually got to read - countless. I believe there is some way to save the chats, but I have no idea what it is. Seems to defeat the purpose of the chat a little bit doesn’t it? Another frustration with snapchat is that it has very low learnability in general. Navigating from one page to another is not intuitive, and I often find myself clicking random buttons in an effort to do something that should be very simple. Snapchat does have a lot of good features once you learn how to use it, but its learnability is so low that a lot of those features aren’t actually discovered by many people. 

[everydayinterfacebook-blog]

I absolutely agree with rungeinterfaces’s post about the Snapchat UI. The Snapchat app used to be relatively simple and easy to use, but over the last few years, as they keep adding new features, it gets harder and harder to use. As rungeinterfaces points out, the chat feature is definitely flawed. There’s no reason for the app to send out push notifications if someone is only typing in a chat with you, and hasn’t actually sent anything. Additionally, as new features are added with each update there are no instructions in the app to tell you that there is a new feature or to explain how to use it. When I see a friend post a snap story with a new filter, I have to download the newest update, google “new snapchat filter” and then read an article written by a third party, explaining how to use the newest feature. Since Snapchat’s learnability is so low, I know I have no hope of figuring out how to make use of the new feature on my own. If Snapchat had quick in-app tutorials, more of its users would take advantage of its many features. 

[everydayinterfacebook-blog]

Post #2

One of my favorite iPhone apps, which I use multiple times a week, is Square Cash. The app is similar to the more popular Venmo, but allows you to instantly transfer money to others’ accounts, without them having to “Cash Out” and then wait 2-3 days for the transfer to process. Aside from this obvious benefit, I prefer this app because it’s interface is so clean and easy to use. The first screen when you open the app is the one displayed on the left in the first photo above. You enter the amount and then have two straightforward options: either request the money from a friend or send it to them. With Square Cash, I have never mistakenly almost sent someone $3500 instead of $35.00, which I do nearly every time I try to use Venmo. As you can see from the third screenshot, the interface makes the distinction between dollars and cents extremely apparent. The only other icons on the home screen are the clock, which shows you recent activity, and the person, which shows you your account info. Both buttons, while minimalist in their design, are accurate representations of the functionality they provide. Square Cash has done a phenomenal job stripping down the interface of their app to include what is strictly necessary and nothing more. Because it is so simple, it is incredibly intuitive to use.