Hi,
I recenty wrote about this in hello section but still this is a pain in my a** and maybe some of you may be of help.
I have to prepare a document about boundries in UX and UI designers work. I have to list principals, info about where UXs work ends and UIs starts. Maybe some of you could add some ideas that come to your mind.
In my opinion basics are UI designers have to stick to few things in mockups:
size of the page
the mockup itself I mean the arrangement of certain sections, photos etc
structure of the site (page/subpage structure - website mockup)
…
What else? Any ideas? Please, open my mind. I feel my thoughts got lost.
I’ve done both. The exact definitions between the two are very fluid, so take the following with a grain of salt. It’s just what I think of when I consider them.
UX Design
Research into user needs (though this may also fall under a seperate UX researcher roll), card sorts, personas and other design exercises, designing the flow of the experience, translating that flow into sketches, wireframes and prototypes, testing of any designs with a user base- works in an iterative manner (research, design, test, repeat… unless you’re using lean, in which case you still do all of these, just in a slightly different order)
UI Design
IMO, there’s more to UI design than just fitting things to a mockup- or at least there should be. Things like creating icons, optimizing image sizes so that websites load quickly, knowing what kind of image is good for what situation (vector or raster? Png or jpeg?), working with fonts (which is a niggling art itself! If you want to start a war between designers, talk about fonts. Just be sure to have somewhere to duck and cover.)
Thank’s for the reply but you describe UX & UI in a general matter. What I meant was imagine you’re a UX and you’re working with a rookie UI. Now, you have to give him your mockup and you need to explain what aspects of your mockup is stiff and needs to stay untouched. Like page size, arrangement of the sections etc. Fonts maybe?
Sorry for my lack of words, but I’m not a native english speaker. U wanna know what’s embarrassing? I studied english literature…
I think the difficulty you’re going to find here is that UI and UX are such fluid titles that any practical difference between the job titles has become moot for most companies. Many hiring managers don’t understand the difference between UI and UX, and as such associated job titles and responsibilities have become very, very muddied. Either might do some or all of the work of the other, depending on where you’re employed and the wants/needs of your employer.
Furthermore, if an employer hires both separate UI and UX professionals, the chances are very, very high that they will be working intimately and seamlessly together. This only serves to further muddy the waters.
So how do we go about separating the differences between the two positions? A solid list of UI should do A and UX should B really isn’t possible from a practical standpoint, especially without knowing a lot more about the employer’s situation and needs.
I’m sorry if that’s not very helpful for your particular set of needs. From a real-world perspective, unfortunately it’s the reality.
In theory, however, I think we can speak generally about what should be done by UX professionals, what should be done by UI professionals. To do this, however, we really need to understand that UX professionals are primarily involved with solving problems, while UI professionals are primarily involved in the next step of implementing the solution. In no particular order, some duties that follow these guidelines are as follows:
UX Professionals
User Research
Competitive Research
Interaction Design
Use Case Definition
Persona Creation
Journey Mapping
Lo-fi mockups, Wireframing & Iterative Design
User Testing
Business Intelligence Analysis
UI Professionals
Visual design
High-fi mockups
Branding
Adjusting Layouts to Fit Development Stacks
Creating User Guides
Content Creation
I’m sure many will disagree with where some of these pieces belong, but hopefully this will help move the conversation along a bit.
I really do agree with @dougcollins. But if you want an example, we work with a team that includes a UI designer. In our weekly team reviews, we work through wireframes that we have done, give suggestions on things that need UI passes, and discuss options as a group (i.e. UX and UI).
Our UI designer then goes away, completes some iterations, and we go through the review process again. So in a way he gets directed on what needs to be looked at etc, but we also help with suggestions. He also gives us suggestions around the wires. He is the owner of our style guide, making sure that we are being consistent, coming up with an icon library etc.
I don’t know your work situation, of course, but I often find that instead of sending someone a document on how to do/not do something I have better luck meeting with them. It helps foster understanding on both sides. They learn what I do, I learn what they do, and we both learn where the miscommunication is. It’s also much easier to ask and answer questions that might otherwise go unsaid and which would therefore foster more confusion. Of course, they have to be open minded for this to work, so it’s easier said than done. But if a person isn’t open minded, they won’t respond to documentation, either.
As far as fonts go- I would leave that to them unless you have a visual design background (which you might- I don’t want to assume). Typography and creating text hierarchies is finicky business. The important thing is to match it to header styles, and to make sure that the fonts that are used are appropriate to a digital format. Not all fonts look good on the screen, after all- especially many serif ones. I wouldn’t have brought this up, but I just heard of a case of a print agency trying to do digital work that messed that one up.
I agree with this, for example the company I work in we have BA’s who gather requirements, do the user research, user journeys etc however I then pick it up and create wireframes, prototypes and do all of the front end UI design and even some HTML development. I call myself a senior UI designer but some of the aspects of my role are UX design.
I think when it comes to UI and UX roles, it is down to the indivual what they call themselves and exactly what they make the role.
I work in a smaller agency structure taking on projects from somewhat large informational projects to startup web apps.
When passing work to a visual designer, I pass the following (which they may or may not look at)
User Flow diagrams
Sitemap
Content Map (adapted from OOUX)
Low to mid-fidelity wireframes (maybe clickable using UX Pin)
Low to mid-fidelity wireframes
I’ve come to expect them to use this the most, and I try to make sure that important information is distilled from materials above, into whatever their particular task-at-hand is. But it helps to have the additional reference material above for discussion and higher-level understanding. Sometimes the additional material come up when I include additional notes within wireframes when it seems appropriate, either in the form of:
general page notes: page objectives [first, second, third, …];
or specific annotations: let’s make sure this (X) is prioritized visually (might lead to short discussion), or this (Y) is flexible and we can consider whichever way you’d like to try it (I may or may not know what they’re interested in working on but want them to find fulfilment, incorporate ideas, and test their ideas against the objectives to improve both our understanding of this whole thing, etc)
I’m not sure what kinds of things you’re building and what the most important aspects are, but it seems like this: the things you are really accountable for are the things you either want buy-in from the people above you, or the people around you. If from ‘above you’ then those are the things you want to be certain about (in general notes as directions, annotations, or discussion), if from ‘around you’ then those general notes as discussion points, and knowing who your designers are will help.
About my role - thought on UX and knowing your team
I have noticed that each designer uses these wireframes differently. One will often use it as a general direction and the other will follow it very strictly. Which is to say, my role in UX isn’t that flexible (i almost always produce the same materials in one way or another), but the fact that I am managing the output, working with very different kinds of people, and so on, means that I am more flexible as a person.
There’s also a great quote from Rahul Varshney, Co-creator of Foster.fm:
“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.”
Hope this is helpful - if you have any questions then ask away, happy to help!
