General security

Biggest mistakes in UI and how to avoid them: Introduction & Websites UI

Agenda:

Important steps before opening Photoshop/Text Editor – a design approach

• a) Know your end users
• b) Form the concept in your head
• Wireframing / Userflow
• Prototyping
• Designing/Programming
• 2. UI mistakes in websites and how to avoid them
• 1. Important steps before opening Photoshop/Text Editor – a design approach

a) Know your end users

Before every activity that you undertake you must know your end users even though this is not always entirely possible. Note, however, that it is a crucial task in order to properly plan the workflow of the application, and consequently, the prototype and the final shape of the product. Understanding your users is usually a long process and will consist of a number of factors, such as interviews and surveys of users, observing their work and testing them. Demographic data can help us in some way. All of this will be crucial for further action. The topic is so broad that I will write a separate article about it. So stay tuned!

b) Form the concept in your head
Once you know enough about the end-user, the first place to present ideas is not on a computer, but in your mind. Keep asking people who are even unrelated to the topic about your project. You can sketch all of your ideas on paper. The main reason for this approach is that every person is lazy (to a lesser or greater extent). You can believe me that after the concept is created on a computer, you will not be too willing to make changes or corrections, not to mention restarting the project from scratch. Loose sketches and ideas written on paper can be quickly erased and improved. It is by default much less binding for all of us. So get to work!

Wireframing
When you think everything is pretty well thought out, you can start a more concrete work on the computer. Start with the workflow of the product. Include all the screens and links between them that you anticipate. The more accurate the workflow is, the easier the later work becomes. It can be done best by UML standards. There are many free tools to do this with. You can find a few here:http://ntt.cc/2009/11/29/60-uml-tools-help-you-design-workflow-easily.html.

Prototyping
After skillful design of the product workflow, you can start creating the prototype. At the beginning, it is recommended that you only create a low fidelity prototype to be able to quickly (and therefore, cheaply) make corrections. Thanks to this, the feedback from the client will be faster. A good idea is to give a bit of interactivity to your prototype (but this topic is also a good material for another article). The viewer will be able to feel better, like he's "flowing" through a real product. It can be done in a free (the cheapest version) way thanks to Hot Gloo tool.

Designing /Programming
Surprised? Yes, at the end of this list should be the designing and programming process. After receiving a lot of feedback, we can be sure that product we prepare will be very resistant to serious corrections in the future.

2. UI mistakes in websites and how to avoid them

Error #1 - The biggest mistake is not listening to good advice. Nobody is perfect and you should not be offended by constructive criticism.

How to avoid it? Listen to any opinion about your website. If some of them are repeated frequently, consider changes. If you are unsure of a solution for a page, you can perform a short online poll, even from the page - this will tell you quickly if what you're planning is a good idea.

Website loading takes too much time. On the surface, this issue seems to be trivial. So what if the page takes a little long to load? After all, visitors will wait... Well, no – actually, nobody likes waiting! You can be sure that after a few seconds of waiting, the user will exit the page and be unlikely to come back again. Not only that- Google likes websites that load quickly and are lightweight, ranking them higher. The opposite is also true -if the site is too heavy and takes too much time to load, it will be negatively affected in rankings.

How to avoid it? Think about optimizing your website. Certainly, many items listed as graphics can be displayed using pure code (CSS3 is really powerful). The greatest sin is to display text as an image - not only will users be unable to select/translate/copy and show text to colleagues, it still takes a lot more space than normal text. Flash animations should be replaced by jQuery scripts. More information about Flash issues can be found below.

Unnecessary welcome page. This strange habit is thankfully becoming less common, but still, there are sites where the home page is just an animated company logo and an "Enter" link leading to the actual home page. This "welcome page" does not have any particular destination; it only prolongs access to the content.

How to avoid it? Stop using a welcome page.

Too much animation. A page where things move about can be less clear than those that are pretty static. Too much animation is very distracting. Be sure to use common sense- delicate animation on top of the page (e.g. slider) are elegant and can make the website more dynamic, but flashing headlines and falling snow are already a big exaggeration.

How to avoid it? Use animations sparingly and with large sensitivity. Do not animate text, headers, and any items that may be crucial for clarity for the user.

Poor (too low) color contrast. The result may be very low visibility of text and a greater difficulty for reading. Placing red letters on a blue background is definitely a bad idea. Mention the same colors - keep in mind that quite a large percentage of people in the world have trouble with distinguishing colors. 8% of men and 0.5% of women cannot distinguish colors at all (in Western Europe, the U.S. and Japan, this amounts to a total of 32.6 million people). Therefore, you should avoid this type of tips: Click on the red link to proceed.

How to avoid it? Fortunately, the current trend is already very popular: black letters on a white background. This gives the maximum visibility and makes the site look very professional.

Font size too small. If we talk about the problem of the accessibility of web pages, we need to mention the size of the font. If the visitors of our website will also be older people, we have to ensure that the font is large enough. Anticipating the techie answer- no, not everyone knows how to increase page elements using Ctrl and +.

How to avoid it? If you do not want by default to welcome everyone with a large font, you should add a visible option of increasing the font size.

Banner blindness. This is a phenomenon in which users automatically ignore website items that look like ads. The banner blindness term was first used in 1998 in the article "Banner Blindness: Web Searchers Often Miss Obvious Links" by Jan Panero Benway and David M. Lane. Contrary to popular belief, the more the ad is visible (contrasting with the environment), the more likely it is that the brain will filter internet user promotional material.

Advertisers and publishers) are particularly vulnerable to this phenomenon, which happens because the element is not imparting any specific, useful information. Internet users also do not like the flamboyant, aggressive message. Contextual advertising (e.g. Google AdSense) over time incurs increasing losses due to banner blindness, despite technical and contextual media. So far, however, they are characterized by greater efficiency than traditional banners.

How to avoid it? Avoid common banner formats and the typical position for ads on a page. Secondly, it must take advantage of the complementary color palette of the layout and other pages instead of using contrasting colors. Thirdly –remove animation if it is possible. Keep in mind that the problem is very broad and depends really on the particular user- anyone can react differently.

The whole site in flash. Yes, it's time to admit that it's definitely outdated technology and it's not good to build your web site entirely on it. Flash can be used for on-line games. Flash sites load usually longer than the standard, and if they are more complex, it may not operate smoothly (e.g. on netbooks) as they are not supported by most mobile devices –therefore we are losing quite a large number of potential customers.

How to avoid it? Opt out of creating a site as a whole based on Flash.

Pop-ups and new windows. Admittedly, it is not about the graphical interface, but it is impossible to ignore this error. When you click on a link, the content will open in a new window, and then you usually close it automatically. This is done because most ads open the same way. In most cases, it is not worth creating links in a way that opened in a new window, as some people close them, or would not see the content because of the filters, ad-blocks and so on.

How to avoid it? Links should be opened in the same window.

Lack of breadcrumbs. This is important, especially when the structure of our website has several levels. Breadcrumbs typically appear horizontally at the top of the page, below the title bar and header. They are just a hyperlink to sites that have been previously navigated by the user to reach the current page. For hierarchical structures, hyperlinks usually point to the parent document. Breadcrumbs are user-lead, after which he can go back up to the first page visited. The arrow has been adopted as a hierarchy separator, , although other symbols can also be used.

How to avoid it? Use breadcrumbs.

Lack of alt tag in the img src. Although this is becoming a less common problem due to increasingly advanced mobile devices, it is worth mentioning. If for some reason you do not see the images, you can always read the contents of the alt tag, which by default has to be an alternative image message. Back in 2000, due to the large limit associated with the display of web pages for mobile phones, it was a big hurdle (low resolution, limited data transfer, etc). It was better to display the text version of the website.

However, keep in mind the second reason - blind people can also browse the web. Alt tags are also for them - a special tool to help them "browse" pages and read all the text and images on the sites.

How to avoid it? Always add an alt tag that describes the content of each image to the img src tag.

Unknown font. The use of "exotic" fonts can have the opposite effect of being desirable. Before you use a font that does not occur by default on the system, consider a couple of times if it's really necessary.

How to avoid it? Try not to use unpopular fonts. If necessary, make sure to include alternative default fonts.

GIF/PNG vs. JPG. This problem also applies indirectly to optimizing the website. For example, if during the slicing you don't know which format to use, follow these few tips:

- If the item is small and has an apparently limited number of colors, it's best to save it as a GIF image.

- If the item is small, but has obviously a lot of colors, it's best to save it as a PNG image (optimize PNG files with tools such as PNGslim).

- Otherwise, large items can be saved as JPG images, but be mindful of maintaining an appropriate level of compression - not too big, that the picture becomes ugly and not too small that the size has grown too large.

Navigation. No matter if the navigation is vertical or horizontal, it is important that it's visible and sub-grouped wisely. If the number of pages exceeds a dozen, it's best to share all of the categories and/or opt for a multi-level menu. If the user does not know how to quickly return to the main page, in 9 out of 10 cases, they will click on the logo. If this is not linked, do it as soon as possible!