I find that User Experience and User Interface are often used interchangeably. I was not even sure that I understood what the difference was. So I decided to do a bit of research on the internets and compiled a brief list describing each discipline. I know these are long lists. If you have some comments, please share with the group.
UX is the overall experience one has with a product or service, which can include a UI.
User Experience is how they feel when they look at the site, aka the broad scope.
The interaction itself
Addresses all aspects of a thing as perceived by a person
UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service.
UX-er is known as the primary user-advocate on a team
UX informs creative
Developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements
UX design is all the methodological steps that lead you to the conclusion on how to design the UI. They are responsible for how they feel when interacting with the interface or product.
Generally start by conducting user research and interviews. The goal with this is to understand exactly what the users’ needs are.
The wireframes are essentially the blueprints of what the UI designer will use to create the interface that the user interacts with.
One who designs the user experience for applications after doing user and workflow analysis, producing user-centered design artifacts such as personas, site maps, taxonomies, and wireframes. A UX Designer may also conduct usability testing on prototypes or finished products to assess the quality of a user experience.
UI is typically a combination of visual design (the look and feel) and the interaction design (how it works).
User Interface design is the part of the product that faces the user when he looks at the site.
A point of interaction
A means of communicating between a person and a system
UI (aka ‘GUI’) visual design is the graphical user interface of a software product/service
The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles.
The design of a GUI should be heavily informed and guided by the problems that were solved during UX process.
GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
Interaction Design is the grey area between UX and GUI design.
Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface.
Innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5
User Interface (UI) Design generally refers to the user facing side of any type of physical interface
A UI designer is responsible for everything that a user will see on the interface.
UI designer’s responsibility to understand what the users’ needs are. They must be able to arrange the interface in a simple way that allows for the best user experience.
One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.
UI Developer’s output is functional, testable, shippable code that lets users accomplish their goals when using an application. The UI Developer is also responsible for documentation that allows others to maintain their code.
A UI designer may have the ability to create interactive designs, icons, colors, text, and affect a number of other elements that solve problems dealing with direct interactions to the user. Those elements are fantastic tools to affect user experience but they are only part of the equation.
The very minimum:
Learn HTML & CSS. Learn Photoshop. Learn basic typography. Learn basic color theory. Learn about layout. Get a feeling for producing UX deliverables. Learn about usability evaluation methods. Learn the best practices for web design. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.
As part of my GluteninBeer app development, I wanted to create a story board. Please don’t judge me on my drawing ability! As I child, I was a pretty good illustrator. Now, as you can see, I am complete crap. Oh well….
But illustrating some ideas, in other words, getting them out on paper, is always a good idea. So I thought creating a story board would be a good step in the UX process.
I drew this by hand, first in pencil, then reinforced it in sharpie. The I scanned it in to Photoshop to clean it up a bit. I also added the color highlights in Photoshop. This will be part of a portfolio piece for the GluteninBeer app development
For CoCo’s redesign, I examined a number of website that CoCo said was similar to theirs, as far as the organization, not necessarily the design. It’s very helpful to see what other organizations that are similar to yours are doing on their website. What CoCo particularly liked about Homeboy Industries‘ website was the prominent “Donate” button that was on every page and was sticky at the top of the screen as the user scrolled down through the content.
It’s competitive analysis time! As part of any redesign, not only is it important to understand what your website is doing. It’s also helpful to see what other organizations that are similar to yours are doing on their website. For CoCo’s redesign, I examined a number of website that CoCo said was similar to theirs, as far as the organization, not necessarily the design. Here’s what Empower LA have going on at their website.
I wanted to create more than one persona since there are a few groups that use the CoCo website. So a part of my Community Coalition of South LA Taproot project, or better knows as CoCo I am working on some deliverables to accompany the project. Based another one of the stakeholder interviews I performed this week, plus additional resources that were provided by the organization, I came up with this fitting Persona.
As part of my Community Coalition of South LA Taproot project, or better knows as CoCo I am working on some deliverables to accompany the project. Based on one of the stakeholder interviews I performed this week, and other resources provided by the organization, I came up with this fabulous Shelia Persona.
Though these wireframes are not perfect, and I know that I still need to read the iOs developer handbook to improve upon the standards. I need to make my wireframes a bit more compliant to these standards. However, it is good to explore some visual options and get started by getting some ideas on paper.
First thing I wanted to do before tackling the Hollywood Walking Tour App was to observe how tourists do research or way find on the boulevard. I wanted to see how people navigated the area. As suspected, some tourists were holding up unfolded maps or looking at books. Some people were part of a larger tour group, being lead around by a hired guide. Some were standing to the side looking at a smart phone. Perhaps they were researching the area? And others were just wondering down the street checking out all of the starts on the sidewalk along the way.
As part of discovery for my Hollywood Walking Tour App, I thought it would be a good idea to compare other apps that are available on the market. Granted, I only looked at free apps. But I want my app to be free, so this really is my competition. I was really shocked and surprised how poor the apps were for apps concerning walking tours in Los Angeles, and specifically Hollywood. The Hollywood walk of fame is surely bar far one of the biggest tourist destinations in Los Angeles. And it is best seen of foot. So I was really disappointed in the apps on the market now covering this topic.
Below I am comparing several apps that either have to do with Los Angeles tours, walking tours, or a combination of both.
Though I never used to be of the “school” of sketching out my designs, I am finding that sketching out a few alternative ideas to a mobile or tablet interface is helping me explore some alternatives. Maybe it is because I am so comfortable designing in print, that I can just crate the layout in my head and execute the layout immediately. Mobile is a bit more foreign and new to me, so it is helpful to explore possibilities. Plus, with the ways that mobile and tablet are interactive and involve swiping and motion, they come with their own set of rules. The learning curve for interaction design is quite different than traditional print design.
For the Hollywood Walking Tour app I am now developing, I thought it would be a great idea to go to one of Hollywood’s biggest tourist traps, I mean spots. I spent a couple of hours observing tourists and talking to them about their traveling experience. Specifically, I wanted to see how people navigated the streets (Did they use a map or guide book? Or were they just wandering aimlessly?) and find out how they researched their trip to Hollywood. Here are some observations I made:
I am working through some Information Architecture (IA) for my Cal State Fullerton class. For the app in development, the Hollywood Walking Tour, I need to organize the interface and interactions. Here is a first draft of the IA:
More organized site map
Though I don’t feel like this is complete, this was the site map I turned in for the Web and App design class. I think this structure is a good start, but I wonder how it will evolve as I really start wire framing the interface and performing the usability tests. Until then, we will take every step in the process.
This is a portion of my first assignment for the Cal State Fullerton User-Centered Design for Web and Mobile Interfaces class. The charts here correspond to my chosen class project: A Hollywood Walking Tour App. I can’t seem to find a good and FREE walking tour app. So I thought about creating one myself.
The charts here discuss what the goals of the business are and what the customer goals would be. Though these charts are not perfect, their are a good first draft for the project.
I recently took it upon myself to compare three online movie ticket purchasing websites: Fandango*, movietickets.com and Arclight Cinemas. By comparing the features, design, content and user flow of similar websites, one can gain invaluable knowledge about their own sites.
When you compare your website to what a competitive website is doing, you will learn:
What your website or experience is doing right
What your website or experience is doing wrong
What your competitors are doing right
What your competitors are doing wrong
This is a great jumping off point in improving your own website or experience.
This graphic only shows some some of the insights I discovered when comparing websites. My brief overview is below:
* At the time of publishing this post, Fandango had not yet released its redesigned website and mobile app. Therefore many of the specific features I discuss here will no longer be applicable. However, going this process was still a great learning tool.
I know that Fandango will be launching a redesign very soon, so the shelf life of my analysis is ver limited. Still, I would like to share with you a few things I learned when analyzing Fandango.com website on the desktop:
If something looks like a button, then it should be a button. The “Find Movie Times + Buy Tickets” looks like a button, but is not. Best not to confuse the user.
Movie posters can be too small and sometimes difficult to read the title. Maybe use a simpler image to illustrate film? And therefore help me read the title of the film.
The day after WIAD (World Information Architecture Day) I participated in another day-long User Experience event. This time, I was not a passive observer who had organized the event. I was a hands-on, jump-all-in User Experience designer.
We were assigned the timely topic of Healthcare, so we chose to redesign the Covered California website. We did not feel that there was a clear call to action, so we wanted to simplify the interaction of the website a bit.
We were very tight on time, so we banged through a lot of brainstorming sessions, mind mapping and creative flow to narrow down the scope of the project. Just before the deadline, the team created a few valuable assets for our 3-minute presentation. Some are shown below:
UX Hackathon was an exciting experience and I learned a lot about working in teams, working under very tight deadlines, lean UX and creating deliverables in less than a day.
Jennifer Blatz explores the world of UX through words and imagery