How to Break out of the “Pretty Maker” Mindset and do some UX Design.
On Keeping Things Functional and Beautiful
The Difference Between UX and UI
It is time the tech industry gets the distinction down.
My friend, Cam Sackett, told me recently that in a job interview he was told by the company that they just wanted him to make beautiful designs (keep in mind this is for a UX design role). Essentially, they wanted to hire a “pretty maker”. Luckily Cam isn’t working there and neither should you if you want to double down as a UX Designer.
It is not that it was wrong that this company wanted beautiful designs, it was the misnomer in their job listing. “Hiring UX Designer” does not equal “Hiring Visual Designer”.
“Hiring UX Designer” does not equal “Hiring Visual Designer”
So whats the distinction? Well Cam has the answer for that in one of his articles on medium:
“Now, I’m not going to go into the difference between, let’s say, Graphic Design, UX, and UI or even that of Product Design versus Product Management, etc. Personally, I find it kind of missing the point. That said, each do have their place and do different things — Some overlap here and there, some simply do not. For example, Graphic design is not UX design, and UX design is not UI design…
User Experience Design (The way a product feels). I create the product’s logic. I love user research. I’m people driven as well as data influenced. I enhance people’s satisfaction with a product by refining the usability, accessibility, and pleasure given in the interaction between a person and a product.
User Interface Design (The way a product looks). I think about the interface elements: typography, buttons, headers, images, icons; you name it. I make sure a person’s interaction with those elements is as efficient and straightforward as possible.”
Based off Cams thorough explanation, the visual aspect and the user experience aspect of a product or website are two separate things. Even though many designers in the industry do both.
In many job interviews for UX Design roles, I hardly talk about my portfolio. Companies who understand the distinction usually ask me questions testing my problem solving abilities and critical thinking skills rather than why I chose a gradient in a website design. I learned that the portfolio gets your foot in the door, but it doesn’t get you the job.
I’m not saying UX design is better than Visual/UI Design or Graphic Design, they all have integral roles in the product development process. Though I enjoy the UI design process, I couldn’t do it all day every day, so I double down on UX. I could never be a graphic designer, because I don’t have the visual aesthetic to be valuable at it.
Like a film director, who never touches the camera or editing software unless they have a specific change they want, the UX Designer worries more about placement, timing and presentation rather than look and feel.
In order to optimize placement, timing and presentation, the UX designer needs to understand the technologies and constraints those technologies give him or her to shape how they will go about designing the experience.
Now if we don’t understand the distinctions between UX and UI, a company might accidentally hire a graphic designer for a UX role who might understand visual design, but they may not have a the faintest clue how their designs should be placed, timed and presented to have an optimum user experience and as a result, make a crappy product.
UX Design Exercise with Mag+
If you are still reading, that means you are interested in learning the distinction and doubling down on UX Design.
The InDesign plugin Mag+ is a digital publishing software that allows the publisher to create rich media experiences for tablet and mobile devices. The interactive features that can be done with this software are pretty impressive.
The software is finicky as a hormonal teenager however. It has so many moving parts that one wrong setting can make the whole experience unworkable.
So this is where Mag+ and Code have a common trait. They are buggy. One misspelled string can throw off the function of a whole app.
This a great place to start if you don’t want to or don’t have the time or interest to learn backend code but still want the experience of designing around the technical stack you are using. This is because you can’t make a rich media experiences without multiple forms of media and you can’t make great interactions without understanding what the software tools afford to you.
The great thing about Mag+ is it is free to download. Grab it here.
Intro to the Problem
For this design exercise, I wanted my Mag+ powered design to be a tract on how a newspaper could revamp it’s business model.
I work for a University Newspaper, and I might be the only one there that understands web technologies enough to revamp the business model. The purpose of this digital document is to help whoever reads it conceptualize the changes I will be making and how we can tell and distribute the news and raise revenue to the paper at the same time.
Persona
“Journalist Jenny”
Fear: Loves the institution of journalism, but is worried that she will end up working for a company that is not a news organization because of the lack of jobs.
Pain Points: She wants to help her school paper as Editor In Chief this next year by going digital first, but she doesn’t understand how to execute on that plan or what “digital first” looks like.
Placement
Understanding what makes journalists tick was the product of two years working at the paper. This ended up being unintentional user research (which happens to me a lot because I am always asking people questions to see how they tick.)
So with that user research in mind, I knew I had to make a document that explain the key problems keeping journalists from doing their jobs.
- Falling Revenue
- Decreased Readership
- Skepticism of the News
Mag+ works on a vertical format. Each dark grey box in the layout is one vertical with the lighter grey boxes being pages within the vertical. This is important to understand because you need to know how the platform works before you sketch anything.
The production tool allows you organizes the verticals in the order you want them. Double click on one it opens an InDesign document for that vertical. Thats right, each vertical is it’s own indesign document. So if you want to transcend verticals with content that appears on two verticals, you have to design around that.
So when you have to worry about the placement of content in a design, you need to establish the limitations of the technology. Mag+ uses the layers feature in InDesign to categorize content and how that content will behave in the magazine.
The B-Layer is fancy talk for a “base layer” and the A layer is fancy talk for “free floating scrollable content”
There are also layers that show where my buttons are, where pinned items are and device bezel layers to show where the device screen will be so you know where to place content.
This is where the analogy of coding comes in. If you mess up the placement of content in these layers, your going to have a bad time.
Timing
Understanding how layers works, I wanted to create a transformative effect to the man reading the newspaper vector I have. I first established how the tech platform works, now I’m creating a solution.
The creation of this illusion was some of vector editing with Ai and placing the content on the correct layers. The top illustration is placed on the base layer and the bottom one is placed on the A-Layer that slides on top of the B-Layer.
After some trail and error. I got the placement just right to have the top illustration hide the bottom one. After that I noticed how the illustration wouldn’t stay in place, so I had to program the blue shirt object to snap to the top of the page so it would stay in place. the result is the screencast below.
User Experience designers need to take timing into account when creating interactions. What is the feedback when someone scrolls, and how fast or slow does a behavior need to be to keep the person on the screen?
After testing this with a couple people, I had to make tweaks and changes until it was intuitive that you could scroll. The arrows where the last thing I added after user testing.
Presentation
This is where UI and UX will start to overlap. UX designers still need to worry about visual consistency. The illustrations need to be flat and the use of Mag+ need to be taken into account on what can be done to teach the message.
The long start seamless spread requires two verticals to be stitched together.
See, because you understand how Mag+ works, if you just design something in Sketch, you would know how to design the experience without giving your developer too much grief.
What if you wanted an interactive element?
Mag+ allows for HTML to be embedded into the experience. You can use Tumult Hype to create an HTML object, but as a UX designer, you need to understand how file directories work so you can properly embed the experience without breaking links. Also, you need to understand how to create a link button on the page so it doesn’t look weird when you press the button. You can learn more about that process in an earlier article.
Conclusion of Iteration One
Even though this was a more of an exercise than a real project I’m going to use, I’m still going to use it if I need to explain a thing or two to my coworkers.
The real benefit to designing an interactive experience using this complicated software was to understand that UX is more than making pretty designs. It is about understanding and finding the barriers of what you can or can’t do and then push them to solve real world problems.
UI design is still important, but if there isn’t thorough research done and user tested preliminary designs, a pretty design won’t do much to increase user engagement. All components of digital product design: UX (the way a product feels), Interaction Design (the way a product behaves), UI (The visual look and feel) and IA (The organization of content) all play a role in accomplishing those goals.
But a distinction needs to be made and understood in the industry. UX is more than pretty designs, it is engineering the feelings a user has while interacting with your product. That requires knowing how to research and prioritize how you will design that experience.
Second Iteration
Now that some of the basic features are out of the way, the rest of the project needed some extra storytelling features like a table of contents and a gesture tutorial page.
The thing with a table of contents and a tutorial page is that they need to act as a first exposure to the content. Many magazines make separate pages for both, but I felt like they could go on one page.
The next addition was jump link buttons in the article pages. The content can be very long and having to navigate up by scrolling isn’t going to cut it. The digital magazine is still a relatively small part of digital device consumption so there isn’t intuitive navigation just yet. The simplest way is the easy way so I made a “return to top” button.
On the page where I have pop ups. You can click on icons to reveal content about that medium the icon represents. Like I said before, the intuition behind magazine interactions isn’t well established so I created an affordance of plus icons just incase the reader didn’t catch on that they can interact with the magazine in that way.
Conclusion of Iteration Two
This design exercise should teach you one thing: that the customer most likely isn’t as technology savvy as you the UX designer. Some awesome features might need affordances when you design the UI. So if you really want to flex the UX muscle, I’d download Mag+ and try to execute designs and that actually work in a finicky technology stack.
