Archive for the ‘Website Creation’ Category

Can voice input be added to my web form?

October 13th, 2017 by Heather Maloney

power-of-voice-newsletter
Given the recent proliferation of ads about Google Home, it’s now common knowledge that you can easily talk to electronic devices and instruct them to do things such as search the web, play your favourite tune, give you the weather forecast, call a friend, or tell you the time of your first appointment on a particular day. Google Now is the technology that enables voice control of Google and Android devices, and Siri powers voice control on Apple devices. Windows 10 provided Cortana to do the same.

When you are using a smartphone to interact with a form on a web page, then you can usually fill in a form using voice … how easy or hard that is depends on your device. On an iPhone (and an iPad) when you bring up the keyboard in a form, there’s an additional ‘microphone’ icon that you simply need to tap in order to speak your entry. If you are using an Android Samsung Galaxy phone, you can switch your entry from keyboard to voice by swiping down from the top of the screen and choosing Change Keyboard, and then choosing Google Voice … yes, that’s 3 steps :-( .

When it comes to using a PC or Mac, filling in a form usually relies on typing. Now that I am getting used to talking to electronic devices, I find myself looking for more ways that I can use my voice to control the device rather than having to type everything. Talking, even for me as a very fast touch-typist, is quicker than typing. Plus, speech control enables you to control your device when you need to be using it hands-free.

What about my web form?
In answer to the question posed by this blog article, yes! voice input can be added to your web form even when you are entering text on a PC or a Mac. To demonstrate, we’ve added a very simple voice entry capability to the enquiry form on the Contactpoint home page. Please note; this example only works in the Chrome web browser, and of course you must have a microphone on your PC or Mac in order to speak to fill out the form. To use the voice input:

  1. click or press on the microphone icon beside a field
  2. click to Allow access to the microphone (you will only need to do this the first time)
  3. talk to complete the field!

As you are speaking you will see that there’s a red recording icon pulsing in the browser tab. When you stop talking, the recording will also stop, and then what you said will appear in the box.

From a programming point of view, there are several ways to implement voice input into a web form. The example on the Contactpoint home page uses a very simple method involving Javascript and the webkitSpeechRecognition which is an API for Google Chrome, giving the browser access (after the user has specifically allowed it) to the microphone and then handling voice input very nicely. Google’s team has spent many years refining speech recognition, and the webkit gives you quick and free access to their powerful functionality.

Other Javascript libraries have been developed to enable much more sophistication in the manner in which you can use voice to interact with a web form. Annyang is a great example, whereby specific parts of your web form can have tailored voice interactions enabled so that whatever you say has context e.g. choosing from a drop down list in a form will know about the allowed options, and match the voice input with one or more of those options. Due to the additional sophistication, there’s obviously more effort involved in using this library. Another benefit is that Annyang functionality works in any web browser.

If you would like to improve the usability of your web forms by enabling speech entry, feel free to get in touch!

Handy Hints for voice entry of text:
If you speak your text message without including punctuation, paragraphs and the like, it can be a lot harder for the recipient to understand your message. But have no fear, the following list will have your test messages reading just like you typed it!
“full stop” – if you pause and then say “full stop” Google Now and Siri will type in a ‘.’
“exclamation mark” – if you say “exclamation mark” Google Now and Siri will type in a ‘!’
“question mark”- if you say “question mark” Google Now and Siri will type in a ‘?’
“new line” – if you pause and say “new line” Google Now and Siri will move the cursor down to the next line.
“comma” – if you pause and say “comma” Google Now and Siri will type in a ‘,’

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Design-centric Application Development

December 6th, 2016 by Kaveh Saket

Design-centric application development

A design-centric approach to application development (that’s web applications and mobile applications – is there any other sort these days??) differs from customer-centric or technology-centric approaches which have been more common of recent years. A design-centric approach focuses primarily on ensuring that the user experience is perfect – or perhaps more accurately “nearly perfect”.

There is always room for improvement – another revision, a new update – and users want continual improvement to make their life easier. User experience has been made king because research shows that organisations which focus on design significantly outperform those who don’t.

In a customer-centric approach the customer is asked what they want, and then the designer will set about delivering to their requirements. In a technology-driven approach, the technologists build the best algorithm or new solution to solve a particular problem and then look for a customer who values the technical solution. However, following a design-centric approach the designer will research the best current solutions in the problem landscape, put themselves in the customer’s shoes, and determine to provide the simplest way to achieve the desired goals. Gathering feedback on the design from a variety of potential users of different levels of expertise follows, and leads to iterative refinement until the first version is achieved. The developers – the people who turn the design into reality – are then directed by the design team to ensure that the intended outcome is achieved.

The Uber mobile app is a great example of design-centric application development, which is a significant factor in its amazing success. Anyone who has used the Uber App will agree – from being able to see where the on-approach vehicle is on the map, along with the number of minutes until it arrives continuously updated until arrival, to seeing a photo of the driver and vehicle, one press to make a call to the driver, and immediate payment upon arriving at the destination without needing to handover a credit card. I could go on and on about the ease with which you can hail an Uber, and receive a brilliant experience of private transport…

One of the challenges of current application design is dealing with content. Having little visible content is a very quick way to send users heading for the hills … imagine Instagram with no photos when you launch it, or Twitter with no tweets to read, or Facebook with no posts. However, masses of content with no simple way to navigate it, can be just as off-putting. Requiring a user to search has been the standard approach for many years. Filtering and other ways of helping the visitor to easily drill down to the content they are most interested in, have developed more recently.

At Contact Point we have been embracing SCRUM methodology across our organisation, which also readily supports a design-centric approach. Starting with our client’s goals and objectives within their particular competitive landscape, and their customers’ wants and needs, we will:

  • undertake research into common solutions to the design problem at hand,
  • brainstorm other potential approaches with trusted and experienced colleagues,
  • wire frame the potential solution, getting feedback along the way,
  • apply creative design to the wire framed solution,
  • carry out user testing of the design, iterating as necessary to refine the solution, and
  • finally develop the solution, taking care to ensure that the essence of the planned user interaction is achieved

The above steps will be undertaken for each logical entity that collectively forms the solution, at the same time ensuring consistency throughout the solution as appropriate. After the development of each component, real user testing of people across a broad range of skill levels, will then lead to further refinement. Programmatic A/B testing will allow two or more potential solutions to be tested head to head to ensure the best solution evolves.

The successful execution of a design-centric approach involves many steps, and requires an appetite for iteration, well beyond the launch of a new solution. However, the results are impressive, and for all but the simplest of tasks, likely the only way to achieve raving fans of your solution. Design-centric doesn’t mean that the customer is ignored. In fact the opposite is true with a greater focus on experience combined with needs and wants. Neither is technology ignored – utilizing the most up to date and elegant technology is also paramount to ensuring a great user experience.

What is the best user interface you have experienced from a web or mobile application?

 

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Is it time to fix my website?

January 24th, 2016 by Heather Maloney

Is it time to fix your websiteThe start of the year affords most business owners a little more space to consider our organisations from a more macro perspective. For many businesses, their “shopfront” is their website. Making sure that your shopfront is presenting your organisation appropriately, and delivering the best results, are macro questions businesses owners should ask on a regular basis.

A key objective for many websites is lead generation, and therefore another important question is “Am I receiving enough inbound leads, of the right type of people, through my website?”

The right type of person is important. If the leads arising from your website are predominantly from people who need a different product or service, or are looking for a cheaper alternative, or who are too large or small for your organisation to effectively support, then there’s a problem.

The enough will depend on the size and resources within your organisation. Most organisations have a limit to the number of inbound enquiries they can handle well at any point in time.

If the answer is “no”, you aren’t receiving enough qualified enquiry (or sales) from your website, then you will have one of the following problems:

  1. Not easily found. Your website isn’t being found in the search engines, on the right search terms. Or looking at this another way, the right people aren’t searching using the terms for which your site is optimised.
  2. Stopping at the door. When people find your website, its appearance or the user experience is turning people away. For example, they can’t quickly find what they are looking for, or trying to view your website on a phone is difficult.
  3. Failure to engage. When the visitor reads through your content or uses the functionality you provide, they aren’t engaged, their curiosity isn’t aroused sufficiently or their questions aren’t answered, so they move on rather than submitting an enquiry.

If you have invested heavily in your website (e.g. financially, including your own time, or emotionally), it can be painful to admit that it has any of the above problems, or know which one/s. Looking at the data about your website performance will help you hypothesize what may be wrong.

Bounce Rate
Your website bounce rate is a measure provided through Google Analytics which shows the percentage of people who look at one page of your site, and leave your website without clicking anywhere else. This measure can be an indicator of the engagement problem, a user experience problem, or that the visitors who are arriving are the wrong type of people.

Pathways & Exit Pages
Google Analytics will also show you the most common pathways through your website. When a person arrives on page x they then usually go to page y, and page z and then leave. This may help you to identify the pages that need to be re-written so that you aren’t losing visitors because of poor content, or because you aren’t making it easy for them to take the next step at the right point in their likely pathway.
Alternatively, you may find that visitors are mostly going down a path in your content that isn’t the optimal path for the information they require, and therefore the information architecture or calls to action need adjusting.

Device Usage
Google Analytics data will show you the percentage of your website visitors who are using a mobile device. This will help you determine whether it is time to invest in a mobile responsive website. Having a mobile responsive website will also help with your search engine ranking. As of the 21st April last year, Google made it clear that for people searching while using a mobile device, that it would give preference in the search results to websites that are responsive.

Search Terms and Search Engine Ranks
Your Google Analytics data will also give you a guide to what search terms are delivering visitors to your website.
A check on where you are ranking for search terms you are targeting will help you know whether you are likely to be found. You should be aiming for as close to the top of the first page of results as possible, but definitely in the first 3 pages.

Google Keyword Tool
The Google Keyword Tool will help you determine what search terms are most being used to search for your type of product or service, and how competitive those search terms are – useful if you are considering using Pay Per Click advertising to bring visitors immediately to your website when your organic ranks aren’t good enough.

Competitor Research
Assessing the websites of your competitors against a set of pre-determined criteria can help you to identify where your website might be less engaging.

As long as you have Google Analytics setup against your website, easily available data can be a great source of information about what may be causing a lack of inbound enquiry from your website. The following techniques will help you go deeper into the analysis of the problem.

Market Research
Asking a statistically significant number of people in your target market a set of well-crafted questions can help you to identify how your target market are perceiving your website, and what might turn them away.

You need to be able to answer the question: “Will my target audience find the answers to the questions they are likely to ask?” and “Will my target audience find solutions to their common problems?”

Conversion Rate Optimisation
If you have setup conversion tracking on obvious places within your website such as hyperlinks and form submission buttons, you will be able to calculate the conversion rate for visitors being presented with that content. Conversion tracking can be achieved using various tools – Google Tag Manager being one of them.

If you are advertising your website through Google Adwords, click through rate is an important indicator of engagement with your ads.

If the traffic to your website is sufficient, programmatically delivering alternative content to a page, and testing the conversion rate of the alternative text, will provide you with sound data on which alternative is the more optimal for producing engagement. For example, if your analysis suggests that the content is an issue because the text isn’t speaking directly to the target audience you may decide to craft 2 or more alternative headlines, introductory paragraphs and calls to action, and then test these against one another for the most beneficial version.

There’s lots involved in making a website great. “Fixing it” may require a full design refresh and re-build into a mobile responsive website with richer functionality, or it may be as simple as re-writing the content to be more concise, helpful and engaging and/or adding more obvious calls to action.

If you would like to discuss the performance of your website, don’t hesitate to get in touch.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

ecommerce; the amazing opportunity to improve customer service

February 19th, 2015 by Heather Maloney

online shopping gives rise to improved customer servicePeople often think of online stores as being devoid of customer service compared to the local retail outlet. After all, in a physical store you can ask for help, discuss various products and what they do, and receive your product immediately.

However, a scenario over the Christmas break gave me an example of where online shopping comes into its own with respect to customer service. My mother thought she would try out buying her groceries from Coles online rather than making what has become an arduous trip down to the supermarket. It’s arduous because she would need to take my handicapped sister with her, and she can be quite a handful, especially when you are also trying to push a trolley, and keep her with you as you are walking back through the carpark, and cars … and of course my mother is no spring chicken. In addition, my mother has recently hurt her shoulder and therefore pushing the trolley, and carrying the groceries from the car to the kitchen is also an ordeal.

Introducing online grocery shopping … my mother was so excited to receive her first delivery from Coles. “This is really living” she exclaimed. “It’s as if you are back to the old days of customer service where you went to the grocery store counter, gave them your order written on a piece of paper, and they packed it all up for you.” My mum was very pleased with the ‘delivery-to-the-kitchen-table’ service, ensuring that she didn’t need to pick up or carry bags anywhere, and the delivery cost where she lives is next to nothing compared to the convenience. Actually, Mum expects to save some money by not buying impulse items placed in strategic locations around the store. She was delighted with the products selected, feeling that she got the best on offer (not those picked over and prodded by others), and amazed at receiving SMS messages telling her when it would be delivered etc. Placing a future order is even easier with prompts to order commonly purchased items and the option to save your shopping list for future use.

Of course online grocery shopping isn’t going to suit everyone; we can’t all be home during the available timeslots to receive our delivery, and sometimes we do just need something right now. However, it reminded me that online stores by very nature give us the opportunity to provide even better customer service than the physical counterpart. Below I have described some unique ways in which customer service can be improved through online stores. Consider these in relation to your online store (or that of your friends / colleagues):

  • icon-searchproducts3Quick searching through the available products – have you ever been up and down aisle after aisle in a supermarket trying to find gelatine or horseradish? With your online store think about the different ways people might like to search for your product, and include those words in the product names or descriptions to ensure they can be found on those words.
  • icon-availabilityAvailability information – again at the supermarket, when you get to the place where you think you should find product xyz but can’t find it there, you have no idea whether you are looking in the wrong place, whether it is out of stock, or if it’s been discontinued. For products with different sizes, you might not know whether your size is actually made in this product. This extra information is easy to supply via an online store.
  • icon-informationReference material about the products can help your customer make informed decisions e.g. where it is made, why you would want the product, how to use the product, list of ingredients, awards won by the product, example images of the product in use, other products that people bought to go with this product, customer reviews, social media feedback etc. This is much easier to do online where you aren’t paying for shelf space to store all the extra information, or for shop assistants to help each customer. It may take some time to put this information in, but it never ceases to amaze me the number of online stores that give scant information about a product and expect the customer to guess about its properties when they can’t touch or feel it, read the box, talk to a person … The reference material may also include details of extended warranties and other product support; when you are offered these as a last minute option at the checkout, it’s very easy to say no thanks and not even really understand what they give you and why they might be worthwhile.
  • icon-supportImmediate assistance via online chat. It is often hard to actually get assistance in a store; once you find an assistant walking the floor, you’ll often be waiting for them to finish with another customer. When you get to talk to a person, they often don’t know much about the product you are considering. Online chat, whilst requiring people to be at their PCs to respond, can allow a single salesperson to deal effectively and quickly with multiple people at once, or pass the enquiry onto someone else who can help. The Miami Stainless website is an example of one of our client websites using online chat very effectively to support the sales process. Online chat also provides the personal touch, counteracting the claim that online stores are devoid of human contact.
  • icon-transactionhistory2Access to Transaction History is usually not a service provided in a physical store, and certainly not at the customer’s control. Online gives you the opportunity to show the customer what they have purchased before, store a wish list, store a “standard” order, remind customers of the consumables they need for previous purchases, notify customers when the consumables are on special …
  • icon-deliveryDelivery is an important part of the customer experience, and must be handled with care for online customers. As in the case of my mother’s online supermarket shopping, and in the case of the time poor, or remotely located persons, it might actually be an advantage of online shopping for some customers. Providing a range of delivery options (express, standard, insured) provides even greater customer service. Because you are packing and sending the product, you also have the opportunity to add items to the delivery. Lots of online retailers take the opportunity to add a little something to give an element of surprise to the customer. I always feel happier receiving my deliveries when my products have been lovingly packed (which is a bit like unwrapping a gift, even though you know what’s coming) compared to stuffed in a parcel bag with a grotty picking slip.
    Of course for downloadable products, the delivery is immediate, and you need to ensure that the delivery mechanism is secure, easy for the customer, and repeatable where something goes wrong.
  • icon-after-sales3After Sales Customer Service via email or phone is also a very important way online shopping can provide better customer service than in store. The customer doesn’t need to get back to the store and remember who they spoke to and on what day, they can simply refer back to their order. Online store operators need to check emails regularly. Depending on your product, having a knowledge base of likely questions or problems the customer may encounter is very important. Providing an easy process to follow with regard to returns (if you allow them) is very important also to ensure your customer comes back again.

You may have experienced yet other ways in which online shopping can provide additional customer service. I’d love to hear your examples here, so please add your comments below.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Parallax Scrolling Websites: What are they and why are they useful?

January 29th, 2014 by Vincent Lai

Parallax Design is set to be one of the biggest trends in web development in 2014. But what is it exactly? And why should we bother? Long story short, its all about impact.

You may not know exactly what “parallax scrolling” means, but if you have been surfing around the web lately, chances are you have experienced it, and it has probably made an impression on you whether positive or negative. The term “parallax scrolling” refers to the technique used in websites where elements on the page move and shift at different rates, giving a sense of depth and interactivity to the page itself. It can be used in many different ways, and can bring a different approach to presenting your website.

Product Innovation and Communication Websites are the most likely candidates for using the Parallax Design technique.

Let’s say you are putting together a product, something that is new in the industry, or revolutionises an existing product.  You will want to show this product off, give the customers and clients something that they can visualise and drool over a little. Until recently, a detailed image gallery or annoyingly expensive short video were your only options.  A couple of images supplied too little information, and an extensive video sometimes felt too arduous. Organisations have recently used the new Parallax technique in very creative ways, to bring their products to life.

In the Saucony website (http://community.saucony.com/kinvara3/) they use parallax design to show the construction and science of how their shoes are crafted and constructed. As you scroll down the page, the shoe moves and rotates, adding parts and informing the user of the science behind each piece of the product. Added to this is the dynamically shifting background which subtlety follows the movement of the mouse. All in all, this design is very creative and an effective way to showcase their product.

In the Bagigia website (http://www.bagigia.com/), the creators of the leather bag have used the parallax technique to give viewers a 360 degree view of their unique design. This method allows them to show off their special product, and explain the thought process behind the design. It leaves nothing hidden, so that the customer has a better grasp of what it truly looks like, instead of a couple of still photographs against a stagnant white backdrop.

The other use, as mentioned above, is for communication websites. In my previous blog post, I discussed the use of full bleed images for higher visual impact. This technique coupled with Parallax design can take the impact of your website to new levels, and help you outshine your competitors. The best application of this is for websites that exist purely to impart your company information, where you don’t need more complex functionality or design elements.

A communication website that has used Parallax to very well is http://unfold.no/.  They have cleverly used the layering effect combined with a looping scroll to create what feels like an endless website.

For Contact Point we have created a Parallax micro-website for our design portfolio (https://www.contactpoint.com.au/CreativeDesignPortfolio/) which showcases some of our work. We have incorporated the dynamic page scrolling links and a layered approach to our imagery whilst using horizontal image scrollers to present our work.

Next time you are contemplating refreshing your website, consider the Parallax technique and whether it can enhance your website visitor’s experience.  I’d love to help create the design!

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Making your Holiday Images worthy of your website

July 8th, 2013 by Vincent Lai

Holidays are great.  They’re a fantastic way to relax, explore new places, spend time with the people you love and we all want to immortalise those great moments in our holiday snaps.  However, as great as those photos are to us as individuals, how often have you looked at another person’s holiday photos and found them genuinely interesting?  More often than not it’s taken with a quick fire digital camera (or worse, your smart phone) with a cheesy generic pose in front of a cliché tourist attraction.  The colour in the photo is never great, and a surprising amount of times, you will find a non-descript passer-by doing something unseemly in the background to ruin what should have been a great memory.

An easy way to spruce up photos and give them a bit more life is to simply switch up the way you see photos.  Instead of a mundane slide show of photos that your facebook friends are most likely NOT going to scroll through one by one, take a couple of varying shots of the same moment, and put them into a collage, each moment being defined by a few different photos of the people you are with, the place you have come to visit and maybe even some candid shots of the scenery or the locals.  Play with the layout, maybe make it into a simple grid, or layer the photos on top of each other to give yourself that artsy appeal.  You don’t need fancy programs and photography skills to turn a couple of boring photos, into an art board that truly tells a story.  One of the best online tools to edit your photos is pixlr (www.pixlr.com).  It’s free to use, easy to master and can help you get the most out of your photos.  Another good tool is the all too famous Instagram.  With its myriad of image filters and effects, it’s not hard to give a boring flat image, a bit of life that it sorely needs.

So the next time you go on holiday, change the way you think about taking those happy snaps and instead of a mundane collection of photos, you can come away with something spectacular.

Here’s a couple of examples of banners created using our client’s holiday pics:

And here’s an example inside the website: www.travelinsure.net.au

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Landing Page Design Trends for 2012 – Website Magazine – Website Magazine

January 17th, 2012 by Heather Maloney

Following the key points described in the article below will benefit the design of your home page, landing page, or email marketing campaign.

Landing Page Design Trends for 2012 – Website Magazine – Website Magazine.

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Is the Appearance of your Website Important?

April 1st, 2010 by Heather Maloney

There are people who passionately answer Yes to this question, as well as those who passionately say No, it doesn’t matter – what is more important is the product / price of your goods or service, and that the website is easy to use. In taking this side of the argument, an example is usually given of a very basic / ugly looking website, which is easy to use, and has a large sales volume going through it continually. Who wouldn’t want the sales volume?

It’s the ‘form over function’ debate.

So how can we account for the ugly, yet very successful, website?

  • An excellent sales and marketing strategy.

However, you have to think that if you continue with the excellent sales and marketing strategy, and add a great looking and easy to use site to the mix, then surely the results would be even better?

I’ve just received an email from a client telling me that her business has increased dramatically since we moved her website from being a basic one page design (it wasn’t ugly, but it certainly needed improvement) to a professional looking site with pages describing her services, testimonials, her background, etc.

The bottom line is that getting the most out of your web presence is, and always has been, about doing a range of things well: a design that connects with your target audience, a site that is easy to use and guides the visitor to where they need to be (this is about design, content and functionality), a strategy to market your site (and your business) to attract prospects and stay connected to your client base over the long term, and a well-oiled system to handle website enquiries and deliver your product/service.

It is possible to do better than your competitors by only doing some of these things well; but if you achieve them all, then you will certainly receive the results.

At Contact Point we are passionate about both the form and the function of a website, with different members of our team specialising in these different areas. We can also assist you with marketing your website and utilising email / SMS marketing to stay connected to your customer base.

What do you think?

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Copyright in Website Footers

November 17th, 2008 by Heather Maloney

In nearly every website we build for clients, we add a footer with Copyright client name and year in it. Recently I was asked to update the year in the footer to the current year for one such website, on the basis that they wanted to appear like the content is fresh. It’s a very interesting point that our client raised; the perception that the date next to the copyright indicates when the site was last updated.

As a compromise, and after a bit of discussion, we agreed that the footer should be changed to have the copyright year as the original year (as it may help to determine the year that the content / design was created for copyright purposes, and also perhaps deter someone thinking of stealing the content) and add another statement into the footer which reads “last updated Nov, 2008″.

What’s your thoughts on this? Do you read the date next to the copyright notice as indicating how fresh the content of a site is?

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Subscribe to our monthly

Contact Point Email Newsletter

Each email newsletter is filled with technology updates and great ideas to help your business grow.

To subscribe, simply fill in your details below: