New answers tagged design-patterns
0
The particular one that you have mentioned in the question do not have a name by definition as of now it seems. Anyways, from a technical side it is Adding rows dynamically with jQuery. Therefore maybe we can call it Dynamic New Row. [from today haha]
Please post your answers if it actually has a defined name. Then I shall remove my answer :)
Also, I'm ...
1
Since design systems are the building blocks for building out the offering of an organization, a good test of whether they work well does not necessarily mean testing them individually with users.
For example, design components can help to bake accessibility into the platform. Thus one usability test of the design system would be to rate it and check if it ...
3
The only thing that could be considered a standard really is the question mark in a circle icon, as @Glorfindel mentioned. Apart from that, it's what fits well with the rest of your content and UI design. As long as people can see that something is interactive.
Can I ask you to look into making them accessible?
https://inclusive-components.design/tooltips-...
4
Most applications/websites either have an icon (often a question mark) to indicate you can hover over it (but then the hover only works on the icon, not the label) or no special formatting at all. The answer here suggests using a dotted line as well; I vaguely remember old Windows (3.x) help files working the same way.
Stack Exchange has a lot of labels / ...
2
If < means closing the modal (as well as x button), the 1st option is OK, as it is commonly accepted to be there. Otherwise, if it is intended to be a "go to previous step", I would say 2nd option.
In case of "go to previous step" meaning of <, I would make the button look like < Previous Step.
The "reset" button, could look some ambiguous. Does ...
0
I believe the first image in your examples has a sound hierarchy and structure, also especially since the back button's location has more or less become a standard and people are used to it being there.
The only thing I think would need change is the "start over" button. It would be better to tell users what it is, simply by adding the text "Start Over" in ...
1
The number 1 answer for this question begins by stating:
"People don't generally use hierarchical structures 'in the real world' -- it seems to be something that has been forced upon them, a technical remnant of the past."
What?!? That's crazy talk. This is an old question but I wanted to answer it because it's spreading a bit of misinformation. ...
0
I have a suggestion. Since the list of store locations is super long, but can be filtered by location, the form filling page can have a filter based search bar - location based filter to search the store names. Here is a the flow and logic:
A check mark appears next to the store name in the dropdown if the form has been filled.
If a user just starts ...
3
The "modal within a modal" problem arises when you need to return to the previous state (the whole point of a modal). So you should ask yourself two questions about the workflow:
Can the information be included in the first modal?
Can the user navigate to the information (new activity, close modal)
from the modal view?
It's basically the same problem as ...
1
I think a great attention grabber is the pattern where the illustration goes out of the frame. it is a harder to implement but it looks great and it should work wonderfully with major announcements.
Link: https://dribbble.com/shots/11298443-Finezjo-Dashboard
1
Short answer:
Do research. Don't do what the customer wants, try to understand why he/she needs that and map the flow. Check the pain points, reiterate wireframes and test it again. Don't listen only to one customer/user, I encourage you to explore more the problem with at least 10 customers/users.
Why:
I think there are some questions you need to answer ...
1
You can validate your hierarchy assumptions by using Attention Maps. They are heatmap that shows where user will direct his/her attention and which elements are more visible.
The best way to generate Attention Maps for your design is by:
Conducting local eye-tracking studies with dedicated equipment like Tobii (accurate, pretty expensive, time-consuming)
...
1
Photoshop and Blender are examples of advanced direct manipulation interfaces:
the intention of direct manipulation is to allow a user to manipulate
objects presented to them, using actions that correspond at least
loosely to manipulation of physical objects. An example of direct
manipulation is resizing a graphical shape, such as a rectangle, by
...
2
This is essentially an animated overlay that protects an interactive element from accidental use. While it is rare to see it on a button, it used to be fairly common on video player elements. Somewhat like the "play button" icon that lays on top of a video and only when a user clicks are they displayed with the actual video controls to interact with; like in ...
3
Short answer is that I don't think it exists because it is a redundant design pattern due to the history of skeuomorphism in interface deisgn.
Long answer:
I am curious as to whether this type of design pattern is still used these days, as it is probably a type of skeuomorphism that tries to mimic the behaviour of something like this in real life called a ...
0
This is a great question!
I looked for these kind of interactions as well, and some search queries that correspond with good results include:
onHover Animated Illustrations
mouseOver Animated Illustrations
CSS Hover Effect Illustrations
Found a tutorial and examples of the same here: https://www.mockplus.com/blog/post/best-animated-websites
Top 50 recent answers are included
