Thursday, September 26, 2013

3 Reasons Wireframing is useful in Web Design

What is Wireframing?

Wireframing is a process many web designers use to architect the structure of their web site. It is a visual tool for a designer to propose a layout for any given page. It proposes a design for the overall way the content is to be shown on the web site. Wireframes can be done by sketching with pencil or paper, creating mockups in Photoshop, and in many other programs.

Mockflow is one software option we use for wireframing.

Wireframing is usually focusing on the functionality or the priority of content. It is not usually a focus for design elements like typography and color. Many designers want to skip the wireframing step and go directly into working on the design. Although it is alluring to skip over wireframing, it will save the designer time in the overall process because the idea is to layout your ideas before beginning a high fidelity design.

Here are 3 ways that wireframing is useful and matters in any web design process:

1. Wireframes work as a communication tool
    • Wireframes can help communication between team members on the structure of what needs to be created. Designers and developers can provide perspective on functionality using a wireframe has their visual tool. Ideas are presenting more clearly and expectations can be set. 
    2. Wireframes can help your client
      • By providing the client with a wireframe, the client can provide feedback that can be easily changed. A wireframe can help the client understand what content they will want to provide on their web site or web page. A client could reject the design. A visual representation can help the client realize things they are missing or don’t need. 
      3. Wireframes can save you time and money
      • Wireframes are quick and easy to produce. They can easily be discarded or revised for changes.  When the client has been involved in the wireframing process, they are more likely to approve the final design. Wireframing sets a clear plan before development and design begin, which is cost-effective. Spending more time in the beginning will help the website be stronger in the end.
        Which software? It does not matter which software you use for wireframing. The idea is that you get the ideas down in a sketch-like format for review and confirm before high fidelity design composition begins (or before you get too far down the design process where changes can be costly). We have used MockFlow and Balsamiq and even Word or a hand-drawn sketch.

        The things you want to include in a wireframe are:
        • Header
        • Navigation
        • Footer
        • Sidebar
        • Main Content Area
        • Graphics
        Wireframe examples and tools:

        Thursday, September 19, 2013

        Mobile Navigation Trends and Solutions

        Site navigation is a crucial part of every website development project. It requires full design attention. With the increasing popularity of mobile devices, having easy–to-use navigation can increase user satisfaction and convert new visitors into returning visitors.

        In 2012, a Google study found that 96 percent of users came across a site that wasn't mobile-friendly and 72 percent thought it was important that brands should have a mobile-friendly site.

        It's pretty clear. Helping mobile users find what they are looking for more quickly and with less effort will create a better user experience—and, possibly increase conversion rates.

        According to a recent report, Apple smart phones are responsible for 68 percent of mobile sales. Android smart phones made up an additional 31.4 percent of those sales.

        There are many different solutions for mobile navigation, depending on your need, site design, and business goals. These include drop down menus, toggle navigation, footer/anchor, and sidebar navigation. Each solution has strengths and drawbacks.

        Mobile Navigation Solutions

        Window Shade
        The window shade menu style displays in the foreground and underlying content is behind it. Users tap on the horizontal bar as the visual cue and drag the navigation up (or down) to view menu options. Here's an example from the Inc.com mobile site:




        Popover Drawer
        The popover drawer menu style works well when the content of the navigation is light. It's good for websites where the user is likely to jump between each section frequently. Avoid using this type of navigation when content is long and requires a lot of reading.

        Twitter app for iPad

        Double Drawer
        Facebook iPhone app uses the double drawer solution. This is good to use when there are separate types of navigation (e.g., main nav and tools/settings) and allows users to navigate between these areas without digging to deep into content.



        Dashboard
        The dashboard solution is great use of icons and displaying high-level information, but it can be very limiting because there is only so much space for the icons/text on the home screen. The content should only cover one screen. If it covers more than one, find a different solution.



        Carousel Menu
        The carousel menu utilizes a small space for sub-navigation items. To switch between items, users swipe the horizontal bar to see more sub-menu items. This option is useful if users can see the menu items peeking in from either side as a visual cue to swipe.

        Etsy iPhone App


        Radial Menu
        The radial menu option is relatively new and really fun. The radial menu has an icon that when touched, fans out a menu of links. Unfortunately, it is limited to the amount of real estate in the corner of the screen and to about 6 menu items.


        Quick Tips—

        • Try not to overwhelm menu real estate with branding. Keeping a seamless experience between your desktop site and mobile site is important, but be sure to trim down content and remove extraneous information.
        • Avoid two icons next to each other.
        • Avoid using buttons when simple links suffice. This will relieve some much needed screen real estate.
        • Tabs should be placed horizontally. This allows users to switch between different content views rather than scrolling to cover all tabs if vertically stacked.
        • Avoid using your logo as the menu icon. This can create some confusion as the logo is often meant to take users back to the homepage of a site.

        Additional Resources—


        There are many different options for mobile navigation depending on business needs and goals. Having an effective navigation can lead to increase conversion and returning visitors to your website.  Does your business need a mobile site or refined mobile navigation? Let TBH Creative help on your next website design project.

        Thursday, September 12, 2013

        Putting Twitter to work for your business

        Has your Twitter account grown stagnant? Do you have a Twitter account but don't know what to do with it? Maybe you are hesitant to jump into Twitter as a marketing communications tool? Let us help you determine why you should be using Twitter and how you can make the most of it. As with any conversation, there are two sides to Twitter - talking and listening.

        Use Twitter to Engage, Connect & Influence


        Those are your marketing communication goals. Now how do you get there with a Twitter account? As with most marketing communications goals, it's all about the content. You should carefully consider what you want to post on any social media with these three guidelines:

        Social media content guidelines


        1. Content you believe will help your audience: Call it thought-leadership to use a buzz term. You know things that are of value to your audience. It might be directly about your product or service. It might be something that influences your product or service. It might be advice on how to get the most out of your product or service. This content doesn't get stale. This is the content that reaches out to people who may not know about your product. These ideas are the ones that get passed on (retweeted) to new prospects. This is how you engage. This example from Runner's World illustrates sharing an opinion and information about a topic that is important to its audience:



        2. Content based on current issues: The best example here is retail - in November you start seeing Christmas decorations. They are giving their audience reasons to interact based on timing. In your business that could be seasonal but it could also be related to something in the news. Keep your ear to the ground and interact based on what's really happening. There is certainly something engaging about this type of content and you can expect some spreading of the word but this content takes the next step and connects with people. It gives them a reason to interact with you. This post is being written in August and Walmart is capitalizing on the back to school time of year (and also Shark Week on the Discover Channel just for fun):



        3. Promotional content: There's a reason this is last. If all you do is hawk your wares on Twitter - you will turn people off. With that said, there's a time and place and people who are following you like your product or service. They want to know when you're having a sale or event. This is the content that can influence action. See the second post from Diet Coke below. They were running an event and giving people clues only on Twitter - if you're a fan of Diet Coke, that's a great incentive to follow and pay attention to their tweets:




        Helpful resources:

        Use Twitter to Listen to Your Customers

        A good social media plan isn't all push. Successful use of Twitter requires listening and many organizations are discovering a lot of value in social listening. Social Listening, defined as social media monitoring or measuring if you're a data geek, is determining what is being said about your organization online and assessing its value to your marketing strategy.

        One of the biggest shifts in the business-consumer relationship has happened with the explosion of social media. Twitter, Facebook and the like have given consumers a megaphone to tell the world what they think of your service or product. It's important that you hear what they have to say - both good and bad.

        You will be more successful at achieving your social medial goals if you're listening to customers and prospects. That doesn't mean inserting yourself into every conversation or tweet about your company. It does mean jumping in where you can be helpful or to thank someone for a compliment. Good social listening helps you improve your service and builds relationships with people. Listening and appropriately engaging people online creates advocates. And their grassroots marketing becomes invaluable down the road.


        More on social listening:



         

        Subscribe to this blog