Course blog

This week’s readings really helped me better understand what user experience design really is. I have a friend majoring in computer science, and he was always telling me how important UX design skills are in today’s job market, and that it is worth learning. I can see why now! Employers are always looking for new ways to make content online more interactive and build engagement with their users.

I visit multiple websites every day because I’m constantly reading random articles that I see shared on Twitter/Facebook or links sent to me from friends and family. I’ve had my encounters with really good websites with amazing user experience design, and others, not so much. Often, I stay away from returning to websites that I found have terrible user experience design.

One of the things I automatically consider to be a bad user experience design involves videos on the page. I love watching videos. I would rather watch a video than read an article most of the time, but when a page requires me to watch a 20 second advertisement before being able to move on OR automatically playing an unrelated video next to an article, it turns me off as a user. News websites tend to do this a lot. I understand this can be an advertising situation, but I feel like there can be better ways to incorporate advertisements onto a website. The Guardian used to do this a lot, but they recently updated their user experience design to be much better than in the past.

On the subject of videos, they have become a really important form of multimedia that is becoming more commonly used in websites. It’s one of the best forms of communication in today’s age. And also, it’s really important to think about how multimedia is presented on a website. I think Ben Shneiderman’s, “Eight Golden Rules” made me think about how important it is that multimedia follow these golden rules. Because you are adding more elements and structure to the website. Therefore, whoever is designing the website must pay attention to consistency and ease of using the site. I almost feel as if there should be a 9th Golden Rule that pertains to how the page is designed for multimedia. This is especially important now as websites become more and more interactive and complex as different elements are incorporated into the website. As Jesse James Garrett mentioned in his, “Elements of User Experience” presentation, user design is all about the human experience. Whenever I encounter sites with bad use of video user experience, it ruins it for me.

Source: http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

http://www.engadget.com/2014/10/02/evernote-web-client/

http://blog.evernote.com/blog/2014/10/02/new-beautiful-evernote-web/

Garrett defines user experience as “the design of anything with human experience as an explicit outcome and human engagement as an explicit goal”. This was an interesting shift for me as most of class has been covering aspects of machine learning and the limitations of communicating unstructured data to computers that lack the emotion, sensitivity and empathy of humans.

User experience, on the other hand, brings the viewer to the forefront. I enjoyed his breakdown of the structure of contemporary vision into the different layers- surface, skeleton, structure, scope and strategy, with the surface being the most concrete and strategy being the most abstract.  Expounding on the necessary qualities for good design, he also urges the need for designers to understand their product’s “emotional and psychological context of use” to inspire passionate connections.

This has become a pertinent concern in fields of computer science and app development, and most developing companies seek UI/UX designers who are able to translate the functions of their companies to technological devices and web applications. A recent update was Evernote’s newly redesigned web interface, which makes the process of notetaking more streamlined and expedites the process of note taking on a tech device. As opposed to a desktop app, the “interface fades away to showcase your thoughts” and “re-emerges” when you need it. The app also has the ability to guide you “to the content you’re looking for”. Rather than an appendix or secondary attachment, it has integrated itself to become a “destination for the creative mind” that simulates the interconnected space that probably sits between our ears.

While it often appears that a product’s needs govern its design, Evernote seems to have demonstrated that a good design alone is capable of rethinking and even dictating a product’s function given the capabilities of technology. This inversion has created interesting results, where several startups are focused on simple ideas that are executed thoughtfully and resourcefully. The idea of note taking is neither new nor revolutionary, but the design’s ability to engineer choices with underlying user psychology means that UI/UX is no longer a slave to the product in that it requires strategy defining a story- it embodies rather than merely represents the very personality of the product.

This makes me curious about skeletons that lend themselves to easy use and manipulation- take Kickstarter for example. As a company whose product is its service platform, Kickstarter relies heavily on developing an interface that is user-friendly, and flexible enough to allow different product creators to market their products. Given the competing needs of users to market their unique products in different ways, I am curious to know what their web designer was thinking given that their product was such a complex intangible i.e. to accommodate as many products as possible.

On a personal note, I cannot be any more excited to learn about User Experiences in class, especially this week.

As I have noted on an earlier post, I built my experiences as a (social media) marketer and a brand manager with a focus on analytics and design sense–and although companies (especially startups in early stages) that hire me may find it efficient to have a go-to person for small tasks from flyer design to high-level business strategies, on an entry-level job seeker and her co-workers’ end it may make things more difficult to collaborate because I would get overly picky about design details and even programming details with the limited amount of knowledge I have. To subsidize the frustration for both parties (me vs. designers and engineers), I started learning the basics of design software to 1) make things myself and 2) get my ideas across in a more efficient style; and after a little over 1 year of slow development from drawing mock-ups and wireframes on paper and making flyers with Microsoft Publisher to designing websites, company logos, and mobile app designs on Photoshop and making brochures on InDesign, I can finally say that I feel comfortable being called a graphic designer.

Just earlier last week I began working my current startup’s mobile app design and website in collaboration with an outsourced UI/UX designer, and faced the same dilemma again: me designing a product as a brand manager and product developer while having little to no experiences in UX design made the communication quite complicated and inefficient, more so because our designer wasn’t in-house. I started interviewing friends who work as creative directors or UI/UX/Graphic designers to figure out the difference between a general designer and UX specialized designers, and upon finally understanding that what I have been designing wasn’t only based on making products look pretty but also on how users may use it with an easy, time-saving, and ever-interesting experiences, and that exactly was the fundamentals of UI and UX. And I realized that it was easier for me to understand the ultimate goal of creating a better user experience based on my studies on analytics–where you as a marketer or web developer must always measure the number of visitors, number of clicks, which SEO worked, which blog posting your audiences shared or liked the most, and minimize the bounce rate, all based on how the users may perceive your website, mobile app, or social media platforms.

Last weekend between working on the website landing page design, I was researching a career as a creative director or a communication designer. Although it seemed that it was exactly what I was looking for and that I was close to being on a right-ish track (despite the fact that there is no ‘right’ track for this job, according to successful creative directors and brand designers), I still need to learn and build experiences in UI/UX among other skillsets, hence the excitement for this week’s course materials.

As explained in Jesse James Garret’s “Elements of User Experience”, UX isn’t limited to websites or mobile apps (although the term became more popular with the emergence of the screen devices) but has been around us this whole time in forms of magazines, machines, and just about anything that we as humans experience. The key is to understand the needs that exist and how to efficiently solve that problem with your product. UX isn’t only about the aesthetics of the product, but also the usability and interface.

Preliminary mobile app design from last week for a 3D printing startup company

As a loyal user of Adobe programs for years now, I have become fairly adequate in using programs like InDesign, Illustrator, and Photoshop. Adobe offers more useful programs like AfterEffects, Lightroom, Dreamweaver, and Audition, but I find that their top three essential programs for a graphic designer would be the first three mentioned earlier. While going through the short and sweet list of Ben Shneiderman’s eight golden rules of interface design, each rule seemed to bring back flashes of the programs. The majority, if not all, of these golden rules are applicable to the construction of Adobe programs. The popularity of Adobe programs usage definitely is based on the merit of their well designed user interface. Since I am most familiar and comfortable with InDesign, I decided to run through Shneiderman’s rules as a sort of check-list to see if the program fulfilled his guidelines. First, the consistency of the language and terminology used within InDesign is definitely consistent not only within itself, but also carries over into Illustrator and Photoshop. However, users of Photoshop will find that although all three programs share terminologies, the process of executing an action is varied. We can compare an example like if we were to drop in an image into InDesign and Photoshop. In InDesign we can easily crop and maneuver the image to whichever size we would like without damaging its quality and original image size. Photoshop makes this process a bit more hidden to the user meaning that the user will have to actually change the image size, calling for a longer process. Although between the programs the language and actions may not be consistent, I think that each individual program is well-designed in terms of the user interface. The challenge for Adobe would be to better connect the consistencies between these programs so that the user can easily transition into each program masterfully. Shortcuts are readily available within Adobe programs and are clearly labeled next to each tool for future reference. These shortcuts are definite help for advanced users and lessens the amount work time. The informative feedback is fairly consistent and frequent, but I think the responses can be more simplified and helpful. The messages are usually a bit vague and uses terminology that would not be familiar to a beginner user. The sense of closure in Adobe is acceptable, but it would definitely help if the program utilized more sounds as a part of their feedback. Usually it only responds with a error sound if I do something wrong, but it might be worthwhile to implement some sounds when you do something right. Error handling is fairly simple in InDesign and users can easily utilize layers or keyboard shortcuts to undo a certain action. Adobe is definitely given less credit than it deserves as an interface for highly critical designers. I always hear designers complaining and even cussing out the programs while using them, but in the end they make great work through Adobe. I think that Adobe has done a fantastic job in managing to brand their identity so strongly, while still keeping the user interface design objective as possible. When I open up InDesign, I only see a blank canvas surrounded by tools. The aesthetic of its design does not inhibit me from creating my ideas. I think this is an important factor when it comes to user interface design, especially for an interactive system developed for users to create and design projects in.

Interface design is a field I am interested in pursuing after graduation, so this week’s readings struck close to home. In his article “‘So the Colors Cover the Wires’: Interface, Aesthetics, and Usability,” Matthew G. Kirschenbaum describes the role of interface in past, present, and future (digital) humanities work. I have always looked at interfaces from a designer’s point of view so it was interesting to read about their applications in the context of digital humanities scholarship.

According to Kirschenbaum, one of the biggest challenges of interface design is that it’s under-appreciated. “Donald A. Norman writes: ‘The real problem with interface is that it is an interface. Interfaces get in the way. I don’t want to focus my energies on interface. I want to focus on the job’ (2002: 210). Nicholas Negroponte holds that the ‘secret’ of interface design is to ‘make it go away’ (1995: 93)” (Kirschenbaum). I agree that the best interface fades into the background. Interfaces mediate between content and user; the best interfaces simply this process and make it easy for the user to access content, navigate through it, and interact.

One of my favorite interfaces in recent memory is the site UI for Designspiration ( http://designspiration.net ). The content of the site (images) are stacked in a grid. They are displayed by date. Typing anywhere on the screen opens a large search box that fills the display window. The user can also search by up to 5 colors. The site navigation (and ad banner) is pushed to the left side of the display window, out of the way of the main content. The interface doesn’t distract from the content flow; instead, it aids the user’s search and directs to other less important elements of the site. The white space also works to unify the diverse range of colors and forms present in the images.

However, Designspiration’s UI is not perfect. There are several instances when the interface bends and breaks to reveal it’s clunky skeleton. Responsive web design is a growing trend that allows site content to flex to fit a variety of screen sizes (desktop and mobile being the two biggest categories). Designspiration’s grid is not responsive. When I try viewing the content in a smaller screen, the content is cropped and gives way to the chrome of the browser. The site is at it’s weakest point when the interface draws attention to itself or competes with the content/user goals.

This is an example of a poorly designed user interface. A good interface is described “In the Elements of User Experience by Jesse James Garret”, where an interface design is compared to the process of making a story and as a story itself. “Strategy, scope, structure, skeleton, and surface” are all the layers of an interface. This is comparable to the fleshing out of a story. To take Garret’s comparison further, a book, the reader, and the writer are the three agents of engagement with a story. And the interactions of an interface’s design are among the product, the world, and the user. The design of an interface is shaped also by its technology. An example given by Garret is a magazine. The design of an interface for a magazine on a tablet will carry the same characteristics of an actual magazine. Therefore, the decision that the designer of an interface makes is based on the “objective of a product” and the “needs of an user”. Also, the content of the interface has requirements and “product specifications”. Like making a story, the author must decide the type of language suited for explaining information and foresee what the reader will already know. The structure of an interface tells how the user “makes sense” of the world. Therefore, a good interface is easy to use and understand.

The relationship between the user and how the user understands the world is mismatched in United’s user interface. According to rohitbhagarva.com, “the online Check-in for flights is increasingly one of the most common things that travelers are doing before heading to the airport”. However, the user interface of United only gives the user to print their boarding pass. This, according to rohitbhagarva.com, is confusing to people who might want to check-in, but not print their boarding pass. Also, there appears to be no structure to how the options are arranged. How the user makes sense of the world is again dismissed when the login is placed where it is hard to find, when it is usually the first option that a user would seek. The example of an interface for a magazine given by Garret follows what a person would expect of how a magazine would be read. United’s interface has a mismatch of how a traveler books a flight in person.  The actual concerns of a traveler are misrepresented by the interface. Information, therefore, is misrepresented in United’s user interface.

Work Cited:

http://www.rohitbhargava.com/2013/03/14-lessons-from-the-best-and-worst-websites-in-the-travel-industry.html. image

Jesse James Garrett, Elements of User Experience. http://www.slideshare.net/openjournalism/elements-of-user-experience-by-jesse-james-garrett

After going through the assigned readings for this week I found “The Knotted Line” to a be a very interesting website. As the website describes, “The Knotted Line is an interactive, tactile laboratory for exploring the historical relationship between freedom and confinement in the geographic area of the United States”.  After launching the tool the website becomes an interactive timeline with a very peculiar layout. The simple visualizations become greater in detail as you pull apart the black line and find new pictures underneath. Sometimes there are dots to indicate a significant event along the timeline, which provides further information when clicked on.

Another feature of the tool was including a way for viewers to not only passively view the timeline but participate as well. While searching for specific events, questions at the bottom of the screen would pop up and allow viewers to answer them. These questions largely consisted of injustices and instances where rights were violated. Furthermore, individuals could also see answers by others and hear about a wide array of experiences.

Among the other unique features of “The Knotted Line” I found the constant audio to be very obtrusive. The sound was both unpleasant and strange. There was no explanation on the website to detail its significance. While navigating through the timeline, the noise would react and become even more unpleasant. My only guess for the reasoning behind the audio was to create a setting that was dark and emphasize the ugliness of injustice in a country so determined to represent righteousness.

Unfortunately, no other source came to mind after navigating through “The Knotted Line” website. I found the features and the overall visualization to be quite unique. It did not look like a typical timeline yet had the fundamental aspects of one. Additionally, the experience was far more immersive than any timeline or visualization tool we have used throughout the quarter. Therefore, I would just like to point out how unique we can choose to represent the data we gather. We have looked at various visualization tools that all function fairly similar and appear quite basic. “The Knotted Line” exemplifies how a timeline can be turned into something interesting and even fun. The creative element provided a breath of fresh air and an enjoyable experience.  Hopefully this level of detail will be replicated in further data visualizations to deter away from the stale and even intimidating representations that are often seen.

Sources:

1. http://knottedline.com/

Having worked at an app development company as a UI/UX Design intern over the summer, I found the “Elements of User Interface” interesting as it comprehensively broke down the design process involved. The visualization also largely helped to explain the principles of an interface and how they were linked. The reason I love the diagram he uses is because in a company, the vision behind the function of an application and how it is designed are usually designated to different people, which often creates a divide in how the app is envisioned. This usually does not translate well in an interface as it violates rules that Schneiderman brings up in his “Eight Golden Rules” such as consistency. This is why generally there are only a few senior designers who push their vision of the product while others in the department work to supplement the structure they have established.

Another part of the reading I found interesting was Kirschenbaum’s account of balancing form and function within an interface. TextArc, which is the example he uses, is described as an analytic engine which compares novels and texts. However he explains that its success was due to the interesting visuals the tool used to present information. Set in a contemporary context, I would argue that youth culture (especially digital natives) heavily rely on aesthetics more so than function as a means of judging whether or not to use an interface. The increasing popularity of using icons and images within GUIs is an example of our generation’s need to condense and quickly identify information through visuals as opposed to text. This is evident through changes in the organization of information through the years through operating systems such as Windows. If we look at the images we can clearly see that smaller graphic icons have been replaced with larger objects which make it 1) easier for a user to interact and select options, 2) aesthetically pleasing as information is given space and neatly separated from other elements. A nicely designed interface also speaks for itself- any modern task has about 50+ methods of using technology to be completed, therefore marketers have to rely on presentation, style and aesthetics to attract users as well as differentiate themselves from other competitors.

Today, the generation gap between grandparents, parents, and children are largely blamed on technology. Older generations have coined the phrase of many younger generations as, “mindlessly surfing the web,” or spending too much time on our phones, instead of reading a book or engaging in activities. Yes, it is important for people especially adolescents to get out of the house and do something other than stare at a screen all day, however, this bad stigma takes away from the true art in technologies like web and app design.

Why is our generation so drawn to the next new-hit app or a new website that just arrived on the internet? Some people would say because that is just who we are. Always wanting something new and exciting, but how about because these new inventions, if you will, are incredibly user-friendly, easy-to-use, and personal. The study of human interest in technology has now shifted from asking the question of how can we get kids off the computer or phone? To how can we make these technologies more efficient for every generation to use as tools in their lives?

Web and app design is the answer. Shneiderman’s Eight Golden Rules of Interface Design and Jessee James Garrett’s Elements of User Experience, reminded me of this conflict because of how effortless it is to ignore the craft and plan of web design. Garrett poetically states that every design tells a story. It is composed of a surface, skeleton, structure, scope, and strategy. The surface is what the user sees, the skeleton is the information and navigation design, the structure is how the information is architected, the scope is the functional specification, and the strategy is the products objective. I like how Gerrett made his presentation by concentrating on certain terms such as User Experience. It really is an experience for people to travel through different systems and connect information by human engagement.

What stuck out to me in Shneiderman’s article was when a website becomes more frequently used it is important to, “reduce the number of interactions and to increase the pace of interaction.” This made me think of how annoyed I get when I get the wrong room for a midterm or office hours and have to go through my.ucla.edu, then sign in, click on my class, log in again on CCLE, click on my syllabus, and finally find what I am looking for. Enabling shortcuts allows users to easily access the pages they need to get to.

Another important rule that stuck out to me was how one must design the system so users are, “the initiators of action rather than the responder.” This made me start thinking about app design. Users want to feel in control. This brings be back to my point I made in the beginning of me post about why people are drawn to certain apps. When the designer puts the user in control to take initiative action it makes the app or website more personal and more likely the user will become a frequent user. These articles helped me to better appreciate websites such as Amazon and Yelp, as well as, apps like, instagram or venom which draw users based on their quality of design and explicit goal.

This week I explored “The Knotted Line” website. I thought the design was very interesting and the interactivity was key part of my experience. The method of accessing the information relates to the information presented. The timeline presents the history of oppression in America, especially how it relates to education, housing, and prison systems in the more modern era. Sometimes it was a struggle to get the blurb to pop-up which is a strength of the website not a weakness. I think this parallels the difficulties present when trying to access information while oppressed. Sometimes I also had to access a previous pop-up before the next one could show up, which re-enforces the idea that knowing the historical context and previous events is important to understanding our current social climate.

The About section describes how to use the site but if you want to access the background the the project you have to click through one of the blurb pop-ups. Because this is a timeline with imagined future events I would like to know when this project was created. A great strength of this site are the pages you can access once you click through one of the blurbs. Each item on the timeline is listed is chronological order and you can also browse by theme/subject matter. The homepage is a piece of artwork in itself and the “back page” is a great tool to expand on the information presented on the homepage, especially if you missed some items on the timeline.

When I explored the timeline I immediately thought of California’s recently approved Proposition 47. Prop 47 reduces the classification of most “nonserious and nonviolent property and drug crimes” from a felony to a misdemeanor.  Because “The Knotted Line” was created before 2012, the approval of this proposition is not on the timeline but I’m surprised that an equivalent is not present in the “future events” part. The 2016 legalization of marijuana node could be an equivalent, especially because of the focus on the decrease in drug arrests. Prop 47 covers more than drug-related crimes and will lead to a decrease in the number of people that have to go to prison for crimes committed. The “future events” on the timeline focus on prison reformation as a major point and it also focuses on shifting laws that also improve the entire justice system. This is important because it shows that “The Knotted Line” is looking at America’s history of oppression from many different angles and doesn’t consider prison reform as the ultimate solution. Instead it’s a combination of factors that effect the status of our freedoms.