We’re rewarding the question askers & reputations are being recalculated! Read more.
24

I would use the following layout: For uneven amount of pictures (5, for example), I would display like this For situations when only 4 pictures exist, I would display like this For situations when only 2 pictures exist, I would display like this The reason to choose this layout is based on the fact that the images are centered in relationship with other ...


12

It is well known that when people select icons or buttons, they aren't consciously evaluating that icon and then choosing it. They are usually going by memory. The factor that most effects our memory of items to select is their spatial position. So if you move icons as people use them, you will end up subtly frustrating people. As an example, Microsoft ...


6

If you want symmetry something like: 2: [__][__] 3: [__][__] [__] 4: [__][__] [__][__] 5: [__][__][__] [__][__] 6: [__][__][__] [__][__][__] Even though we know 3 images fit side by side we want to keep consistency in alignment rules, so there's no surprise for the user.


6

Think of them as a bootstrap responsive grid that changed dynamically depending on the amount of the rooms that you might have. For example, in the case that you have only 2 rooms, then the boxes will become bigger and cover a larger place on the screen. In the case that you have 5 rooms, there are not a lot of things to do. In the image, I use 2 different ...


4

A few suggestions: Show a clear button in each field. Focus on the field after clicking so it is possible to directly type something else. I don't know if my example is the best way for right aligned numbers though. As soon as one (and only one) field is left empty, show a question mark besides it. "Calculate empty field" in conjunction with the question ...


4

I've got a reference from the postal branche that might be of use. In college I delivered packages for the postal service. You had this scanner with you that showed you all the addresses in a particular order. This particular order was necessary to give people a timeframe in which they could expect me to deliver the package. The order and timeframe were ...


2

This touches a lot of areas that are more to do with implementing a solution than designing one, and so aren't really suitable for UX... however: Where to put the controls? Starting with the most UX-focused question: where to put the greyed-out or hidden controls until mobile is ready? I think it depends on whether you end up going for hiding or greying-...


2

Just create your grid using flexbox, letting the width of the grid child items determine their own widths, and then center the items horizontally. <div class="flexbox"> <div class="flex-child">…</div> <div class="flex-child">…</div> <div class="flex-child">…</div> </div> ....


2

Use icons for: Commonly know operations (print, save, add, delete, etc.) Branding (let people know your brand and partner brands) For bullet-points, errors, questions, warnings But remember, having a fixed position of icons/menu items is important. In the second experiment, we kept the original pictures, but shuffled their locations on the toolbar. To ...


1

Essentially you are allowing the user to create and run small programs that consist of a series of predefined actions. The general term for this type of interaction is a Domain Specific Language (DSL). It doesn't have to be represented with code, and it certainly doesn't have to look complicated. I have some experience making a rules engine that was ...


1

I think this is an area where metaphor still wins over idiom. The metaphor is as follows: if I am building a bookcase or fixing a computer and I have several tools out and around me to help me complete the job, when I put one tool down and pick up another that first tool stays where it is and when I need it again it is where I expect it to be. I think also ...


1

I agree with JohnGB and have also read a while back that users tend to remember the position of icons more so than the icon itself. There is on instance where I can see rearranging icons by most recent to be of value. If you had a very long list, for example 50 icons, which required you to scroll down the page to see all of them, placing the most recent ...


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