Tag Info

Hot answers tagged

36

Stacks are an effective user interface method to indicate additional content behind what's currently visible. Some examples of stacks in different applications: Thumbnail Stacks Most likely closest to what you're looking for. Additional thumbnails are hidden below, but with the edges visible to indicate their presence. SoundCloud Playlist Similar to ...


32

I think your specification is already misguided: that they MUST be on a desktop (or laptop) to properly use the system Such classifications aren't what you actually care about. What matters are specific properties that make your site work well with the device or work badly/not at all. If the properties are understandable for the end user, I'd mention ...


29

I think @Alan George approach is correct, I'll just add two possibilities thay could help the user to get the message easily: Label + number: Because sometimes there's nothing better than being explicit download bmml source – Wireframes created with Balsamiq Mockups Showing quantity in the same place where "there are more pictures" is ...


24

You should use an empty alt attribute for images that are purely decorative. I'd argue that in the example you gave it is worth supplying an alt attribute that describes the image e.g. alt="Portrait of Jane Doe". @KitGrose mentions that including this text will also make the image searchable to image search engines such as Google Image. I reserve empty alt ...


21

I've never thought about exactly WHY we hate stock photos, but I think it's related to the concept of the uncanny valley. Most cheesy business-centric stock photos look almost real, but there's always just something that makes them clearly unnatural. Is it the perfect mix of skin colors amongst the group? Is it the fact that they seem WAY too happy to be ...


20

Why do they need to know what the server does? All they should need to know, is that the picture is ready soon. They should not have to press reload themselves, you could handle that for them. You say there is an empty thumbnail while processing. That is a great start. All you need to do is to explain why it is empty, for example with a loading bar or ...


18

Readability is hard to get right Great question. It's always good to question the point at which style destroys function. Example scrim formats I've done quite a lot of user testing on scrim-based image captions (where there is a partial or complete semi-transparent overlay on the image and contrasting text). Here's what I've found, in no ...


16

Have a default face to put instead of the 'blurred' person. That way you could have actual faces, thus leaving the overall visual of the image, whereas a blur or pixelation would make it more obviously edited. Note: I'm only half-serious about the solution, but if you do this you should obviously use a more neutral face like these. It'll be ...


15

No. The amount of results per page should depend on: The display size of each result - the smaller the result the more you should show per page e.g. from small to large: thumbnail, one line, multi line, large image, ... The window size - the larger the user's window is (or device's screen if in fullscreen mode) the more results you should show. Showing 10 ...


15

From a UX perspective - KEEP the bad images. The user will want to know what they're buying and if the image is bad/stretched it still gives a certain % of the total information available. This gives the user an improved holistic view of their order. You may lose sales by removing the images if user's won't order without knowing, for example, what shade of ...


15

To create connection between image and description use the proximity principle from the set of Gestalt principles, giving less space to connect the elements and more space between chunks of information to separate. This gives good results both for above or below description placement. To support information consumption flow, exploiting human's percertion, ...


13

The zoom feature mainly came into the picture to allow users to examine a product in detail and overcome the challenges involved in actually being able to handle the merchandise before buying it.This is especially common in sites which sell products like clothes or products where users might want to get a closer look at the product before making a purchase. ...


12

I wasn't sure whether to post this as a comment or an answer. I faced this problem before, and instead of stretching the images, I re-did them using a light color background (could have a very subtle texture) and leaving the original picture in the middle, at its true size. If you have two instances of the same pic (small for index, big for details, for ...


11

I think you mean, does a user recognize the religion based on the symbols? If it's shown to a general audience, the answer is No. Well atleast I don't. The name of the religion is needed below the image imho. The extra text adds minimal amounts in terms of UI, but could potentially make things clear for a large audience. after the edit to the question I ...


11

These are called "cut lines" and have been used in the newspaper industry for decades with the text BELOW the image. I'd stick with that.


11

There a few common practices to consider: Make the image appear button-like by giving it a raised appearance with drop-shadows. This helps imply the button can be depressed. Alternatively, create the button effect by framing the image in a border (this can be hard to pull off aesthetically) Ensure the image has a hover state that implies it can be ...


11

One way to improve the effectiveness of the cutout is to enhance the difference between the 'figure and ground' and that can be done by adding a perception of depth using drop shadows to distance the overlay as a separate entity to the picture underneath. For example:


11

There is a significant body of work in the field of neuroscience which suggests that the human brain is highly adapted to the process of recognizing faces. In fact, the activity is so specialized, it's suspected that the brain has a region, the fusiform face area, devoted solely to that task. A classic work on the subject is Face-Specific Processing in the ...


11

Excellent Question. Our company have multiple teams in different offices working. We've tried a lot of things... nothing is "ideal". The biggest issue seems to be that the company as a whole must pick 1 tool/structure, let everyone know about it and commit to using only that. Different teams are familiar with different tools and our "grass-root" effort of ...


10

Why not this ?


10

We tested at Intuit fairly extensively on the use of photos of people on the websites. In every case, the winner of the test was not a person, but a picture of the BOX, like the one you would get in the store. Executives CONSTANTLY tried to get us to put in happy people and we kept saying, "It won't beat the box. The box is the champ." The lesson is: ...


10

HTML5 (Candidate Recommendation) contains the section "Requirements for providing text to act as an alternative for images", which includes the case "A link or button containing nothing but an image": When an a element that is a hyperlink, or a button element, has no text content but contains one or more images, include text in the alt attribute(s) that ...


9

Definitely yes, mention in the FAQ and wherever possible. This will likely turn some users off, so I hope you specialized site has a good reason to keep them coming. One way to remind them and perhaps make it a bit more fun: do some sort of calculation and display a note on posts/images that will be deleted soon. For example, if you've reached 2,000 images ...


9

The answer depends on how accessible you want the site to be. (Hint: you do want it to be accessible unless you have a really good reason.) As WCAG 2.0 accessibility guidelines state: 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed ...


9

As JohnGB says - titles above in this kind of scenario. But I'd be tempted to trial having the title overlay the images in order to suggest that you can click on either the title or the image. Yes the cursor change should be a cue as well but you can use a slight darkening/lightening of the title background as you hover over the image to give a further hint ...


9

Users are used to pagination and don't mind flicking through pages. Almost like a shop catalogue. Users in real life do it (i.e. Argos), users do it in virtual life (i.e. Amazon). Some of the advantages of using pagination are: Pagination gives the user a sense of how far along they are Pagination makes it easy to remember where they saw something they ...


9

Break the header into two. Yes, you can change the website header across devices. However, the example shows what looks like a logo on top of a background image. Consider breaking the header into both a raster image (the background) and a vector image (the logo). This will allow the background to scale down to a mobile device while allowing the logo to ...


9

It is hard to provide more legible information than black text on a white background but not all things are black and white so let's look at an example... 1. Images provide emotion Choosing anything other than a high contrast pattern of black on white or white on black makes text information harder to consume. Sometimes this is desirable. For example, ...


8

Set the containing elements style to text-align:center; set your image style to display:inline-block; margin:auto;


8

Is there a reason that you need to show what appears to be the full website on a mobile version? Mobile isn't just a smaller version of pc usage. It's a different way of interacting, and so you need to rethink what is needed for someone to achieve whatever you believe their purpose is on the mobile site. In answer to your question on images, mobile ...



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