User flow design moves beyond designing individual web pages by thoroughly mapping how a user will experience the website. User flow design aims to encourage the customer (visitor) to enter the website’s interaction space where the user’s needs can be addressed.

User flow design phase can be approached with a set of critical questions that put the user’s actions and needs to the forefront of any design, content and web architecture decision. Interaria maps a user flow experience from several angles:

What is the interest in visiting the site? What is the page the user is landing to? What is the user looking for?

Understanding the context of where the user enters the website helps to define the first steps of the user flow. Interaria utilizes Google Analytics for analyzing the user traffic to a site, and optimally designs specific user experiences based on the context that the user is enters the site. For instance, if a user is entering from Google, getting the specific informational message across fast is important. On the other hand, for a user who is accessing the site from Pinterest, the emphasis on the visual image content is important. Specific landing pages can be incorporated to a site with specific content in order to better target each visitor’s need based on where they are arriving from. When applicable, with coding geolocation API scripts, we can code the website to provide location-based (geospatial) information, typically with an emphasis on local information, upon the user agreeing to this.

What is the desired outcome for when the user visits the site? How is this outcome encouraged in the user flow design?

This is the most important question but it is quite often ignored. It is highly encouraged to outline the #1 desired outcome for when the user visits the site. In most cases this is having the visitor contact the site’s owner, subscribe to a service, make an online purchase, leave a comment for follow-up, or share some content from the site via social media. Which ever the most desired outcome is, the user flow design should make clear pathways to support this action. Call-to-action icons, contextual image icons, personalized messaging, and strong user interface functionality in the site’s navigation structure and information architecture can support the primary goal of inviting the user to interact. Even though the #1 favorable interaction would not happen on the first visit, integrating the user to the interaction space can increase future interaction, and take make the user flow closer to the center through additional interaction such as through social media or newsletter emails.

What is the interaction point after the visit? How is this interaction point established through the user flow design?

In most cases, it is important to plan how the users who don’t want to take #1 action (such as purchasing or contacting) when visiting the site can be reached later. A user flow design that encourages users to take a path for a newsletter sign up and social media participation can keep the interaction points open for future contact or follow-up.

Type Connection, a typographic dating game website, invites typeface enthusiasts to explore how different fonts mesh and match, and support and differentiate.

For two font types to create a harmony with interest, they need to differentiate and contrast and yet feature some common principles in style: legibility, stroke weight and modulation, consistency in weight, and fluidity are all variables that contribute to a make it or break it relationship.
• Visit Type Connection.

All websites and integrated web applications developed by the Interaria team are tested against several criteria such as clean code, web page loading times, security, and overall user experience and usability.

Interaria’s technical website testing process includes systematically troubleshooting any website problems originating either from the code or the set server. During the development process, each web application goes through a documented benchmark testing to make sure that the web applications function optimally and that they include all required and outlined feature set systems.

The benchmark testing includes scalability planning and testing to make sure that the website and integrated web applications can handle increased data input and user increase.

A CMS Admin design process includes designing and customizing the CMS Admin area with the same design dedication that is applied to the website’s front-end design process.

Website’s identity, layout style and user interfaces are typically illustrated in a detailed manner for a client to be able to fully assess the design and development plan for the website. This is a wonderful but unfortunately not always enough. The future website owner should also be introduced to the CMS Admin area usability and user-flow designs as the site owner and/or other members in the company will be using the Content Management System on a daily or weekly basis.

Especially when the front-end web design includes image rich features, different types of text formatting, complex tables and other data formatting, it is important to provide a view to the back-end Admin area design for the client to be able to fully assess the requirements for maintaining such complex features.

A CMS Admin design process includes designing and customizing the CMS Admin area with the same design dedication that is applied to the website’s front-end design process. This includes illustrating the look and feel of the back-end CMS interfaces, mapping a user-flow for each interface (such as how many clicks are required, what is the required learning curve), and providing the client an opportunity for proper testing rounds and an opportunity to give feedback.

Interaria’s custom approach to Content Management System development allows us to design and customize CMS Admin areas for reaching an optimal user experience. We take CMS usability and user-flow seriously. We recognize that websites should be designed for ALL users, including the site owner and staff that frequently use CMS systems.

By choosing an advanced level Content Management System, often referred to as an ‘enterprise’ level system, your company can take control over even the most demanding data variables crucial in publishing appropriate content.

Google Web fonts are open source fonts available for anyone’s use without a license.

Since summer 2011, Google has been offering Google Web Fonts that add creativity to any website without significantly compromising page loading times. Google Web fonts are open source fonts available for anyone’s use without a license. They are a wonderful source to add new font styles to your website and to seek for creative HTML font solutions. Google Web Fonts stream from Google’s server to your website, i.e. this is an API service that requires (free) hosting environment from Google. The snippet command to place a Google Web Font to your website will be coded to your company’s website CSS by your web development team.

One of the most tangible and neat features of the new HTML5 is its capabilities to support drag-and-drop features. HTML5 drag-and-drop feature is defined as an “action of a mousedown event that is followed by a series of mousemove events, and the drop could be triggered by the mouse being released.” (W3C)

For instance, by utilizing HTML5 technology a user may drag online store items to a shopping cart, organize lists of objects in a visual manner, and enjoy different types of online board games that simulate real life playing situations. For uploading images and sending attachments HTML5 is really neat: imagine uploading images from your desktop by simply dragging them to the web page without the need to click buttons such as “browse” and “upload”. HTML5 is turning the user experience from operational to user-intuitive, softening the lines between tangible and virtual.

Interaria is an HTML5 development agency. To discuss how to develop and integrate HTML5 features to your web site, please call 214-909-3900.

HTML5 standards are a building block of a new semantic web where the current web of unstructured documents is harnessed into elegant “web of data”. New syntactical features of HTML5 include video, audio, header and canvas elements that are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins.

For instance, the canvas element allows drawing of complex graphics and animations and is on its way of replacing an external Flash player plugin. The new emerging HTML5 animation programs such as Adobe Edge are promising.

Another key feature of HTML5 is its “built in” ability to play media (audio and video) without any needs of external media player plug-ins. Effectively, a web developer can just drop a media file to the page, and then a browser that supports HTML5 (such as Chrome) knows what to do with the file.

A third interesting HTML5 feature is Geolocation tagging that utilizes Javascript API technology. Upon agreeing to share his/her location, a web/app user may take advantage of customized local information feeds such as finding points of interest in the user’s area, showing the user’s position on a map, providing navigation help, creating location based alerts, and allowing a user to create location based social media tags.

Fourthly, HTML5 supports neat drag and drop features useful for information sorting within a web page, easy social media sharing, and drag-and-drop of images and attachments (currently supported by Gmail in the latest Google Chrome browser and Apple’s Safari 5.x.)

HTML5 has been widely talked and debated about in the context of developing mobile apps. The offline playing and local storage capabilities of HTML5 do create an alternative technology solution for native iOS and Android app development. Many enterprise apps and consumer database apps that do not require specific mobile phone features and resources to function optimally can be developed on HTML5 mode, hence avoiding the “walled garden” of iOS app libraries and their fee structure.

Currently the biggest obstacle for developing HTML5 web media is an uneven support of HTML5 by different web browsers. For instance, some web browsers support HTML5 video while others don’t. This gives double work to a web developer who needs to offer alternative code and be sure to test HTML5 developed web media in all current browsers. Time should fix this problem as browser manufacturers are working to improve their browsers and the web as a development platform.

Interaria is a Dallas HTML5 development expert. Call 214-909-3900 to schedule a HTML5 consultation; how your website could benefit from the latest HTML5 features.

[sources: W3C, wiki, What is HTML5? An introduction to the new features of HTML5, conference presentation by Jason Hanley – Jan 2011].