64

Note: when this answer was written, the question talked about a "progress bar". The question was later changed to mean "wizard". I am leaving this answer as is because it is still being voted up regularly; thus, it seems to kind of be a somewhat fitting answer for a "wizard"-style form as well. Never With all the examples in the question and the answers so ...


35

I believe you need to rely on icons in this case. The pencil is associated with the edit action, which if I understood correctly is the reason why the step is clickable, while a check icon implies the step is completed and there is no possible edit: The idea behind is that steps which have already been filled don't need a number anymore and they are either ...


33

A lot has been discussed here already, and I think we can take an advantage of user's Mental Model by using border-bottom which will indicate that the step in wizard is clickable. I've never used this in my work, but it would be a great option for research.


29

Real good discussion happening here. Some thoughts and ideas below. Consider the design attached and multiple scenarios mentioned: 1) Introducing a status message that suggests that the data is saved and also that the section can be re-visited might help. 2) It could act as a confidence measure and an information item, that could help users understand ...


21

Going off Simon Richter's answer and O. R. Mapper's comment, what about something that looks sort of tab-like to help indicate it's clickable, but has an arrow shape communicating the flow of the wizard steps? Rough ugly example:


18

Deutsche Bahn are using a tabbed interface, adding tabs as the user progresses along the wizard, and with green lines indicating that the respective pages contain valid data. The user can go back by selecting an old tab. (German) report with pictures.


11

“Affordance” is one of those terms that has come to be used for so many different things that I’ve recently just about given up using it in order to avoid confusion. Affordance as possible physical interactions In the original definition put forth by Donald Norman (1988) in The Design of Everyday Things: The term affordance refers to the perceived and ...


8

Best practice You'll find a lot of info out there about CTA tests and theories. But you're not going to find a whole lot that tells you what to do with horizontal alignment. The reason is, it depends on your design. The norm If your colleagues want to talk about what is more common, then you should align right, as you suggest. This is used more often than ...


5

You don't need an animation for this as long as you make sure to avoid the Illusion of Completeness. If users have the impression that there is more content down there then they will eagerly scroll. Complementary, if users have the impression that they're already looking at the whole thing, they might be discouraged from scrolling. You can read more about ...


4

If you want to make the user aware of the fact that the progress bar is clickable, show it to them by e.g. changing the mouse cursor while hovering over a certain area of the progress bar. Also adding a balloon context message can help. Be sure not to put too much information in the balloon as it may get unreadable and cluttered.


3

As stated earlier, I think the title of your question is incorrect. Most citations referring to knobs offering an affordance of rotation are typically referring to knobs other than the ones on doors. Such as the ones on a radio tuner...which tend to have a lot more physical (and visual) cues as to how to interact with it (knurled 'grippy' edge, a tick mark ...


3

I highly recommend the Gamification course at Coursera, it's really exhaustive and gives as many insights as a Product/UX Owner could hope for. So, as prof. Kevin Werbach, who runs the course, put it, the Pyramid of Game Elements goes as: Dynamics (high-level element, those mechanisms of human psyche that are making us enjoy games and engage) Mechanics (...


3

Combine 1+2 with a little bit of seasoning. Option 2 is great because the selected range is thicker and a bit darker. But the black handles don't provide any affordance. So I would replace them with circular handles from Option 1, but why not throw in a bit of drop shadow for that extra-affordance?


2

Let's start with why.... Your content is center-aligned today. So as users navigate down the page, they expect the next piece of content to be center-aligned. Today you have a big green, center-aligned button. It's not getting noticed enough. Why isn't it being noticed? Hard to tell exactly without looking at the exact content, but it's likely that: The ...


2

1. First of all, gamification is a great way of engaging users and making them WANT to contribute to whatever it is they are using. It is obvious that people like games, so adding game-like features (e.g. stackexchange's reputation system) to something, it will naturally increase the user's engagement. 2. two tutorials/guides on the topic of gamification, ...


2

There is a decent gamification course at coursera.(https://class.coursera.org/gamification-003/lecture) And as far as experience you probably have tons of it here at stackexchange and linkedIn and slashdot and other places. What is gamefication except for providing incentives for participating. Stores do this by giving cards in which each time you ...


2

They sometime don't afford twisting very well Your observation is a good and nuanced one. Door handles are used frequently as cases in design texts because they can represent: A ubiquitous interface A complex, compound interaction (the knob must be twisted in one or another direction, and then the door pulled, pushed, or slid) Therefore, twistable door ...


2

This case is not exactly about 'waiting' and 'feedback'. In general, feedback should be immediate. The underlying issue is that an input event may or may not correspond to the user's intended action. There are a multitude of examples for such inconclusive inputs: The first in a double click event. Mouse-enter event on an on-hover element (where the mouse ...


1

You could observe how many tasks the user can complete and how long it takes them. A way of conducting this is to create hypotheses based on assumptions. Here's an example: Assumption: Users can only handle up to 100 Tasks per day before becoming fatigued. Hypothesis: We believe a User will be able to handle 100 tasks a day, before getting fatigued You ...


1

I am going to propose using the term "dwell". Dwell refers to an interval where a mechanical motion pauses in a linkage that is in reciprocal motion, such as a piston. I think it fits because of the analogy between links, timing, and periodicity. It isn't a perfect analogy because interactions are not mechanical in nature and don't go on indefinitely.


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