Interactive Elements

From MobileDesign

1 Introduction to Interactive Elements
2 Buttons or links

[edit] Introduction to Interactive Elements

Interactive elements can be links, buttons, images etc. Basically anything that is click-able. An example is the “Sign out” or “Learn more” links that follow a headline or summary of an article. Usually interactive elements are screaming at you to 'click me'. Others are more subtle using a gray color you can hardly see. It all depends on the interface designer and what they are trying to accomplish with the readers. This specific element can often times be over looked by users, usually because the designer also overlooks how important this element is while designing the site. It is usually the last thing the designer is tasked to do and is just throw in there and looks awful. A well designed site will have a hierarchy of interactive elements, a style guide specifically for their use. Below we will present the basic interactive elements that display on mobile websites. Hopefully, these will serve as a basis for projects or at least remind you not to ignore this important design element.

[edit] Buttons or links

Links are the main way people find information and buttons are used for submitting. Today you will see many links looking like buttons. This is because now you are allowed to style each element using CSS style sheets. This design possibility often times leads designers to over-designing these small but important elements. Be sure when designing to make sure links behave and look like links and buttons behave and look like buttons. Remember the more familiar elements are on a mobile site, the more intuitive the site will be for whoever uses it.

[edit] Unreadable Links

Unreadable links will look similar to what you see above, not noticeable or very faint. Usually used for information that is unimportant or information the designer does not want the user to notice. This style of link is not recommended. If you want a link to stand out make sure the colour is contrasted strongly against the page's overall background.

[edit] Links

Links need to be clear and easily understood by the user so they understand where the link will take them. Usually the default colour is fine unless your background color is something other then white. If this is the case, then you want to change the appearance of a link to make it stand out from everything else.

[edit] Super-link

Super-links usually have an icon with it to show it is more important then regular links.

[edit] Links implying more

This kind of link implies that there will be additional information if you click them. A good example of this is the program Microsoft Word, take a look at main menu bar and and scroll over file. You will see (Save as...) some of the choices will have three dots after them (Open... ) implying that there will be more information.