Archive for the ‘Website Creation’ Category

Accessibility is key to removing barriers for website visitors with disability

March 12th, 2019 by Erina Hoque

Exploring a website is effortless for many of us (unless you are looking at a very old, or poorly constructed website), but that is not the reality for those with a disability. My recent Accessibility Assessment of a client’s website brought me face to face with this stark reality.

It is important to be aware of the challenges faced by those with a disability, in order to ensure your website is inclusive and accessible to all. Knowledge and understanding of the available assistive technologies also provides helpful insights.

The challenges for people with a disability can be broadly categorized into:

  1. Vision impairments including blindness, low vision, colour blindness. A Screen Reader is a technology that is widely used by the vision impaired. It reads aloud the contents on a computer screen. NVDA is a free and open-source screen reader software. The commercially available JAWS for Windows is another example of a screen reader.
  2. Hearing impairments such as deafness or low hearing. Tools which auto-generate transcripts and captions are useful for those experiencing deafness and low hearing. IBM’s Watson Speech to Text technology is one such tool which converts audio and voice into written text for quick understanding of content.
  3. Mobility impairments e.g. weakness or difficulty in controlling limbs. Speech recognition softwares help users create text and navigate online by speaking into a microphone. One example of speech recognition tools is Dragon Speech Recognition Software which allows users to use voice commands to type and navigate the internet.
  4. Cognitive impairments e.g. learning difficulties, difficulties in comprehension.

Some of the areas of accessibility can be achieved relatively easily for your website via your content management system (CMS). Other issues need a developer to implement the code of your website differently. Still other accessibility issues require consideration during the visual design process.

Below are examples of some easy ways that you can make your website more accessible via your CMS:

  • Non-text content such as images should be accompanied by text alternatives/descriptions to make them accessible to those with vision impairment. These text alternatives are captured and communicated to the user by a screen reader.
  • Including a link to a transcript of any audio content, so that those with hearing impairments are still able to access the content.

Other areas of accessibility can be more difficult to combat via a CMS, for example:

  • Mandatory form fields should be clearly labelled as such, and when users fail to provide input for any mandatory item, information should be provided as text to enable the visitor to identify which fields were omitted. Such error message text should be placed so that screen readers can quickly access that, and read it to the visitor. All visitors will benefit from this functionality, but especially those with cognitive impairments.
  • Ensuring that the content of pop-ups be accessed via screen readers and via the keyboard.
  • Ensuring that identical links are not repeated successively; this causes an issue for a person using your website solely using their keyboard. This can occur unintentionally due to the way a website is designed and then built for mobile responsiveness and with multiple menus. For users of assistive technologies, it can be confusing to encounter successive identical links.
  • Ensuring that there is sufficient contrast between all elements on screen, to help those who are visually impaired to see all information. One example of this which we see on a regular basis due to the cleanness of the design, is placeholder text inside form fields in a light grey (the only guide to a visitor regarding what should be entered into each form field), whilst the information they enter is shown in a darker colour. The lighter text looks nice but is hard for people with vision impairment to see.
  • Video content should be accompanied by captions to assist those with hearing impairment. This is a job for the creator of your video assets.

The above is just a subset of the ways in which a website can be made more accessible for visitors with disabilities – there are many more!

The World Wide Web Consortiums (W3C) Web Accessibility Initiative (WAI) has developed standards and extensive support materials to help understand and implement accessibility. More information is available via:

  • W3C Web Accessibility Initiative website: https://www.w3.org/WAI/
  • W3C Accessibility Guidelines: https://www.w3.org/WAI/standards-guidelines/

The Australian Disability Discrimination Act 1992 requires equal access for people with disabilities. The Australian Government mandated that all government websites must be constructed to comply with WCAG 2.0 by 2014.

Contactpoint would be pleased to assist you with an assessment of your website accessibility issues, or to implement changes to the code underlying your website to ensure that it is accessible.

Facebooktwitterredditpinterestlinkedinmailby feather

Latest trends in website design, and why …

January 22nd, 2019 by Heather Maloney

We have just undertaken the huge task of re-designing and re-building the Contactpoint website. Until last week, our website design was over 5 years old, which is ancient in web timelines, particularly for a web design & development company. Our previous website design was aimed squarely at indicating that we were working with the Windows Metro Tiles in our mobile app designs and builds. The Metro Tiles design style was fairly new at the time, which confirms just how old our site design was!

When you have a large website, with lots of historical content created as a result of hundreds of hours of investment, and when your site covers many areas of endeavour and really matters to the way your organisation is viewed in the marketplace, then refreshing your website is a significant undertaking.

Do you have the impression that your website looks a little out of date, but aren’t sure why? Are you wondering whether it is worth the time and resources required to refresh your website? In this article I will address both of these questions, and of course, I’d be very happy to discuss this questions with you if you need a sounding board.

Current Design Trends

First, let’s have a look at the latest design trends that you will be seeing in the newest websites, and some reasons behind those trends.

1. Cartoon / Hand Drawn images:

Latest design trends - illustrations

It is currently very popular to use illustrations, rather than photos, particularly in software-as-a-service or start-up technology company websites. Illustrations are helpful to convey new ideas without the constraint of a photo, and explain a new concept in pictures rather than lots of words. Similarly, we are also seeing much more use of hand-drawn, unique icons to help direct the user to the right information, and to solidify a point being made. The quirky and hand-drawn style of illustrations and icons make websites more friendly and engaging. You can see this in the icons used on the Yelp website and Slack website for example.

2. Lots of white/empty space providing separation of sections of content, also with less information per section. Both of these visual devices make it very easy for the visitor to take in the content, and focus on the key point/s. The new Firefox website shown above is also an example of this trend. This also makes mobile responsiveness easier, as you have less content to deal with on the mobile, however, it needs to be balanced against the impact on search engine optimisation; Google works out where your site should be ranked primarily on the content you include in your site, so you need to have significant amounts of content.

3. Animation of icons, logos and form fields. We won’t be going back to the days of flaming logos, however, with new programming libraries being created that facilitate easier, sophisticated animations using Javascript, animation is being more freely employed to:

  • provide visual cues to the visitor to suggest interaction points
  • gain the attention of the visitor to more important parts of the site
  • provide a delightful user experience

For a beautiful example of an animated logo, check out: Fubiz (you need to wait first for the whole site to download, and the logo animation doesn’t run constantly so you might need to be patient). The Myer website currently employs an animated logo to emphasise the “My” in Myer matching their TV advertising slogan. The Ikea website uses an animated icon to highlight information about their parcel delivery service.

4. Use of video. Like animation, video grabs the attention of the visitor, and provides for deeper engagement with your audience. The use of drones to create unique footage is also continuing to drive the popularity of video, as seen in the home page element of the new Brighter Lines website.

Video is increasing being used in more subtle applications – backgrounds that automatically play in order to add atmosphere to your website without requiring the user to focus on and listen to audio at the same time.

5. Design for mobile. This is not so much a new trend, but designing for a great experience on mobile devices has become even more important with Google’s recent change to “mobile first” for ranking of websites, whether you are searching via your mobile or not. Not only does your website need to look great on very small screens (and every other size) it must also be very fast to load on mobile.

6. Headings, Headlines and Buttons. Examples of the latest trends in headings, headlines and buttons are shown below. These trends are partly about fashion, but also strive to make text shorter, and calls to action, very clear and obvious. They are used to take the visitor down the desired path.

7. Typography. Choice of fonts has become more important with Google making it easier to incorporate a unique font into your website, without sacrificing load speed or readability. The font used in your website will be focused on ease of reading on screen which is why sans serif fonts dominate. Large fonts, and capitalised headings, are used widely, as shown in the examples above. The space between lines and paragraphs are carefully chosen for readability and aesthetics.

8. Cards, tiles and panels. Google’s Material Design was launched in 2014, incorporating flat design – predominantly solid, strong colours – bringing to digital design the concept of surfaces with edges that guide the user, but can extend based on interaction due to the digital nature of the surfaces. “Cards” and tiles with subtle drop shadows, becoming more pronounced on hover, help to focus the visitor’s attention as well as provide subtle interactivity with your website. Google also provide programming language around the elements of their design system to assist in their implementation. Cards and panels are usually implemented in a grid system, which aids mobile responsiveness. An example of cards implemented by CodePen.io is shown below.

Reddit and other news style sites use this design element extensively.

9. Asymmetrical Designs As a break away from the extensive use of grids and boxes, asymmetrical designs are becoming more frequent. The Cloco website is a great example of asymmetry. Our new Contactpoint home page – custom technology Melbourne with angled background sections are an example, leading the visitor’s eye to want to keep scrolling down to see what comes next.

10. Hardware driving design trends. For mobile app design, the iPhone X requires special treatment due to the “notch” cut out of the top of the display and the introduction of “Super Retina” display. The digital screens now surrounding stadiums such as the MCG and inside the Rod Laver Arena, also drive design changes as they extend the boundaries of what is possible, and increase expectations of viewers.

The above is not an exhaustive list of all the design trends you will be seeing on the web, but it will certainly help you to pinpoint why your site might be looking a little old compared to newer sites.

Why is it important to keep up with design trends?

If you are not in the fashion industry you might question why you need to try and keep up. Certainly, we are not planning to change our website design every time something new hits the web. However, the design of your website, and all your marketing material on and offline, is a powerful indicator of who you are, and who you serve.

The following are important reasons why you might consider a design refresh:

  1. Fashion. There are those who make up the numbers of the “standard deviation” (the outliers who like to start new trends, or go off grain) and then there is the majority; people behave in a tribal way, following the trends of the tribe or group of people with whom they want to identify. The concept of Tribal Marketing asserts that when the trends and look of the tribe that your organisation serves moves, you need to move with them so that you are still recognised as being part of the group and serving that group.
  2. Keeping up. The desire to keep up with the latest and greatest, or not miss out, is a strong drive. Looking outdated can be a signal that your products and services are also not up to date. Depending on your industry, falling behind can mean losing competitive advantage or missing out of value available to others.
  3. First Impression. Research has shown that website visitors make a judgement call about who you are in a fraction of a second. Having a good first impression via a strong website design is important to keep a prospect on your site long enough to find out more about your offer.
  4. Improvements in experience. Most of the design trends described above are not just about changing for the sake of fashion; the changes are part of constant improvement to help guide the people you serve, and want to serve, to action, and communicate your most important messages more clearly.
  5. Communication. Getting your message across – all of your message – can be delivered so much more effectively through design and visual elements, compared to all the words it would take to deliver the same message. The other side of this coin is that your design might be communicating messages to your visitor that you aren’t intending, especially if it has been the same for a long time.

We understand all the steps involved in designing a new look site that appropriately reflects your organisation and positions you correctly for your target audience, and then building your new site to achieve the greatest engagement of your visitors. Don’t hesitate to get in touch to discuss your website or web application design.

Facebooktwitterredditpinterestlinkedinmailby feather

Cloud does not equal the Internet

November 13th, 2018 by Heather Maloney

Cloud does not equal the internet
People frequently use the term “cloud” or “in the cloud” to simply mean located on the internet or their private intranet. I’ve done it myself, for the sake of expedience. However, they aren’t the same thing, and it’s important to understand why so that you can wisely choose the internet services you are accessing for your business or in your personal life. For example, cloud hosting is not the same as shared web hosting, for the hosting of your organisation’s website.

The internet is the connection of computers around the globe using TCP/IP protocol to manage the connections, and participating in the sharing of information using the HTTP protocol (the worldwide web).

The term “Cloud” or “Cloud Computing” refers to technology services, usually delivered over the internet, which are characterised by:

  • Distribution of a system (program and its data) across many servers and locations, to provide for greater performance, but still providing up to date and correct data.
  • Automatic provisioning (addition of greater capacity via more CPUs, memory and disk space) to meet minute-by-minute requirements.

Applications embodying cloud computing are often further labelled as SaaS (software as a service), PaaS (platform as a service), IaaS (infrastructure as a service), and other ‘…aaS’ names. These labels draw attention to which part of the abstraction of the technology is controlled by the buyer compared to the service provider. However, not all applications given these labels actually provide the two main characteristics that I am asserting differentiates cloud computing ? distribution across many servers, and automatic provisioning. Instead, software delivered as a service via logging into a web application may in fact be stored on one server, in one location, with one database, and require the service provider to manually procure and set up new servers when usage demands the additional resources.

The characteristics of cloud technology provide advantages and disadvantages which I will discuss in a moment, but let’s first consider the technological challenge cloud technology is trying to solve.

As you can imagine, there’s an awful lot of information contained within Facebook. Millions of users each adding several posts, and making hundreds of comments, on a daily basis, adds up very, very quickly. Not only is there a lot of data being stored and accessed by users of Facebook, people are posting and reading comments from all around the globe; some on their phones while riding on a train, others are sitting at their desktop computer in the back of beyond, and everything in between. No one will use Facebook if it takes more than a few seconds for the content to appear on their screen, and Facebook is used by people all around the globe. Facebook is just one example of an application which handles vast amounts of data and serves vast numbers of people.

To make Facebook possible, as well as other applications like it, the underlying technology has to be distributed across multiple servers and locations – a distributed system. There are numerous technical models used to achieve a distributed system. Below are brief descriptions of just a few of the techniques to give you a feel for the complexities involved.

Techniques

Sharding. A term allowing a single database to be stored across multiple servers by allocating logical portions of the data onto different servers. A very rudimentary example would be determining which server to store the data based on a range of identifiers such as in the case of user accounts the decision could be made to store all data with a user ID between 1 and 100,000 on server 1, between 100,001 and 200,000 on server 2, and so on. The application retrieving the data would send the query to the application server, and then the database server would work out which server to get the data from based on the user ID, get that data and return it back to the user. There are many options for the way that a database may be divided; the right way for a particular application will need to consider the way current data is spread across it’s attributes as well as how future data may grow.

NOSQL. The example given above for sharding described separation of data contained within a relational database; the most common database architecture up until very recently, which as the name suggests relates tables of information to one another by linking IDs. A person’s record in a database may contain an ID to another table storing the details of the school they attend (name, address, phone number etc) – hence being called a relational database. NOSQL or Document Databases have become more popular recently as they can be spread more easily across multiple servers because all the data associated with the person in the sharding example would be stored in one document rather than spread amongst related tables. Document databases often come with functionality built into them to manage distributing documents in the collection across multiple servers.

Caching. Storing data located near to users, providing faster access particularly for commonly used information is referred to as caching. Facebook makes heavy use of memcache to store recently accessed Facebook information in memory, which is much faster to read than from the Facebook MySQL database which is housed on hundreds of thousands of servers. Content Delivery Networks (‘CDN’) are an example of caching of web content to ensure it is closer to your website visitor.

Other concepts such as virtualization, utility computing, and grid computing are also key in the implementation of cloud computing particularly with regard to auto-provisioning of additional computing resources.

Advantages

We have touched on some of the advantages of cloud computing in relation to the problems it is trying to solve. The advantages can be summarised as:

  • Security. A cloud solution must be focused on security in order to have success over the long term, and they usually have significant resources at the ready to keep security up to date, and respond quickly when a new threat arises. Look for:
    • End-to-end encryption which ensures the encryption of all data in-transit across the Internet and stored at-rest in the cloud, with the encryption keys held by you and used to encrypt the data before it leaves your computer.
    • Sophisticated access controls allowing you to set role-based authentication to control what exact data each user can and cannot view, edit or share.
  • Performance. Because there is likely a server nearby to the user, rather than the user’s request needing to travel half way around the world and back, you can expect the speed of cloud systems to be significantly better. Performance is a key factor for organisations with a workforce distributed around the globe.
  • Scale. The ability to distribute an application and/or its data across multiple servers and locations removes or significantly reduces the constraints on how large an application can grow or how many customers it can efficiently serve.
  • Cost. Another key benefit of cloud is that usually someone else is responsible for concerns such as installation of software and purchase of licenses, management of software patches, backups, hardware upgrades and repairs, anti-virus and protecting against malicious attacks, all handled by the provider of cloud computing rather than the organisation requiring the technology. When comparing the cost of cloud and non-cloud you must take into consideration the total cost of ownership of the alternatives. Auto-scaling (also referred to as elastic computing) is a factor in both cost and performance, as it allows systems to scale up (additional costs) when demand increases, and scale back (reduce costs) when demand is low, allowing the owner of the system to only pay for resources when they are required.

Disadvantages

It is important to also be aware of the potentially significant disadvantages of cloud computing:

  • Data ownership / sovereignty. Where is your data really? Who has access to it? Have you read the terms and conditions with respect to the ownership of the data? Can you remove your data permanently, or will it still be accessible by the cloud provider even after your account is closed? Often the owner of the data you place into a cloud computing solution is actually the cloud provider, not you. To help mitigate this issue, some cloud providers are implementing servers in additional countries including Australia, to help organisations to use cloud services without moving their data overseas, but you need to check where your data is stored; often such storage choice will increase the cost of the solution. NB: even if your data starts out being stored in Australia, if the data is owned by a US company, they may be forced to move the data back to the US for scrutiny by American law enforcement agencies – this has already happened in the case of Google in February 2017.
  • Privacy. Facebook has been criticised at the highest levels of American government, and by governments around the world, for the way in which the data it gathers (albeit via their free service) has been used and sold on to 3rd parties. The situation with Facebook and other cloud solutions has been a factor in leading to the new European privacy legislation (GDPR). When you utilise cloud platforms, are you comfortable with manner in which they use the data that you are storing within it (read their terms and conditions)? Can you trust the organisation to abide by their promises?
  • Control. Can you create the functionality you need to support your particular processes, or are you now constrained by the services provided by the cloud platform? Using a cloud service to remove the need to create that service constrains you to the functionality the service offers. The more you depend on a 3rd party service, the less likely you are to be able to innovate in that area of your business on application, which may well slow your organisation down and remove your opportunity to create competitive advantage.
  • Cost. Whilst being able to pay per second for your application using cloud technologies may sound like it is going to reduce your cost, if your application isn’t built to take advantage of cloud technologies, the opposite may occur and your costs can be significantly more than using simpler internet technologies. Cost can also be significantly greater if you use the wrong technology on the wrong cloud provider. For example, whilst the major suppliers of cloud technology usually allow you to run any type of application on their cloud servers, the cost of running those different types may be very different. Running a MS SQL database on Google Cloud is extremely expensive, for example, compared to running it in the Microsoft Azure platform. You need to choose your technology wisely.
  • Skills. Not everyone developing applications is experienced in working on large scale applications, and the implementation of applications using cloud technologies is relatively new, so finding personnel with the required skills can be very challenging.

Whilst I have primarily been discussing cloud computing from the point of view of building an application such as Facebook, cloud computing underpins solutions such as Office365, DropBox and GSuite. These applications allow users all over the world, sometimes the one person in different parts of the world in one day, to access their data – emails and files for example – and programs such as GSuite and Word Online, with great performance, and without the data being [noticeably] out of date, most of the time. Such applications are also increasingly providing users with the capability to collaborate on files e.g. contributing to an online document simultaneously, again while located in different cities and countries.

For such commodity type applications, where easy access from anywhere, across multiple devices, makes business much easier, the decision to sign up for cloud computing may feel like a no-brainer. But you still need to consider the disadvantages discussed above.

In summary, not all internet applications are using cloud computing technologies. Cloud computing is a complex area, utilising multiple strategies aimed at providing up to date information, to mass users all around the world, with great speed. It is important that you way up the advantages and disadvantages of cloud computing for both your commodity technology needs (email, file sharing, file storage, and other operational systems) as well as when developing your own applications.

If you would like to read more:
https://enterprisersproject.com/article/2017/1/three-things-companies-must-know-about-data-sovereignty-when-moving-cloud
Use of Memcache by Facebook: https://www.usenix.org/system/files/conference/nsdi13/nsdi13-final170_update.pdf

Facebooktwitterredditpinterestlinkedinmailby feather

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 ‘,’

Facebooktwitterredditpinterestlinkedinmailby feather

Design-centric Application Development

December 6th, 2016 by Heather Maloney

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?

 

Facebooktwitterredditpinterestlinkedinmailby 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.

Facebooktwitterredditpinterestlinkedinmailby 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.

Facebooktwitterredditpinterestlinkedinmailby 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!

Facebooktwitterredditpinterestlinkedinmailby 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

Facebooktwitterredditpinterestlinkedinmailby 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.

Facebooktwitterredditpinterestlinkedinmailby feather

Subscribe to our monthly

Contactpoint Email News

Our enews is sent out approximately monthly, and contains information on latest digital technologies, and how these can be used to help your organisation grow.

To subscribe, simply fill in your details below: