How design a great UX

Share Button

uxDear followers this is my 1st blog about UX Design approach. It, by the nature of its name, defines the experience of the users. To the benefit of software and applications everywhere, UX has become an increasingly important step in the Software Development lifecycle. UX is a slightly surreptitious layer of design, it’s no less important. That experience determines whether or not they want to come back for more, or run screaming in the other direction. UX is something anyone can do. The problem is not everyone can do it well. I can undertake the visual design for a website, but I guarantee you that it will look dreadful and unprofessional. If you learn nothing else about UX please remember these two things.

  1. Know thy user.
  2. You are not the user.

If you don’t know your user base, their habits and tendencies, and why they do or do not perform certain actions, then you can’t be expected to design a good experience for them. Get to know your users and design the experience with them in mind. The role of a UXer is to have that knowledge, constantly expand it, and then design with those users in mind, crafting amazing experiences that will delight and fulfill them. Let’s look at all the possible steps a UXer might take in defining the UX of a product. These steps create the ideal process. These steps aren’t always possible to complete in the real world, but we need to cover all of them so that you’re aware when you can leave out certain steps and why. Sometimes you don’t necessarily leave out a step, but it is melded into another step, or replaced using a combination of experience, knowledge, and intuition.   Requirements Requirements Gathering is one of the first steps in designing the UX. During this stage you need to ask a lot of questions. Many questions may not be able to be answered right away but note those and be persistent. There are several types of requirements:

  1. Business Requirements: The goals and needs of other parts of your company or what’s necessary to monetize the product. Unfortunately, this often trumps some things you may want to do. It’s a necessary evil if your product is anything beyond a project for pure enjoyment.
  2. Design Requirements: Sometimes there may be special design considerations or needs that must be met.
  3. Technology Requirements: There could be a specific technology need (platform, language, etc.) you need to consider in the design. What are your limitations?
  4. User Requirements: Who is this product for? Who is the main audience? Is there a fringe audience and, if so, who is it? Does it cover your entire user base or support a subset?

User Analysis Before we can design for a user we need to know our users. Sometimes you’ll have a lot of preexisting knowledge about them. Sometimes you’ll only know a handful of assumptions about them. If you don’t have knowledge of your users then your design is an educated guess at best. User Analysis is necessary to understand the needs and propensities of the users. You’ll need to ask the following questions at minimum to get a grasp on your user base:

  1. Who is this for? Demographics? Likes/Dislikes? Hobbies? Occupation?
  2. What special requirements do they represent? Do they present a particular problem you need to solve? Do they fit a particular business need?
  3. What mental models of the user base do you need to consider? Do they vary significantly within subsets?
  4. When, Why, How would the users use this product?
  5. What accessibility concerns do you need to include in the design?

Task Analysis After we’ve completed our user analysis we need to move onto the task analysis. What is the primary action the users need to perform? There may be many things someone can do on your site or application but there’s always a main task. You need to figure out what that task is and optimize the UX for that task for the particular user base for which it is purposed. We still haven’t reached the designing stage, but we now know what we’ll be designing, and for whom we’re designing it. We also need to determine any secondary tasks. There are very few sites/applications where users can only do one thing; there are often several related tasks to be performed. Scope out all of these to know the breadth of what you’re designing toward. Other things to figure out in the task analysis:

  • What kind of Help/FAQ do you need?
  • What error states are needed?
  • What are the fringe cases your users might present?
  • Are there multiple methods your users might try to perform to accomplish a singular task?

Function Allocation Function Allocation is figuring out what needs to handle all of the functions you’ve determined need to happen. This occurs on several levels.

  • Do you have multiple systems and/or servers? Which ones will handle a function the best.
  • What needs to happen on the back-end vs. the front-end?
  • Which pages are best suited to handle a particular function? (Card sorting works great here.)
  • What is automated (handled by the computer) vs. what is manual (controlled/handled by the user)?

The answers to these questions can dramatically influence the efficiency and usability of your product. Sketching Sketch. A lot. It’s quick. It’s cheap. It’s effective. Sketching gets a lot of ideas out of your head and onto paper quickly. It helps shape good ideas and eliminate bad ones. You can iterate on sketches very quickly. The investment is low for the return. Creativity is also key in this step. Do some wacky, off-the-wall things. They may not work but they could spur another idea. Try to vary your sketches significantly to see how far you can stretch an idea. Pen/Pencil + Paper = A bank to draw from for when you start to really define your designs. Mid-level Wireframes Now you should have at least an idea of where you want your design to go. The first set of wireframes should be an iteration on your sketches and start to bring out more definition. The information architecture should start to take place. This is where things go from a bunch of loosely connected concepts and pieces of information into a more cohesive documentation of how the product looks and functions. Prototypes There are lots of different prototypes you can do. These can range from a very simple clickable PDF to an almost fully functioning HTML/CSS website. It really depends on what you need for your project as to how far you go with it. There are plenty of tools out there though to get your prototypes up very quickly. A small sample includes:

Figure out the tool that suits your workflow and knowledge base to figure out what you can prototype in quickly and effectively. Prototypes shouldn’t take a long time, but they should effectively communicate your design and interactions. Prototypes help figure out where any weirdness lies in the interaction and what it feels like when the product is actually in motion. It can help uncover some things static wireframes may not be able to fully uncover. High-fidelity Wireframes This is where you then go back and start to make the wireframes high-fidelity. Add all the definition you need. Cover as many details about the layout and interaction as you can. Anything you leave open to interpretation may easily be taken the opposite way you wanted. Don’t assume anything. Better visual quality may or may not be necessary. Most of the time this really should be taken care of in the visual design phase. I’ve found it’s often better to fall back on more wireframe-y visuals in order to avoid confusion with final colors and visual design specs. However, I do use color if its related to functionality (e.g. red for error messages). Usability Testing This step can take place wherever you need it to during the design process. It sometimes fits at the end and sometimes more towards the beginning of a project. However, this is where you get actual user feedback. They may affirm your suspicions. They may turn your thoughts upside down. This is crucial though to know their thoughts and where their problems lie.   You are designing for the user. This feedback should drive your design or redesign in order to address the issues that arise during this testing. Discounting or ignoring this feedback, sans true outliers, is unwise and an absolute UX sin. Visual Design I’ve seen a lot of UX processes consider this the point in which they hand their documentation over the fence, cross their fingers, and hope for the best. That shouldn’t be the case! I work very collaboratively even after I’m done with the UX proper. Your visual designers should also be thinking about the UX. If they’re not I would contend they’re not fully doing their job. Making your wireframes look better is great but if they have an idea that makes the UX even better be willing to listen and incorporate. Often designers think different enough to spur great ideas and improvements.   Development Similarly, you should be working with developers. This may not be quite as collaborative but there are often issues that arise during this stage in which you’ll need to adjust the UX. This also helps you to gain an understanding of the technical limitations for future projects. Your developers will be much happier for you to gain this knowledge rather than designing impossible solutions.   Also, test your UX against the final product. This is where you go back to the wireframes and make sure what’s going out to your customers is what you designed. It’s not uncommon that something doesn’t match up and you should be comfortable enough with your developers to point those issues out. Ultimately, you are responsible for the experience of your users, so make sure they’re getting the product that you designed. Conclusion These are just the basics to putting together great UX. You may not be able to perform all of these steps, but you need to be aware of them all to know when you can leave them out. I personally believe UX is not a formula. It differs project-by-project and relies on an amalgamation of knowledge, experience, research, and intuition. We’ll dive further into specific areas in future articles, but we first needed a basis of what a UXer does on any given day at work. The steps outlined above will get you on your way to knowing how to put together great UX for products your users will love.

6651
views
302 Comments
  1. Pingback: Article Marketing Income Tips

  2. Pingback: cheap michael kors handbags sale

  3. Pingback: michael kors sale uk

  4. Pingback: michael kors tassen online

  5. Pingback: michael kors red bag

  6. Pingback: michael kors handbags

  7. Pingback: michael kors bags

  8. Pingback: oakley goggles

  9. Pingback: michael kors purses on sale

  10. Pingback: michael kors white bag

  11. Pingback: michael kors new handbags

  12. Pingback: michael kors laptop bag

  13. Pingback: michael kors purses on sale

  14. Pingback: oakley sunglasses canada

  15. Pingback: cheap michael kors bags

  16. Pingback: Oakley Half X Sunglasses

  17. Pingback: sac longchamp homme

  18. Pingback: longchamp pas cher

  19. Pingback: michael kors bags uk

  20. Pingback: sac homme longchamp

  21. Pingback: michael kors bag sale

  22. Pingback: sac lonchamp

  23. Pingback: sacs longchamp

  24. Pingback: sac longchamps pas cher

  25. Pingback: longchamps sac

  26. Pingback: sac homme longchamp

  27. Pingback: sacs longchamp

  28. Pingback: longchamp sac

  29. Pingback: Sac En Bandoulière Longchamp

  30. Pingback: sac pas cher

  31. Pingback: sac longchamp discount

  32. Pingback: sac longchamp besace

  33. Pingback: longchamp bandoulière

  34. Pingback: sac longchamp discount

  35. Pingback: longchamp noir

  36. Pingback: michael michael kors

  37. Pingback: eso gold

  38. Pingback: Nueva camiseta real madrid

  39. Pingback: longchamps soldes

  40. Pingback: Where To Buy Oreo 5s

  41. Pingback: maillot france coupe du monde 2014

  42. Pingback: Carmine 6s 2014

  43. Pingback: FFXIV Gil

  44. Pingback: Concord 11s 2014

  45. Pingback: F50 adiZero For Cheap

  46. Pingback: Carmine 6

  47. Pingback: sac longchamp cuir

  48. Pingback: nike blazer pas cher

  49. Pingback: nike pas cher

  50. Pingback: cheap nfl jerseys

  51. Pingback: nike free pas cher

  52. Pingback: Prada Bag 2008 On Sale

  53. Pingback: jordan france

  54. Pingback: Gamma Blue 11s

  55. Pingback: Shasta Poling

  56. Pingback: fifa coins

  57. Pingback: ray ban sunglasses

  58. Pingback: porte monnaie lancel

  59. Pingback: michael kors factory outlet

  60. Pingback: michael kors outlet online

  61. Pingback: michael kors outlet uk

  62. Pingback: neymar trikot

  63. Pingback: michael kors handbags outlet

  64. Pingback: michael kors outlet

  65. Pingback: nike free pas cher

  66. Pingback: nike air max 1 pas cher

  67. Pingback: nike tn requin pas cher

  68. Pingback: nike pas cher

  69. Pingback: cheap jerseys

  70. Pingback: michael kors outlet store

  71. Pingback: Concord 11

  72. Pingback: carmine 6s

  73. Pingback: Authentic Concord 11s

  74. Pingback: michael kors sale uk

  75. Pingback: basket jordan femme

  76. Pingback: Jordan 12 Taxi For Sale

  77. Pingback: new balance 420 homme

  78. Pingback: new balance paris

  79. Pingback: chloe handbacheap replica chloe handbagsgs sale

  80. Pingback: hollister sweat homme

  81. Pingback: new balance 410

  82. Pingback: new balance u420 bordeaux

  83. Pingback: new balance homme pas cher

  84. Pingback: vendita hogan on line

  85. Pingback: new balance 1300

  86. Pingback: toms outlet

  87. Pingback: basket new balance pas cher

  88. Pingback: wow gold online

  89. Pingback: oakley homme pas cher

  90. Pingback: air max 90 pas cher

  91. Pingback: acheter chaussures christian louboutin pas cher

  92. Pingback: Cheap Nike free 5.0

  93. Pingback: wow gold

  94. Pingback: gucci stroller

  95. Pingback: swarovski crystal bags

  96. Pingback: maillot equipe de france

  97. Pingback: maillot manchester united pas cher

  98. Pingback: nike free pas cher

  99. Pingback: nike pas cher

  100. Pingback: air jordan pas cher

  101. Pingback: lunette de soleil oakley

  102. Pingback: timberland online store

  103. Pingback: swarovski bridal tiara

  104. Pingback: celine

  105. Pingback: Nike blazers sale UK

  106. Pingback: ray ban pas cher

  107. Pingback: ray ban sunglasses sale

  108. Pingback: Celine handbags uk

  109. Pingback: soccer jerseys wholesale

  110. Pingback: michael kors outlet online

  111. Pingback: oakley gascan sale

  112. Pingback: knockoff oakleys

  113. Pingback: cheap oakley gascan

  114. Pingback: replica oakley holbrook

  115. Pingback: replica oakley juliet

  116. Pingback: discount oakley oil rig

  117. Pingback: oakley juliet sale

  118. Pingback: cheap oakley frogskins

  119. Pingback: oakley oil rig sale

  120. Pingback: oakley frogskins sale

  121. Pingback: replica oakley frogskins

  122. Pingback: replica ray ban wayfarer 2132

  123. Pingback: FcAYxFTr

  124. Pingback: Low Infrared 23 11s

  125. Pingback: michael kors handbags

  126. Pingback: scarpe hogan

  127. Pingback: World Cup 6s 2014

  128. Pingback: louis vuitton bags

  129. Pingback: wowgold

  130. Pingback: Carmine 6

  131. Pingback: Jordan Retro 9 Barons

  132. Pingback: Michael Kors Handbags

  133. Pingback: jordan retro 4

  134. Pingback: maillot de foot pas cher 2014

  135. Pingback: beats by dre pas cher

  136. Pingback: nike blazer pas cher

  137. Pingback: Retro Jordan 12 Taxi

  138. Pingback: michael kors outlet

  139. Pingback: adult video

  140. Pingback: Jordan Retro 1 Barons

  141. Pingback: wow gold

  142. Pingback: foams concord

  143. Pingback: wow gold

  144. Pingback: Jordan 11 Black White

  145. Pingback: cheap nike free

  146. Pingback: Jordan 1 Barons

  147. Pingback: Green Glow 4s

  148. Pingback: louis vuitton purses

  149. Pingback: Concord foamposites

  150. Pingback: MA205 Nike Free 4.0 V3 Dame Grå Lyseblå

  151. Pingback: Michael Kors Factory Outlet

  152. Pingback: nike tn requin

  153. Pingback: gamma blue 11s

  154. Pingback: canada goose jackets sale

  155. Pingback: beats by dre pas cher

  156. Pingback: michael kors outlet

  157. Pingback: sac longchamp

  158. Pingback: Jordan Retro 12 Taxi

  159. Pingback: nike pas cher

  160. Pingback: ray ban sunglasses sale

  161. Pingback: Sacoche Louis Vuitton

  162. Pingback: michael kors bags

  163. Pingback: Concord foamposites

  164. Pingback: Michael Kors Tassen

  165. Pingback: porn video

  166. Pingback: nike air max pas cher

  167. Pingback: timberland outlet

  168. Pingback: ray ban femme

  169. Pingback: nike tn pas cher

  170. Pingback: Concord foamposites

  171. Pingback: nike air max 1 femme

  172. Pingback: michael kors bags

  173. Pingback: Bright Grape 6

  174. Pingback: ralph lauren polos

  175. Pingback: kate spade iphone case

  176. Pingback: jordan 11 infrared 23

  177. Pingback: michael kors bags

  178. Pingback: ray ban sunglasses on sale

  179. Pingback: Jordan 1 Barons

  180. Pingback: louis vuitton purses

  181. Pingback: louis vuitton neverfull

  182. Pingback: louis vuitton outlet

  183. Pingback: Pre Order Sport Blue 6s

  184. Pingback: adult video

  185. Pingback: michael kors outlet

  186. Pingback: jordan 6 white carmine

  187. Pingback: Louis Vuitton Taschen

  188. Pingback: new ralph lauren

  189. Pingback: Louis Vuitton Outlet

  190. Pingback: Louis Vuitton Purses

  191. Pingback: michael kors hamilton

  192. Pingback: ray ban femme

  193. Pingback: parajumpers jackets

  194. Pingback: Retro Air Jordan

  195. Pingback: michael kors outlet

  196. Pingback: michael kors bags

  197. Pingback: louis vuitton backpack

  198. Pingback: Pre Order Low Infrared 11s

  199. Pingback: porn video

  200. Pingback: Michael Kors Hamilton

  201. Pingback: low infrared 23 11s

  202. Pingback: pre order jordan infrared 23 11s

  203. Pingback: louis vuitton bag

  204. Pingback: michael kors uk

  205. Pingback: louis vuitton belt

  206. Pingback: louis vuitton shoes

  207. Pingback: jordan 11 infrared 23

  208. Pingback: Carmine 6s 2014s 2014

  209. Pingback: Michael Kors Factory Outlet

  210. Pingback: Babyliss Pro

  211. Pingback: louis vuitton bags

  212. Pingback: http://www.redcofoods.com

  213. Pingback: michael kors outlet online

  214. Pingback: Coach Outlet Online

  215. Pingback: erotic lingerie

  216. Pingback: porn video

  217. Pingback: louis vuitton purses

  218. Pingback: gucci vintage bags

  219. Pingback: ralph lauren perfume

  220. Pingback: michael kors outlet online

  221. Pingback: michael kors wallet

  222. Pingback: Kate Spade Outlet

  223. Pingback: レイバン サングラス 人気

  224. Pingback: air max pas cher

  225. Pingback: michael kors handbags

  226. Pingback: Louis Vuitton Outlet

  227. Pingback: adult video

  228. Pingback: Cheap Foamposites

  229. Pingback: louis vuitton outlet

  230. Pingback: chaussures louboutin

  231. Pingback: gucci bags for women

  232. Pingback: Brazil 6s

  233. Pingback: ralph lauren outlet stores

  234. Pingback: louis vuitton handbags

  235. Pingback: コスプレ通販

  236. Pingback: メイド服

  237. Pingback: コスプレ衣装

  238. Pingback: セクシーランジェリー

  239. Pingback: はんこ

  240. Pingback: 実印

  241. Pingback: はんこ

  242. Pingback: Michael Kors Bags

  243. Pingback: gucci stores

  244. Pingback: prada killer bags online

  245. Pingback: ralph lauren polo bucket hat

  246. Pingback: buy wow gold

  247. Pingback: jordan 3 stealth Full Size

  248. Pingback: www.ametsoc.org/exhibitr/Swarovski-sale.html

  249. Pingback: http://www.hospitalityhouse.org/customs.asp?site-map.html

  250. Pingback: Louis vuitton Men Shoes

  251. Pingback: oakley sunglasses cheap

  252. Pingback: Foamposites concord

  253. Pingback: michael kors handbags

  254. Pingback: Nike KD VII

  255. Pingback: chanel handbags

  256. Pingback: louis vuitton handbags

  257. Pingback: gucci pantheon

  258. Pingback: ralph lauren quilted jacket

  259. Pingback: Oakley Sunglasses

  260. Pingback: Nike KD 7 DMV

  261. Pingback: Michael Kors

  262. Pingback: Louis Vuitton Outlet Online

  263. Pingback: http://www.lasseterbuscompany.com/faqs.asp?site-map.html

  264. Pingback: http://www.wiaa.org/article.asp?reviewssitemap.xml

  265. Pingback: Louis Vuitton Outlet Online

  266. Pingback: Coach Factory Outlet

  267. Pingback: coach factory outlet

  268. Pingback: Concord foamposites

  269. Pingback: coach outlet online

  270. Pingback: coach factory outlet

  271. Pingback: coach factory outlet

  272. Pingback: coach factory outlet

  273. Pingback: Babyliss Pro

  274. Pingback: Louis Vuitton Outlet Store

  275. Pingback: ralph lauren polo

  276. Pingback: gucci factory outlet online

  277. Pingback: Louis Vuitton Outlet Store

  278. Pingback: louis vuitton clutch

  279. Pingback: oakley prescription glasses

  280. Pingback: louis vuitton diaper bag

  281. Pingback: chanel outlet

  282. Pingback: porn video

  283. Pingback: セクシー ランジェリー

  284. Pingback: ハロウィン コスチューム

  285. Pingback: セクシー ランジェリー

  286. Pingback: nike air jordan release dates

  287. Pingback: christian louboutin pigalle 120

  288. Pingback: tory burch outlet sale

  289. Pingback: coach factory outlet

  290. Pingback: louis vuitton eva clutch

  291. Pingback: tory burch outlet

  292. Pingback: Nike Air Max Shoes Outlet

  293. Pingback: oakley coupons

  294. Pingback: coach factory outlet

  295. Pingback: pink nike air max

  296. Pingback: oakley jawbone

  297. Pingback: help moppy

  298. Pingback: jordan 13 bred Outfit

  299. Pingback: Buy Air Jordan 5 Retro 3lab5 Black Metallic Silver

  300. Pingback: vent cleaning

  301. Pingback: ysl tassel clutch with chain

  302. Pingback: hefalimp cardijon

Leave a Reply