Archive for the ‘User Interface Design’ Category

9 Reasons to Use Website Animation in your Web Application or Website (and when not to)

April 26th, 2022 by Jimmy Bui

Website Animation

“Website animation” refers to movement of content onscreen, but is distinguished from video / movie content.

There are many useful applications for animation in your website or web application.  Some of the most common animations you will see in modern websites and web applications include:

ACTIVITY INDICATORS

Waiting for a screen to refresh after submitting information is bad enough, but when there is no indicator that something is happening, people get nervous!  The spinning icon that appears in the middle of the screen gives you just enough visual indicator that something is happening, to remove the temptation to click again, just to make sure something is happening.  🙂
Loading animation

Whilst tempting to fill the page with them, that’s the last animation we will actually embed in this post!

Interactive forms

When you click in a form field, and a set of instructions slides into view to help you fill out that field.  Showing (and then rapidly hiding) each keystroke as you enter your password uses animation to help you get your password right, without letting others easily see it.

There are many ways that animation of form elements is used to guide a person to complete a form, including on-the-fly error handling.

Photo SlideShows

Communicating key messages to your audience in the one area of the screen is often achieved via an image & message “slide show” at the top of a website home page.  The home page slider uses movement and visuals in a defined area of the screen to quickly convey information, and attract attention, without the visitor needing to scroll.

Animated Graphics

For example, a logo that draws the attention of the viewer as it “forms” in front of your eyes will help your audience remember your name and branding.  We have assisted clients recently with animated logos as intros / outros for webinar presentations.

Animated graphics are also used to delight the viewer, or make a big impact, for example the animation at the top of the Enudge website.

Animation is often used to help communicate concepts, and is widely found in online learning to emulate a physical educator, and/or visually teach the viewer.  The quiz / card game “Know Lupus” is a great example of the use of animation to educate.

Simulation can be greatly enhanced through the use of animation.  We used animation within a desktop application which helps a user of a centrifuge simulate the movement of liquid through the centrifuge.

The animation at the top of the Contactpoint website is another example of the use of animated graphics, which tells a story to help a visitor understand the types of technologies we work on.

The transitioning text at the top of the Kool Kidz Childcare website is another example of animation to communicate a key message, in a fun and eye-catching way.

What is JavaScript?

JavaScript is a scripting language which used to create and control dynamic website content on both client-side (that is, the content that the person using the web browser sees, and that is located on the visitor’s computer) and server-side (that is, the content that can be programmatically generated in reference to databases and other assets).  Dynamic content allows us to create highly interactive web pages and web applications.

JavaScript is the most common technology for achieving onscreen animation within websites and web applications.

There are numerous common JavaScript frameworks which are used by many web programmers, including:

  • jQuery
  • Vuejs
  • React
  • Nodejs

Each of these frameworks have JavaScript as their base, over top of which they provide numerous packages.  These often comprise:

  • A more succinct or more understandable programming syntax. It’s all still Javascript, but each of the common libraries mentioned above look very different from each other, to the programmer.
  • A collection of tools that achieve specific user interface tasks. That could be anything from common user interface components (such as forms, sliders, carousels etc), security components, data manipulation components, and more.

Some technology solutions require the use of more than one JavaScript framework, or additional JavaScript libraries that have a very specific purpose.  For example, when building a web application which has clear separation between backend processing and frontend design, we will likely use Vuejs for the frontend (client-side) aspects, and Nodejs for backend (server-side) processing.

For very complicated animation, developers may also use additional JavaScript libraries, which make animation easier and more convenient to achieve. The top 5 JavaScript animation libraries to help achieve much more complex animations are:

  • Anime.js
  • GSAP
  • Velocity.js
  • Threejs
  • MO.js

Reasons to use JavaScript to Animate

JavaScript is used for the following general purposes:

  • Adding interactivity to the user interface e.g. animation of key content to draw attention to it, guiding a user through submitting form.
  • Creating web, mobile and desktop applications. Because Javascript can be used for both client-side and server-side functionality, it makes it a great candidate to fast performing apps.  Developers benefit from using similar technology both client-side and server-side, as there are fewer languages required, and interactions between similar technologies has advantages.
  • Building web servers and server applications.
  • Game development. Although, very complex, multi-player games are more likely to be written in lower-level languages.

There are many reasons why JavaScript is the best choice to animate a website or web application, including:

  1. JavaScript is native to the web browser, meaning that it runs very fast.
  2. Whilst it is also possible to create animation within a website using CSS (cascading stylesheets), you can usually achieve the same thing (or better) in JavaScript more easily and with better browser support.
  3. It is a very popular language, which means that there are plenty of resources available when a developer is attempting to achieve a particular user interface.
  4. It has a very large online community, which provides strong support for learning and developing.

Although, it isn’t the only choice for creating animations, and for specific tasks might not be the right choice.  For example, the animated logo mentioned earlier might be better achieved using a .svg file, which is a special vector format image, that can be programmed to animate and retains perfectly crisp edges at any size.

When selecting a particular JavaScript framework, we consider the main features of each, and ensure that we choose a framework that will provide the right set of tools for the required solution.

When should a Website Avoid Animation?

We recommend that you should not include animation within your website or web application for the following reasons:

  1. Just because you can i.e. don’t animate everything and anything just because it is possible.  Animation for the sake of it can end up being annoying or distracting.
  2. To shift the location of web page content after page load.  Shifting page content can cause Google to penalise your website’s rank in its search engine results when Google determines that it is negatively impacting on the user experience.
  3. If it is unnecessarily slowing down the performance of your website / web application.

 

If you would like additional animation added to your website or web application, the Contactpoint development team is ready to help!

Facebooktwitterredditpinterestlinkedinmailby feather

What are WebP Images, and when they should be used?

April 12th, 2022 by Pavithra Kameswaran

The speed with which your website / web application loads is a key factor in a great user experience, and also has a big impact on the ranking of your website in search engines such as Google.

While there are many things that can be done to optimise a website and its performance, one of the most common factors that we see slowing down websites is the use of very large images.

That’s where WebP Images – the most recent image format to be introduced on the web – comes into play.  WebP images can significantly reduce the load time thus increasing website performance.

What is a WebP image?

A WebP image is an image that has been created using the WebP format.  The WebP image format was developed by Google and first released in 2010.  A WebP image has a file extension of, of course, .webp.

You may not have heard of WebP images before, even though they have been around for over 10 years, because web browser support for the new image format has been slow to arrive.  In addition, your image editing software is unlikely to have the option to save your image to the WebP format.

Below is an example of a .webp image.  As a .jpg its size was 451Kb.  As a .webp image it is just 97Kb.

To understand how the WebP image came to be more effective than the other formats, we need to know a little about image compression. When an image is optimized, some form of compression must be applied to it, thus reducing the file size of the image. There are two general types of compression:

  1. Lossy compression – the overall idea of lossy compression is to reduce the file size by removing some of the [less necessary] image data. This results in the loss of quality to an extent from the original image, and so the most successful lossy compression does so in a way that is very hard to detect with the naked eye.
  2. Lossless compression – this type of compression involves reconstructing the image data in such a way as to reduce file size, without removing any of the information about the image. Since all the image data remains, we can also reconstruct the original image from a lossless compressed image. This cannot happen in a lossy compressed image since some of the image data has been removed.

The WebP image format can use both lossy and lossless compression, and according to Google, the WebP image format can achieve approximately 30% smaller sized images compared to PNG or JPEG.

Technical information about WebP Compression

For those interested in the underlying technology, below is a summary of how both lossy and lossless compression is achieved for WebP images:

LOSSY WEBP

The WebP image format’s lossy compression technique is based on the VP8 key frame encoding (which was created by On2 Technologies in 2008).  It uses a methodology called predictive encoding whereby redundant data is identified and discarded, and only the remaining data, known as residual, is used for compression, making the compression more effective. The residual is then quantised and lossless-ly compressed using a lossless compression methodology called entropy encoding. Although lossy compression takes place, the residual image data is lossless-ly compressed and therefore retains quality. The fact that WebP uses a predictive coding methodology makes it much more effective than JPEG.

lOSSLESS wEBp

The lossless compression technique for WebP images was created by the Google WebP development team. As lossless compression is all about reconstructing image data without removing any of image information, the image is transformed using many techniques such as Spatial transformation, Colour transformation, Subtract Green transformation, Palettes transformation and Colour cache coding. The transformed data is then entropy encoded as performed in the lossy WebP compression mentioned above.

Google reports a significant difference with lossless WebP images being 26% smaller in size than PNGs and lossy WebP images being 24%-35% smaller than JPEGs with the same SSIM quality index.

Reduction in file size also means that there is significant reduction in storage space which is also important in websites that are image-centric.

Other Advantages of WebP Images

WebP also enables lossy compression of transparent images.

This is a major advancement as none of the pre-existing image formats provided this feature. Up until the introduction of the WebP image format, if a website needed images with a transparent background, the best option was to use a PNG image, and PNGs can be compressed only lossless-ly.  This meant that we have not been able to reduce the size very much for images that required transparency, leading to significantly bigger file sizes for such images. But WebP image formats now allow lossy compression of alpha by encoding images with low bits-per-pixel, thereby considerably reducing the size of the overall image with transparency. This is also very useful for websites that make heavy use of icons.

Another highly desirable feature of WebP is that it supports animation as well, and therefore can be used instead of GIFs, making it an image format that supports the transparency of PNGs as well as the animation of GIFs.

When should we use WebP Images?

WebP images can be used wherever images need to be displayed online.  With native support for WebP image format in almost all major browsers including:

  • Chrome,
  • Microsoft Edge (18+),
  • Firefox (65+),
  • Chrome in Android,
  • Native Android web browser,
  • Safari,
  • Opera

websites, web applications and mobile-focused websites can use WebP images throughout to leverage the benefits of this format on performance. With the previously mentioned advantage of lossy WebP with alpha, we can use .webp for icons as well.

We recommend converting and compressing images on an individual basis to see the difference it makes by using WebPs instead of Jpegs. From the conversion and compression we have undertaken for Contactpoint clients, on average we have found that converting Jpegs to WebPs with a quality setting of 80 shows huge file size differences that can considerably improve website load time.

When to avoid WebP images?

Although there is much less reduction in quality compared to lossy compression, WebP images still have a reduced quality. Below is a .jpeg image of the same .webp image shown above in this article.

Although the quality when seen in a browser is negligible to most people, if you are particular about the high resolution and quality of the image being displayed (perhaps in a site that hosts a gallery of paintings, a photography website, animation/graphic portfolio site, etc.) then it might be right to perform lossless compression of Jpegs instead of using a WebP image. We recommend that you view both formats after compression and decide based on the outcome, as the end result also depends on the specific image, details such as tone and colour, the quality setting used in encoding of the image and other factors.

Another time when WebP should be avoided is when using a browser that does not support WebP formats. Although most browsers support WebP format, a few browsers still do not and if support for a particular is important, then WebP might not be appropriate.

Alternatively, you can get the best of both worlds by coding your web page to use Jpegs/PNGs for web browsers which do not support WebP.  The downside of this method is that you end up storing the one image in 2 or more formats on your web server, thus using more disk space rather than less.

How to Create a WebP Image?

Another reason for the slow uptake of WebP Images is the relative difficulty in creating them.  You are unlikely to find that you can save an image to a WebP format from your favourite image editing software.  Instead, you will likely need to use an online tool to do the conversion such as: https://www.online-convert.com/

If you have a WordPress website, there are some handy plugins that allow WebP images to be created on the fly, as you upload JPGs into your website.

 

If you would like to discuss the use of WebP images throughout your website, or more generally a review of your website performance, please don’t hesitate to get in touch with us at Contactpoint.

Facebooktwitterredditpinterestlinkedinmailby feather

Spot the Odd One Out & User Interface Design

January 30th, 2022 by Heather Maloney

Do you remember playing the game “Spot the Odd One Out” when you were a kid? I used to love that game (yep, there’s a reason I ended up working in information technology) and it turns out that this is an important skill when working on user interface design for software and mobile apps.

As websites and web applications grow over time to fit in new information / functionality, our clients can be tempted to say something along the lines of “just add new function / information x into the menu / screen y”. The fact that they needed to say “just” is a strong indicator that it doesn’t actually fit there … they are introducing “the odd one out”.  It’s at this point that the rot is setting in! What started out as a well thought through information architecture has just been muddied. One quick decision, or many little decisions like this over time, will lead to a confusing user experience.

But how to explain the Macca’s kiosk app, and the location of the Decaf option?

One of the outcomes of the pandemic has been the expanded installation of kiosk machines at the front door of MacDonalds, which patrons are encouraged to use to place their order rather than walking up to the counter and telling the assistant what they want.  [I hope they disinfect the screens regularly.]

Have you ever tried to order a decaf? [Okay, I know that particularly if you are in Melbourne you are saying in your head “What??!! – decaf? Of course not!” but go with me on this, some people do actually drink decaf even in Melbourne.  In my case, caffeine just interrupts my sleep.  Sometimes I like a hot milky drink, and don’t want to load up with sugar (i.e. hot chocolate) so a decaf is great.

These are the steps to order a decaf via the Maccas kiosk machine:

  1. Press the Start Order button.
  2. Choose McCafe Drinks.
  3. From the McCafe Drinks menu, choose from:
    1. Cappucccino McCafe
    2. Latte McCafe
    3. Flat White McCafe
    4. Long Black McCafe
    5. Mocha McCafe
    6. Hot Chocolate McCafe
    7. Espresso McCafe
    8. Macchiato McCafe
    9. Piccolo Latte
    10. McCafe Deluxe Iced Coffee
    11. Iced Chai Latte McCafe
    12. Iced Mocha McCafe … (there are more options)
      I want a Decaf Flat White, so I choose #3.
  4. Choose your type of milk.
  5. Click Customise (on the assumption that you actually noticed that button, and didn’t end up on the order summary screen before it was too late).
  6. The top of the customise screen allows you to choose how many espresso shots are in your coffee.  Then underneath that is a list of additional ingredients.  This list starts with sugar packet, chocolate powder and Splenda.  You have to scroll down past the bottom of the screen to finally arrive at Decaf.  Press the up arrow for the number of shots to choose Decaf.
  7. Press the Save Changes button at the bottom of the screen.
  8. You are then presented with the “May we suggest…” set of options i.e. would you like fries with your order.  Press ‘Not Today’.
  9. You are then presented with Your Order.  Press Complete Order.  (There are sub options on this page for donating to a charity).
  10. You are then presented with the payment options screen, in which you have to choose either you want to pay by card or pay at the counter.  Press the large ‘Contactless’ button.
  11. Via the PIN pad next to the kiosk make your payment.

That is a total of 11 steps.  But, if you are like me and you choose Drinks first, before realising that it doesn’t contain the coffees, and you miss seeing the ‘Customise’ option and have to find that from the order summary screen, you can add another 3 – 5 steps to the above.  Feeling charitable, add a couple more steps again.

user interface design for mobile apps

It took me about 5 trips to Maccas to figure out that you could order a decaf via the kiosks.  In prior trips, I either went without, or bailed half way through my order and went up to the counter and ordered in person even though they wanted you to use the machine instead.  Once, a staff member tried to show me how to order a decaf via the kiosk, but gave up in favour of going back behind the counter and placing my order from there.

Perhaps the reason it took me so long to figure out is because, to me, Decaf is a different drink, it’s not a customisation of a coffee, just like Peppermint Tea is a different drink, and not a customisation of black tea.  If I wanted to order a decaf, why would I ever think “oh, I’ll start by choosing a caffeinated coffee?”  The McCafe Drinks menu includes hot chocolate, so why not Decaf?  Now that I have turned my mind to the question, I think I know the answer; it’s because it is conceivable that I might want a decaf latte, or a decaf long black etc.  Maccas probably don’t sell enough decafs to worry about including a decaf version of all the different types in the main set of options, so they added it to the list of customisations instead.  So my frustration is caused by inappropriate categorisation of items, and an obscure customisation process.

I’m very computer savvy, but it takes me (even without getting a decaf) about 3 times longer to place an order through the machine than it does to place an order via the person behind the counter.  This is in part the result of the kiosk user interface being filled with upsells and question after question.  At the counter, I can place my order with one statement (“May I please have a standard, flat white, decaf, with regular milk”) answer one question about taking away, and then tap your card.  Done.

Maybe the kiosk should allow you to speak your order to the machine?  I wonder what the Macca’s store statistics are telling them about the success of their new kiosks as the primary customer interface?

The above anecdote shows why careful thought needs to be given to user interface design.  Your website’s navigation menu is a user interface, just as much as the screens of a mobile app or kiosk software.  The general public will probably put up with a less-than-ideal user interface in a Macca’s store, because they are already there and know what they are going to get, even if they are frustrated when placing their order.  But a person using your website / app might not be quite so patient with your organisation.

Good user interface design will ensure that all the most commonly used tasks are intuitive for the user to accomplish, and involve the minimum number of steps.  Buying a decaf was probably, rightly, low on the priorities of the Maccas kiosk software designers.  What do you think of the kiosks, or are you skipping them in favour of drive through (voice ordering), or another vendor altogether?

What’s the most frustrating user interface you have to use?

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: