Tag Info

Hot answers tagged

23

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 ...


19

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

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 ...


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 ...


14

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 ...


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 ...


12

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, ...


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 ...


10

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 ...


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

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: ...


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 ...


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 ...


8

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 ...


8

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 ...


8

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 ...


7

I understood the faith references, but did not immediately relate them to the relevant texts. The problem is that they relate more significantly to the faith than the book. In particular, the fish for Christianity ( and while it is a recognised symbol within the Christian community, I do not think it is so widely recognised outside ) would relate to the ...


7

Jews do not call their religious books the “Old Testament”, for reasons which should be obvious if you stop to think about it. They use the name Tanakh (this is the same set of texts as the Christian Old Testament, but in a different order). Christians consider both the Old and the New testaments to be inspired scripture, though they may pay more attention ...


7

If you are asking this question for a pixel perfect mockup, you can skip the following paragraph. Otherwise, you MUST read it: Except for pixel-perfect mockups, you should not create images for your textual buttons to use in production, especially given the power of CSS for web or styling for desktop/mobile/any other target platform. Because it would make ...


7

Icons are for items you need to find at a glance. You really want to prioritize those commands I'll be using all the time, the ones I'll need quickly with one click. Once I've learned what the icon is I don't have to read; I can immediately identify icons even in my peripheral vision. A thing about icons in menus like this; generally they're for power ...


7

Depends on the PPI (Pixels Per Inch) of the screen. High resolution icons will not look any different on a low density screen than a low resolution icon. It all depends on the underlying hardware. Pouring rocket fuel into your car doesn't turn it into a rocket ship. You should provide images that will suite the screen properties of the devices you suspect ...


7

Short answer: Captions below, titles above. If you're explaining something to enhance understanding of an image, then you can think of it as a caption (even if it's just a word) and place it below. If it's something that is needed for the image to make any sense, then think of it as a title and put it above. The overall concept is that you should not ...


7

An approch you can take is to blur out the part of the image while still showing a teaser so users know there is more to an image. Here is an example I made : A website which uses this to great effect to get users to sign up is quora as shown below Do note, there are pros and cons with just showing partial content to getting users to sign up as ...


7

Yes, there are usability issues. If you do not include the address in a form usable by a screen-reader [eg alt text], how do sight-impaired internet users read it? Is the image of the address a link? Is it a mailto: link? In that case you have defeated your own object and restricted its use to those who have their browser set up with an email client. ...


7

To restate the problem you're trying to solve: you want a user who has a screen-reader (or another kind of browser that lacks images) to be able to tell where the link goes. I think that you've forgotten that you're actually trying to solve a bigger problem: you want all your users to be able to tell where your link is going. Normally, you achieve this by ...


7

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 ...


7

Proximity principle should be the first consideration. After that, it could also depend on the medium of usage. Blogs, newspapers and books for example almost always have the title below the image. This probably has to do with the fact that the images are meant to provide supporting material to the overall content of the piece. So you might read through a ...



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