Hot answers tagged

11

This is what I like to call reverse wireframes. It's very useful to see how your site has evolved over time OR to take a preexisting website and deconstruct it and pick it apart. The tool I use is: Wirify and can be used on most any page buy just clicking the bookmarklet. Just drag the below code to your bookmark bar and click it to turn the page into a ...


11

First, I applaud anyone showing an interest in focusing on the interaction side of design. In corporate UX groups, I find that the one thing that often does fall through the cracks is the interaction design (often due to waterfall development processes). The UI may look stunning, the back end, tight and responsive, but then you put them together and things ...


9

Here is a bookmarklet that will make all the text transparent: javascript:(function(){var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]='* { color:transparent!important; }'})(); To get this to work, add a ...


7

If you are going to be building a responsive site then the chances are that you are going to use Twitter Bootstrap or some other framework for the job. Therefore, you can block out all of your prototypes in static HTML with Bootstrap CSS/JS in the . You can even hook up the buttons if you want to do a walk through, the buttons loading up the next static ...


5

I always try to be conscious of how well my interfaces will be received to people who may have color blind issues. And also, I feel that making a page which is balanced for color blindness will also be easier on the eyes of users in general. Even if your eyes are perfect, looking at yellow text on a white background is going to be annoying. To balance this ...


5

One simple thing you can do is run Fiddler and go to Rules > Performance > Simulate Modem Speeds. Another option if your site is public is to use webpagetest.org and change the connection speed under advanced options before you run your test.


4

Mockflow.com and Moqups.com both offer the ability to share with others and edit in real time. You can also provide read-only access to anyone or export your ui mockup as a .pdf. Mockflow seems to be more developed and stable, but I personally prefer the user experience of moqups.


4

Technically, this isn't a UX question because you're asking about how to use a Tool not about the process or psychology, or study of accessibility testing. A basic Google search has revealed what you are likely looking for: http://www.freedomscientific.com/doccenter/archives/training/JAWSKeystrokes.htm Toggle Speech On or Off INSERT+SPACEBAR, S


4

There are too many variables thrown into each design for an automated solution to be of any practical usage. Also, except for the most minimalistic designs, the amount of options - and thus the amount of comparisons needed - will quickly become unmanageable to review (as maths has it). What's more, many design decisions are made based on experience, ...


4

This is often people who want to show animations etc that don't know how to code and/or haven't come across any interactive prototyping tools. The benefits are that they can pitch things to stakeholders etc easier and also it can be a useful tool for communicating with devs what you are hoping to achieve interaction-wise. That said, it also leads to ...


3

Use AxureRP for that. A sample prototype is also available on their forum for that. http://www.axure.com/forum/tips-tricks-examples/8157-parallax-scrolling.html How to use this effect to better influence the navigation and the user experience? If you ask that does Parallax has an influence on user-experience then sure, everything you do in your website ...


3

The basic process would be: Decide what you want to know after the study. "Evaluate usability" is not enough, as the concept of usability is too complex. It has many aspects, and you can't evaluate them all with a single study. For example, achieving the research goal create a list of issues which have to be fixed in the next design iteration requires a ...


3

You should use the application which you can master the most. Be it Microsoft Excel, Balsamiq, Photoshop, Corel Draw or Corel Paintshop Pro. But be sure to make the outcome look like muckups so you don't confuse your stakeholders that you've already built the application. If a mockup look too good, you will have less chance to get the hours you need for ...


3

For me Use Cases are more high-level representation of a system (who uses it and what functionality it has). Creating use case diagrams are easy enough and quite agile. The general vision of the system is formed on this step. Task flows are decomposition of every task for every kind of user. Without general vision it's hard to dive into details. Here ...


3

Here is a really great article by one of the best in the web, Brad Frost: http://bradfrostweb.com/blog/post/atomic-web-design/ It is about something he calls "Atomic Web Design", in which a site is broken down into small components that can be used to build a variety of things while keeping a consistent cannon! Kind of like good directions for your CSS, it ...


3

Or go from sketchy and the UX & front end dev teams working very closely and collaboratively. Always choose that option when available. Wait, let me rephrase that. Always choose that option when available!!! There, that's better. :) The only time NOT to go that route is if you simply don't have any front end developer skillsets on staff to help. In ...


3

When doing UX for data vis, the actual data matters. For example when showing bar charts with data that you want people to compare, your wireframes need to clearly show that the Y axes should have the same maximum and minimum values. Another example: if you have two bar/line charts where the Y axes have the same minimum and maximum values, they're best ...


3

The Real Issue But the Find function is already perfectly visible to users. It’s right there with other critical functions like Copy and Paste under… say, where did…? You’re only scratching the surface of a bigger problem. For reasons not explainable by science, certain browser designers elected to hide the menu bar by default. They apparently felt it ...


2

There are quite a few questions inside your main one, but regarding the one in the titles: You could use Archetypes or Personas. Personas are not that far from use cases, but give you some extra information that you might find very useful, especially if you are in the architecture stage. Personas are fictional characters that represent your user base, ...


2

It is called a "word cloud" or "tag cloud". I dont know if there are any fonts to make it. But you can do it with many webtools (such as wordie) or better you can render it manually using Adobe Illustrator or InkScape.


2

I tend to use pencil paper Sometimes a pen. If it's a nice one.


2

For me, the single most useful software (which happens to be free) in the UX process (and often outside it) is XMind. It is particularly good for brainstorming, quick collection of data that then needs sorting. Making it ideal in many stages of the process, like during many requirements gathering activities, or IA. The notes feature is extremely powerful; ...


2

I propose a solution that involves a white board and taking pictures. Taking a couple of steps back if you aims is to understand how your stakeholders or other team members understand the problem then a one to one session where you work collaboratively on a white board will be more useful than interfaces put together by developers and project managers you'll ...


2

You'd need some sort if indicator saying that the bar is swipe-able to begin with, for example indicator dots below, or having the red/green peeking in from the left/right. See this discussion: best image to indicate swipe left right. With that indicator in place I would personally just use more paper prototypes to display the different states But to answer ...


2

If it's for internal viewing only, it's a very simple 1 line code change in CSS. If it's going external on a hidden url, or to external clients, it's still a 1 line code change in CSS, but there are caveats. The main one being browser support. As long as you view it in Chrome or FF, or a recent IE version (9+), you'll be safe. Firstly, download Blokk Font ...


2

Get a Huawei Mate 8 phone. This has a bizarre input shortcut: double knuckle -- double tap, to start video recording, and shows all touches within the recorded video. I am not kidding. Double tap the screen with two knuckles, instant video screen recording. Quite powerful device, 1920x1080 resolution recorded at 720p. Battery is very strong so you can do ...


2

There are apps like Mariner Persona that give you a form to fill out. I've never used software like that though because they make you fill in stuff like height, weight and eye color, irrelevant things. I normally create a scope of information relevant to the project I'm working on. Demographics, professions, hobbies, ethnicity, etc. Then I use a program ...


2

There are two things that you should remember about personas: They are designed to generate empathy with the user. They are poor user models (since they focus too much attention on single people), but they evoke a human response from people in the design team. They are tools for creating a good user experience. They are meant for the whole team. Personas ...


2

DA01's answer was fantastic and thorough. I'd like to applaud you for making the transition as well! Getting comfortable with the code itself is incredibly valuable because it will allow you to understand and communicate with developers and SWEs in ways that allow your ideas to come to fruition in production. Additionally, it can decrease production time ...


2

All answers here been beautifully written about the Axure's worth in responsive design. I'd like to address the more fundamental aspect of how to communicate your design once you've figured out how you want your wireframes to respond to the various breakpoints (responsive design) for which you've decided to optimize and here comes Axure to rescue. As a ...


Only top voted, non community-wiki answers of a minimum length are eligible