Monday, June 20, 2016

controls - One button or two?


I've got a web app where users can create two different kinds of similar things and I'm trying to decide whether to have two buttons, or one button and then present a choice as part of the resulting form. E.g.:


 [Create Primary Ownership] [Create Secondary Ownership]


vs.


[Create Ownership]   ->    (x) Primary    ( ) Secondary

I like the second one better even though it requires an extra click -- it's more scalable and less cluttered. The situation is more complex, though, because in one version of our product (for a particular set of users), the objects being created are labeled as above, but for a second set of users, the labels reflect the underlying structure better:


[Create Team]  [Grant Secondary Access]

vs.


[Create Team / Grant Access]    ->   (x) Team    ( ) Secondary Access


I hate the slash in "Create Team / Grant Access".



Answer




Two different operations. "Cluttered" is subjective. Best to do a paper test with a few users of course, but based on the information given I would find the second option confusing, while choosing one of two buttons seems obvious.


As a developer, I'm suspicious of anything labeled 'primary' and 'secondary', because 'tertiary' et al is implied ;)


interaction design - Good practice to divide items into groups


enter image description hereI am currently working on an enterprise project, and I've come across a puzzle like this.


There are a range of items (about 10) I need to group. What I do is like a wizard in a single page, letting a user pick several to form the first group by checkbox, and let them pick from the rest to form the second group, and loop on. Of course it is not an elegant way, but currently I cant figure out a better one.



Our system is little bit old fashioned, so please don't use too much rich interaction.




vector - Illustrator isn't allowing me to select part of a graphic


I'm trying to edit a text based image in Illustrator CC but parts of the text are not allowing me to edit or even select them. even clicking Select All doesn't work. has anyone had this problem? any solutions?




compression - Why do JPEG files blur red more than other colors?


I am trying to figure out why JPEG compression causes noise in the red spectrum that is larger and fuzzier in regards to, say, the blue spectrum. I've seen this question and I am not looking for a workaround; I just want to know why red is prone to more distortion during compression.


This behavior is highly visible in 'political campaign' images (where the picture is rendered in red, blue, and some shade of tan), but is visible elsewhere too. Here is an example:
Image of Spock in red, light blue, and tan. Notice the border along the red side?



Answer




Everything @Scott said is true but for better understanding of the WHY and even how come RED seems to look worse, I direct you to this information (emphasis mine and edited for flow)



JPEG ... is designed for compressing either full-color or gray-scale images of natural, real-world scenes [and] is a lossy compression algorithm...


JPEGs are best suited for continuous tone images like photographs or natural artwork; not so well on sharp-edged or flat-color art like lettering, simple cartoons, or line drawings. JPEGs support 24-bits of color depth or 16.7 million colors.


JPEG is actually just a compression algorithm, not a file format. JPEG is designed to exploit certain properties of our eyes, namely, that we are more sensitive to slow changes of brightness and color than we are to rapid changes over a short distance.


While JPEGs are usually the best choice for photographs, on 8-bit monitors they are force-dithered into an 8-bit palette. JPEG compression is treated as 24 bit data (8 bit for gray), regardless of the colors in the original image. Therefore, if you reduce an image from 24-bit to 8-bit prior to JPEG compression, the compression ratio will actually worsen as will the overall quality.


JPEG compression introduces noise into solid-color areas, which can distort and even blur flat-color graphics. This is why JPEGs are not well suited to flat-color sharp-edged art or type. A JPEG can reduce a 900K 24-bit image to 45K (high quality) or 30K (medium quality), a factor of 20:1 to 30:1. With JPEGs, however, the more you compress, the more edge definition and sharpness you lose. JPEGs do not support transparency, either.


It is important to note that saving a graphic to JPEG format with compression should be a last step. Compression effects are cumulative. This means that every time you re-save a JPEG file, you are compressing it further, and thereby tossing away data (photographic detail) that you can't get back.



Now for the super technical details that explain the prevalence of the RED (which is a trick on the eye actually) you might want to read this information (again emphasis is mine)




The starting point of the JPEG compression are the pixels in the primary colors red, green and blue, which are for a lossy compression is not optimally suited. Before the actual compression simply convert the RGB colors, for example, in the YCrCb model that the first channel stores the pure brightness information (Y), so the average of the brightness of the red, blue and green channel. Stores in the second channel is the deviation of the red channel of the average brightness, and in the third channel, the deviation of the blue channel. The value for the green channel can be calculated from this and does not need to be specially recorded. Once you have separated as components luminance (brightness) and chrominance (color), you can reduce the resolution of the two chrominance channels to half or a quarter, as they for the sharpness does not matter. The visual cortex of humans contains independent systems for the perception of colors and shapes, and the color-blind would ignore the former fine resolution color boundaries anyway, the color detection system works again with a three to four times as low resolution as the form of recognition.



Hope that helps you understand better all that's going on.


Sunday, June 19, 2016

website design - Should Mobile-optimized sites allow Zooming?



Zooming is common on mobile because sites aren't designed for it; you need to zoom, generally, you don't want to zoom around. Mobile sites are supposed to not need any form of zooming, and often disable zooming.


It seems against convention to allow zooming for mobile sites; they're supposed to be mobile optimized, and function/display more like mobile apps. You can't pinch to zoom in most mobile apps; the layout is fixed similar to these fixed viewport mobile sites.


Should mobile optimized sites allow zooming? I've heard this brought up as an accessibility/control issue, but accessibility options are generally set up in your browser--make the font larger ect. Pinch zooming is a hassle and on mobile layouts it doesn't make very much sense. But when should it be allowed? What benefits does it give the users or designers?




Active tab state


I found myself confused today using the Adobe Reader Android application when navigating it's tab interface. I wasn't sure which tab was active becuase the active tab state was recessed and dimmed, which led me to this question.


In general, when a tab is in active state should it appear forward/brighter/more colorful and or more prominent than the others?


Also, are there some rules of thumb, for the UI treatments of Tab states.


I am not a designer so I am sure there are some better terms to describe what I am taking about.




Answer



Tabs should look like tabs, not like buttons:


Adobe Reader tab state problem


website design - DPI/PPI resolution for product zoom images


I'm working on an ecommerce site and I am trying to figure out at which resolution to save product images.



We usually go for 72DPI but I believe now we should be using PPI, but also that to account for retina displays we need to save two versions of the image; if we want the largest zoom size to be e.g. 300x300px, there needs to be a 600x600px version so it's not blurry on retina.


Does that mean we need to host two versions or one big one which is downsized for non-retina, and if so, does that affect the speed of the website?


But what PPI do I save these images at? Or is it 144DPI at 2x?


Thank you!




technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...