Week 9: 3D all around us

I am excited that we get to 3D modeling this week as I think it is an incredibly powerful and appealing tool. Since I intend on using Digital Humanities for archaeology, I believe that 3d imaging and modeling is a great way of bringing the past back to life. Some good examples might be an app called Sites in 3D which is a collected system of images from mosques, tombs, palaces, and other areas from around Western Asia and Europe. Digital Roman Forum is also a good learning tool as well as any video game which utilizes 3D imaging. Even as children playing Sims building and creating in the digital world has always been appealing. In cases for archaeology I have done 3D scanning of artifacts as well as 3d photography where pictures are taken from every angle and compiled in a computer so that the artifact can constantly rotate and pose a new view.
I appreciate digital recreations because it gives an interactive method of learning for visual learners. It is far better to see something in person than to read about it in a book and since we cannot take people to other countries to learn, it is necessary to bring the places to them. In the models, data can even be built in to create interaction with the certain parts of the model where texts or media can pop up. This is why I think video games are so appealing to the current generation. Just as “Meaning in Motion” states, these projects can be incorporated into larger databases like Google Earth to be utilized by the general public. Another example of this would be Digital Karnak which is incorporated into Google Earth and geocoded over the site itself. Included are 3D models of each building and a timeline that when altered, shows each building being constructed or moved. On the website itself you can take tours through the models and view the architecture as it was in the time of its creation (as interpreted by archaeologists).
In my opinion, there is a large future to this sort of work especially in the way of education. To younger students who are unable to read, 3D models will also create a attraction to learning and a desire to interact with worlds other than the one immediately around them. While nothing may ever take away from the necessity of reading, viewing places and objects in whole, visually will help to create a better and more comprehensive study.

Week 8: Mobile Apps with Good and Bad User Interfaces

These weeks readings on interaction design and interfaces makes for my favorite week so far. As a designer, I knew exactly what each author was referring to through my previous knowledge of mocking up websites. However, the collection of readings for this week went farther than just me being able to relate personally because they were written through a digital humanities point of view. In “‘So the Colors Cover the Wires’: Interface, Aesthetics, and Usability”, Matthew G. Kirschenbaum quotes Donald A. Norman, who says “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”.

I always assumed that interfaces were a tool for users to navigate through complicated information to get what they want, not something that disables them. But Norman is correct – interface is often a highly recursive phenomenon. The secret of interface design is to “make it go away”, not to further complicate matters. Shneiderman’s “Eight Golden Rules of Interface Design” outlines how to create a successful interface design, and although the article does not mention this, one of the main goals of the eight rules is to “make it go away”.

Old-facebook

Remember when Facebook’s mobile app used to look like this? Although it’s not the ugliest interface I found online, it is a perfect example of bad UI/UX. As a frequent Facebook user, I found myself only using a few of the options in the old homescreen – the news feed, my profile, and messages. Rarely would you use the rest of the options, and one of these reasons was because they were accessible through the options I did use. Instead of being able to easily switch from your news feed straight to your profile, you had to return to Facebook’s home menu. An extra click, an extra few seconds of time wasted.

instagram-fix

Facebook has since redeveloped their mobile app into a more fluid, user-friendly version, but I’m not going to use it as my example of good user interface. Instagram is my favorite mobile app, and its simplicity might be why it wins over every other mobile app. You have five options – and they’re listed permanently on the bottom of your screen so you can move from option to option. Your newsfeed is what you land on immediately when opening the app. Next in your toolbar is a search option, the button to take and edit your picture, your notifications and friend requests, and then your profile. That is its structure, which embodies its scope and strategy in the simples of ways by being so bare-bones (Elements of User Experience by Jesse James).

More often than not we use bad interface design. We get frustrated at the website we’re on, the navigation device in our car, or whatever it is but don’t know what we’re getting frustrated at. The point of design is make these problems less of a problem, which is why interface and user interaction design is so very important, especially for what the future has in store for us.

 

Week 8 – Automatic Playing Videos. Please Stop.

Photo Credit: econsultancy.com
Photo Credit: econsultancy.com

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

User Experience in the world of entrepreneurship- Evernote and Kickstarter

 

evernote ui

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.

Note as a beginner in the field of UX

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.

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

Week 8: Adobe InDesign User Interface

Screen Shot 2014-11-24 at 1.38.52 PM

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.

W8 – Interfaces and User Experience

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.

 

Screen Shot 2014-11-24 at 1.21.03 PM

 

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.

User Interface and Natural Perception

 

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

 

Week 8: Immersive Timelines

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.

knottedline

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/

Invasion of the Icons

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.

Windows 95- Text based menu options
Windows 95- Text based menu options
Windows 8.1- graphic start menu
Windows 8.1- graphic start menu