20

When discussing UX, I find that it is helpful to have visual aid to help clarify the discussion. However I find that many of the discussions contain only bare text with hardly a visual in sight.

So how does one add visuals here? and another important question why should one take the trouble to do so?

0

1 Answer 1

Reset to default
23

These are the primary ways of adding visuals on UX, with their pros & cons.

  1. Mockups
    • Pros: create one right away online
    • Pros: Best clarity and configuration for complex visuals
    • Pros: Can be attractive
    • Pros: users can copy & edit your mockup directly to make an answer
    • Cons: There's a learning curve to use the tool. (one time cost)
    • Cons: Can take longer than other methods.
    • Cons: Usable only for a subset of all mockups.
    • Cons: Making mockups on-site requires 10 reputation
  2. Drawings
    • Pros: Easiest to create. Requires no training besides basic known skills.
    • Pros: Can be attractive
    • Pros: Can show very complex cases.
    • Cons: Time to create & digitize and put it online in UX
  3. Images
    • Pros: Easier to grasp quickly due to our large capacity for visual processing
    • Pros: Can be attractive
    • Cons: Takes time to find and/or modify the image of choice and upload it
  4. Text
    • Pros: Slightly harder to grasp as involves the thinking part of the brain
    • Pros: Fastest to create and add for simple visuals
    • Cons: Not very attractive

Now on how to do it.

Mockups

  1. (Ctrl+M) or screenshot of icon
  2. screenshot of UI
  3. Further help
  4. example below

mockup

Furthermore to edit someone else's mockup: copy the Mockup block from the question, paste it in your answer, then click the link to edit the mockup in the preview. e.g. you can copy the the example above and post it in your answer and edit.

Drawings

  1. Make the drawing on paper or digitally (tablet, paint...etc.)
  2. Scan or Take a picture to digitize the physical drawing
  3. follow same procedure as images

Images

  1. Acquire & modify image.
    1. For screenshots you can use something like Greenshot or Awesome Screenshot
  2. (Ctrl+G)or screenshot of image icon
  3. screenshot of add image dialog
  4. examples are everywhere in this post

Text

  1. (Ctrl+K)or screenshot of preformatted text
  2. Add your text as you see fit, easier in an editor like notepad++

.

example
+--------------+------------------------+
|   Appname    |        AppleID         |
+--------------+------------------------+
| Goodreads    | [email protected]   |
+--------------+------------------------+

Hope this helps everybody.

8
  • 3
    Great user guide, thanks for this.
    – JonW Mod
    Commented Mar 21, 2013 at 10:36
  • Thank you. My question is, how will UX users discover this question answer on meta? It is because I wanted the users there to use it.
    – Vijay
    Commented Mar 21, 2013 at 11:52
  • 1
    people will come to Meta when they want to find out about something particular related to the Main UX.Stackexchange website - such as for advice about voting, asking about what type of questions are suitable for the site, asking how to do something with questions etc. That is the purpose of the Meta sites for all StackExchange websites - there is a link to the Meta site in the header itself. Also, I have tagged your question FAQ so that people searching for FAQ questions will find this one too. Also, it can be linked to from comments in the main site too.
    – JonW Mod
    Commented Mar 21, 2013 at 11:56
  • 1
    Basically, if people are wanting to know how to use images in questions then people are more likely to find this if it is on Meta than on the main site.
    – JonW Mod
    Commented Mar 21, 2013 at 11:57
  • 1
    In addition, Ben has added a link to this particular meta post within the main site FAQ, so the Mockup information links to your post.
    – JonW Mod
    Commented Mar 21, 2013 at 16:00
  • @ben-brocka how do you do this Pros: users can copy & edit your mockup directly to make an answer ? I can't find an easy way to do this. Do I have to download the source reupload it to edit and add it to my post?
    – Vijay
    Commented Apr 24, 2013 at 9:56
  • 1
    @Vijay you can copy the Mockup block from the question, paste it in your answer, then click the link to edit the mockup. It's not directly apparent that you can do that though
    – Zelda Mod
    Commented Apr 24, 2013 at 13:10
  • @BenBrocka you are right. It's not. I have edited the answer to include this tidbit
    – Vijay
    Commented Apr 25, 2013 at 3:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .