How can I show small risks visually with an iconograph style - icons

I want to create a type of iconograph that shows the very small chance of something happening to a person (i.e a few little people icons) in a pool of hundreds of thousands or millions. I want to show this by either scrolling or preferably even by being able to 'zoom out' on the image to show the very small risk in the large pool.
I've seen something a little similar, but still a bit too different for me to use (with little coding knowledge at this point) here https://mkorostoff.github.io/1-pixel-wealth/
Any suggestions would be immensely appreciated.
Cheers

Related

Vuforia to recognize logos inside a shopping center

A client asked me about using Vuforia in order to recognize logos on the shop windows. Basically, they want to use logos as a QR.
Is this idea viable? Will it work pretty well? Can you tell my some alternatives to Vuforia about this?
Recognizing logos is hard.
Basically all image recognition algorithms rely on the same principle: trying to recognize "interest points" of the image. These interest points can for example be blobs or corners; in short, we want to look for places in an image where "things happen", compared to (for example) a large solid area painted in the same color where there is not much information to grab.
This comes to trying to recognize discriminant "details" of the image.
When applied to logos, this method tends to fail due to the fact that logos often don't have enough of such "details". Take the Nike logo for example: if corner detection is applied to it, it will only find 2 corners (the 2 ends of the accent). Blob detection will probably give no result at all. This is an extreme example, as the Nike logo is really simple, but even on more complex logos there will often not be enough details for recognition to work.
As for Vuforia: it works in this exact same way, and their web interface (Vuforia Target Manager) is very clear about it: when you upload an image on it for recognition, if there are not enough details on it, it will either warn you that results may be poor or simply reject the image.
To conclude: you can run some tests, it's still the best way to be sure of it, but I wouldn't expect great results. It will probably work for detailed logos, and fail on simpler ones.
Hope this helps!

How can I explain to a programmer that CSS positioning has many benefits over table based layouts?

I have a friend who wishes to work as a freelance web developer, but insists that tables are the way forwards for layouts.
Several points he maintains in favour of tables:
This is what was taught at the beginning of 10 years of programming & computer science degrees, thus it 'must' be right.
Large companies use tables to achieve 'technical' things (like server side scripting and working with forms)
It saves time.
I have coded him some examples of CSS exactly matching table based layouts, and provided many links to articles explaining SEO and accessibility benefits.
With regards to semantic uses of HTML tags, I have explained at length with examples how tables are great for displaying tabular data but not for general layout.
From the perspective of a client, I have been explaining to him that I wouldn't hire someone using outdated methods as their main strategy for layout. As he is my friend and I wish him every success, I believe it is important for him to gain the best start when pitching for work.
The question again: How can I explain to a programmer that CSS positioning has many benefits over table based layouts?
Show him CssZenGarden. You can't do that with tables.
Designing with tables is really easy. Changing a tables design, such as "Put navigation on the left instead of the top," is anything but.
This is what was taught at the beginning of 10 years of programming &
computer science degrees, thus it
'must' be right.
So were frames and marquee tags. people dont use that anymore for a reason
Large companies use tables to achieve
'technical' things (like server side
scripting and working with forms)
If by 'technical' things he means ugly looking things, then hes right. also as i said, tables are good for tabular data, and you SHOULD use them for that. also, i dont see how server side scripting and forms have anything to do with tables.
It saves time.
Yeah it does, at least initially. if you want your code to be maintainable in the long run, tables will not save you time.
I would say that an approach that uses both tables and divs/css is best.
Tell the programmer to look up accessibility requirements and/or 508 standards. Depending on his target market that should mean it's a requirement.
Otherwise challenge him to a contest. Take a scenario of a potential client that likes the functionality but wants this button moved there, that menu moved here, blah, blah, blah. See who wins.
In your friends defense. If he is targeting small businesses, most of them probably won't know the difference if he uses tables or CSS. They just want a site that works.
It really sounds like your friend is just lazy. He's not going to last as a free lance developer for long if he insists on not keeping up with the technology and trends.
Tables were used for layout because that's all we had. It's always been a hack, they were never intended to do all of the things they were put in to. Surely, most programmers today know the history of HTML enough to know why things were put in place how they were...and that at the time of their invention we had NO idea what the internet would become.
No one put them out as a design mechanism, at least no in the way they ended up. So the argument that "that's how it always was" falls flat there. It was that way because we hadn't come up with the right way yet.
I don't personally think it saves time, either. You spend as much time repeating yourself and typing those irritating tags over and over again, all the while keeping straight how many columns your currently supposed to be spanning.
Table-less design has so many advantages (unless you're displaying tabular data). They are more accessible, easier to manage, (generally) smaller...the list goes on and on.
Anyone who is still holding out is simply either not willing or not able to learn tableless design.
I love this question. It does seem still to be a tough cookie.
I'm a developer, and prefer CSS for everything. first of all
1> This is what was taught at the beginning of 10 years of programming & computer science degrees, thus it 'must' be right. - HA
Table format as I've seen is a presentation thing. Therefore should be removed from the logic.
Working with designers, allowing them to change a tables format at will is a big bonus for the freedom of design.
Tables definitely still have their place in the world but large companies only use them as the techincal team are often met with larger challenges than the choice for a table layout or presentation changes
It can save time, but can later meet other problems, again with redesigns, SEO, accessibility.
I've had the problem when wanting to add another field... inside of <div class='cell'>my new field data</div> POP DONE - you have to fiddle with all manor of table formatting, which is time consuming and tedious -
"Working with designers, allowing them to change a tables format at will is a big bonus for the freedom of design." I don't understand this point, could you elaborate further? I am a designer first and have only been learning web coding to meet my clients web design needs. My friend is a programmer, and needs my design skills to help him gain business.
Well, its my experience, every designer has the right to say "I'd like to move that field slightly to the right by three pixels" - with a table it tough to break out the box. Giving the designer an option to either present something in a table format, or do magic -
For example, today - working with Google maps - its my mind, the route steps (directions you get for turn by turn roads) I saw that as a table and thats it. Later the design scope was changed and it was no longer a simple table format. If I did do table stucture - it would have been a recode on my side or an ordeal on the designers part.

The rounded corners Ajax effect is useful for?

I still don't get the point of investing some coding time to add this effect even knowing that it will (probably) not be compatible with all the web browsers available out there. I want to hear your opinions.
The same reason your toilet seat isn't square. Round just feels better.
So you don't hurt yourself trying to create your own.
You see, awhile back as rounded corners grew in popularity, a series of unfortunate accidents occurred. As newer, less experienced designers and developers were seeing the rise in popularity of rounded corners, they saw it as being time to upgrade their square corners.
Sadly in their excitement, they took for granted the safety needed in working with sharp square corners. At this time a single monitor setup was more the norm. So as they flipped back and forth between their design tool and the tutorial, tragedy struck.
The community took notice, and knew something had to be done. "This must be automated! And to make sure people find it quicker, tell them its AJAX that's preforming the magic."
And the rest is history my friend.
Graphic design?..
just to give a good graphical look to your web.
Presentation? corporate ID? Layout? Nice to have?
To engage your users... Or you could save some real coding time and just go with plain old text.

Make Flex show nearest DataTip in an AreaSeries

I'm building a Flex app that includes an area chart, and when users hover over an AreaSeries, I'd like them to see the DataTip for the nearest data point in the series. The problem is that as far as I can tell (and I should admit at this point to being fairly new to Flex), mouseSensitivity is the only way to control when data tips appear.
If I set that to, say, 1000 pixels and tell Flex to only show a single data tip, that sometimes works, but frequently, the nearest data point is not one in the series on which the user is hovering (and in any case, it starts acting odd with such a high mouseSensitivity).
So my question, in short, is how to exert fairly direct control over which data tip is being shown at any given time. Thank you in advance.
Unfortunately i don't think there would be a straight forward method of achieving this just using a charts default members. I would expect you'd need to extend the chart component you were using and tie in with the internal workings of the chart. This isn't such an easy thing to do and the inner workings of the chart components are pretty complex. Something that isn't helped by a fairly messy implementation inside some of the classes.
There are obviously several directions you could take in solving this particular problem some that are more elegant than others.
It's defiantly possible but it's probably not a job for someone that is relatively new to flex. If i were you i would probably try to find a compromise to your requirements until you feel more comfortable delving into the chart components code.
IF you do decide to give it a go then you should come back with specific problems as myself and others are probably reluctant to solve such a big problem.
Keep the hitTest() method in mind: this is often the mouse-related unity of last resort.
Cheers

Best way to show critical instructions to a user in a web app?

I'm also interested in more general thoughts, but here is my specific problem. In an ASP.NET web app, I am connecting to a 3rd-party via API. The 3rd-party requires that the user login and answer a few configuration questions to set this up. All of the questions except one the user can just choose the default. On one question if the user chooses the default option, my app won't work with the 3rd-party. It is a limitation of their API. It is on their list to fix, but who knows when or if they actually will?
So what is the most effective way to give the user instructions in my app that they will follow once they go to this other site? Right now I have a screenshot with the option circled in red, follow by some descriptive text. What other techniques have you used in a similar situation?
Red text is the default mechanic in UI design to indicate importance (which is why it's used for errors so often).
Asterisks are the default choice for indicating required input.
Avoid flashing, and other garish-looking visual mechanics.
If this extends beyond a one-time inquiry, you should look at reading some good GUI books, like Don't Make Me Think: A Common Sense Approach to Web Usability and Designing Web Usability, both seminal books in the field.
I think you're headed in the right direction. I would make sure that your illustrative screenshot is large and easy to see the relevant details on. Also, some highlighted (classic yellow background ala 37 signals?) text to emphasize the importance of NOT selecting the offending option would be helpful.
Also, make this screenshot and highlighted instruction text, the VERY last thing they see before you forward them to or present the 3rd party site. Maybe make the action link (button, link, etc.) explicitly outline their acknowledgment of the thing not to do.
Maybe even, have fun with the caption like...
"I understand that choosing the default option above won't work."
Just some thoughts.
Unfortunately, nothing you can do will prevent idiots from choosing the wrong thing anyway. Basically, you can't make it idiot-proof.
This is more for GUIs but (depending on how critical this is) you can force users to type "I will choose xyz" before a redirect.
Is there a way to set a default on your end to get around this problem altogether? For example, picking some random setting initially that they could change in a profile of some kind that you can store on your end.
I've typically seen a red asterik(*) used for marking required fields on web forms if you want to not pre-select some value for the user for another way to try to solve this issue.
I know you want abstract, generalizations but there is no one true answer for what you're asking. I mean, what kind of content are we dealing with? Is the content broken up over multiple pages (or should it)? What kind of users generally use the form?
I know I've dealt with similar problems in dozens of different ways. Ideally you want not start treating your users as complete retards straight out of the box (just move to that progressively as they fail tasks), but you also want to be clear on what's going on.
The really high level (and obvious) ideal is that you want to make the instructions stand out to your punters. Colour change and standard icons do this (often poorly). However, changing the background colour of instruction text (to say a light gray) with a large icon (like a yellow sign with an exclamation mark) tends to focus the eye.
Another idea in your situation is to break the content in two. This might be done physically (press next to continue) or you might just colour code that hole part of the element a different colour to notify the user that they need to treat this differently.

Resources