NITA NATIONAL INFORMATION TECHNOLOGY …survey.nita.gov.gh/sites/default/files/PRESENTATION ON...SEO...

NITANATIONAL INFORMATION TECHNOLOGY AGENCY

PRESENTATION ON AUDIT OF ALL SOE’s WEBSITES

NITANATIONAL INFORMATAION TECHNOLOGY AGENCY

GHANA

AIM OF THE AUDIT

TO DETERMINE WHETHER WEBSITES MEET THE REQUIRED INTERNATIONAL WEB STANDARDS


Overview

• Future of the web.

• Breakdown of categories of audit document.

• Tools, Resources & Useful Links

• Questions & Comments


Current State of Web TechnologyCORE FOUNDATIONS OF A DELIGHTFUL WEB EXPERIENCE

• Fast - It respond quickly to user interactions with silky smooth animations and no janky scrolling.

• Integrated - The user doesn’t have to reach through the browser, it use the full capabilities of the device to create an experience true to the device.

• Reliable - Load instantly and reliably, never showing the dinosaur, even in uncertain network conditions.

• Engaging - Keeps the user coming back to the app with beautifully designed experiences that look and feel natural.


Fast

Users don’t expect janky scrolling or slow load performance. Making your site fast is a process that starts with understanding how RAIL

affects the performance of your site and how use that to measure and improve your performance.

Critical Rendering Path

Rendering Performance


https://developers.google.com/web/fundamentals/performance/rail

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

https://developers.google.com/web/fundamentals/performance/rendering/

RAIL - is a user-centric performance model. Every web app or website has these four distinct aspects to its life cycle, and performance fits into them in different ways:


Focus on the user

• Focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to ultimately make users happy.

• Respond to users immediately; acknowledge user input in under 100ms.

• When animating or scrolling, produce a frame in under 10ms.

• Maximize main thread idle time.

• Keep users engaged; deliver interactive content in under 1000ms.

Make users the focal point of your performance effort. The majority of time users spend in your site isn't waiting for it to load, but waiting for it to

respond while using it. Understand how users perceive performance delays.

A dissatisfied user will leave your site and never return.


Integration

User experiences on the web should feel like an integrated part of the user's device; instead of having to reach through a browser window, the experience should feel true to how the user interacts with the device.

Get a place on the users home screen.

Simplify payments with the Payment Request API.


https://developers.google.com/web/fundamentals/app-install-banners/

https://developers.google.com/web/fundamentals/payments/

A place on the user’s home screen.

Web App Install Banners – Two types

• Web App install banners

• Native App install banners

Web App install banners let the user add your app or site to their home screen.

Native App install banners let the user install your native app from the play store without leaving your site.


Criteria to show a Web App Banner

Google chrome automatically displays the banner when your app meets the following criteria:

Has a web-app manifest file with:• a short_name (used on the home screen)

• a name (used in the banner)

• a 192x192 png icon ( the icon declarations must include a mime type of image/png )

• a start_url that loads

Has a service worker registered on your site.

Is served over HTTPS (a requirement for using service worker).

Meets a site engagement heuristic defined by Chrome (this is regularly being changed).


Criteria to show a Native App Banner

The criteria is similar to the Web App install banner except for the need of a service worker. Your site needs:

Has a web-app manifest file with:• a short_name

• a name

• a 192x192 png icon ( the icon declarations must include a mime type of image/png )

• a related_applications object with information about the app

Be served over HTTPS

Be visited by the user twice, over two separate days during the course of two weeks.


Web App Install & Native App InstallBanner


Web App Install Banner Native App Install Banner

Payments requests APIs

• What

• Why

What?

Payment request APIs is a W3C standard candidate that is meant to eliminate check out forms… Let the browser act as intermediary among merchants, usersand payment methods.

Why?

Online purchase forms are user-intensive, difficult to use, slow to load and refresh, and require multiple steps to complete. This is because two primary components of online payments—security and convenience—often work at cross-purposes; more of one typically means less of the other.


Reliable

Users don’t expect the web to work without a network connect, and often don’t even bother to try when it’s a slow or intermittent

connection. We need to change that perception. The web must be reliable.

Use the Offline Cookbook to improve reliability.

What should you consider when designing for slow or intermittent networks?


https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/

https://developers.google.com/web/fundamentals/instant-and-offline/offline-ux

Cont. Reliable

• Offline Cookbook

Is a documentation on the developers.google.com page that introduces the web technology behind offline experience on the web by the use of service workers.

Service workers gives developers the moving parts to go solve the offline support themselves.

As such service workers act as an intermediary between the application cacheand the network between page loads and also support for background sync to update the document when network is available.

https://goo.gl/dNjwhd


https://goo.gl/dNjwhd

Cont. Reliable

• Designing for slow or intermittent networks

This is also translated by developers as “designing for the next billion users”.

It involves design decisions when developing for users that will most likely access your site on a slow network; i.e. 3g connection.

Includes guidelines such as informing the user of the change of state in network conditions, whether user is online of offline.


Various Offline Notice To UserNITANATIONAL INFORMATION TECHNOLOGY AGENCY

Engaging

An engaging app goes beyond functional, but ensures that the whole experience is delightful making it easy for the user to do what they need

to do. Using features like Web Push, it’s always up to date, and Notifications keeps users informed. It uses the right capabilities, at the

right time, in a beautiful way.

Use Web Push & Notifications to re-engage with users.

Designing beautiful user experiences.


https://developers.google.com/web/fundamentals/push-notifications/

https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/

Web Push Notifications

Web push notifications allow users to opt-in to timely updates from sitesthey love and allow you to effectively re-engage them with customized,relevant content even when they are not using your application.

The Push API and Notification API open a whole new set of possibilitiesfor you to re-engage with your users.


Cont. Web Push Notifications

Web Push Notifications are Service worker dependent.

Push notification are based on service workers because they work in thebackground. This means the only time it runs for a push notification (inother words, the only time the battery is being used) is when the userinteracts with the notification by clicking it or closing it.

To get familiar with web push notifications, check out the service workerintroduction.


https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

Web Push NotificationNITANATIONAL INFORMATION TECHNOLOGY AGENCY

Designing Beautiful User Experiences

“Pay attention to what users do, not what they say.”— Jakob Nielsen —


Cont. Designing Beautiful User Experiences


Cont. Designing Beautiful User Experiences

• Discover

• Define

• Develop

• Deliver

The UX paradox isn’t something that should be looked upon as a role for only designer/developer or researcher. It is actually the responsibility of

everyone involved in a project so I would recommend involvement at every opportunity.


BREAKDOWN OF THE CATEGORIES IN AUDIT DOCUMENT

• Security – HTTPS & SSL CERTIFICATE

• SEO – Search Engine Optimization

• Performance

• Technical

• Website Rating

• UI Rating

• Mobile Responsive

• Content

• Remarks


Security – SLL CERTIFICATE

• What?

• Why?

SSL stands for “Secure Sockets Layer”. Is a protocol used for sending confidential date over the internet. It is a form of security for sites that handle sensitive information such as customer names, phone numbers, addresses and payment details which contain credit card numbers.

It creates a secure connection between a customer’s web browser and the server of the company they are interacting with.


Security – HTTPS

• What?

• Why?

Hyper Text Transfer Protocol Secure (HTTPS) is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure’.

It means all communications between your browser and the website are encrypted. HTTPS is often used to protect highly confidential online transactions like online banking and online shopping order forms.


More on Security…

Benefits of SSL:

• Encrypts Information - An SSL certificate inserts random characters into the original information, rendering it incomprehensible to anyone without the proper encryption key.

• Provides Authentication - When obtaining an SSL certificate, another type of protection called a server certificate is also issued. This certificate acts as a mediator between browsers and SSL servers to show that the SSL certificate provider can be trusted.

• Guards against Phishing - Phishing emails often contain links that lead unsuspecting customers to a convincing replica of an otherwise reputable site. Often disguised as advertisements or shipping confirmations, these emails attempt to gather credit card information for malicious use.


More on Security…

Disadvantage of SSL:

• Cost - is an obvious disadvantage. SSL providers need to set up a trusted infrastructure and validate your identity so there is a cost involved. Because some providers are so well known, their prices can be overwhelmingly high.

• Performance - Is another disadvantage to SSL. Because the information that you send has to be encrypted by the server, it takes more server resources than if the information weren’t encrypted. The performance difference is only noticeable for web sites with very large numbers of visitors and can be minimized with special hardware.


Security Report On Websites of All SOE’s.


This a chart overview of all websites with no SSL certificate.

Yes11%

No73%

N/A16%

Security (SSL) Certificate

Yes No N/A

Conclusion On Security

Audit report shows that the websites do not meet the basic web security standards.


SEO – Search Engine Optimization

Search Engine Optimisation (SEO) is the process of optimising your website so that it comes up in search engine results for certain

keywords.

Audit report show that most of the Ministry websites on the average are search engine optimized. This means they are easily identifiable by

Search engines especially that of Google’s. Tool used for this section is Website Grader.


PerformanceFor performance benchmarking on websites, we used Google’s

Lighthouse audit tool, an extension found in the chrome webstore or in developer tools in Chrome browser and Observatory by Mozilla to

compliment results.

Performance report on all websites using this tools shows that performance on most of the site is very slow. In terms of site loading

speeds, which should be 3 seconds for the “first meaningful paint”.

Which simple means within 3 seconds, the site should display something meaningful to the user according, this is according to web

standards based on a world wide survey conducted by Google.


More on Performance…

As such the Lighthouse tool gives useful feedback on possible causes on poor performance of websites;

• Page load is not fast enough on 3G network

• Unminified CSS and Scripts

• Unoptimized images

• Estimated input latency and perceptual speed index

• Critical request chains and lots of http page requests


More on Performance…NITANATIONAL INFORMATION TECHNOLOGY AGENCY

This a chart overview of website performance.

0 - 2046%

21-403%

41-6011%

61-8014%

81-1005%

N/A27%

Website Performance Stats.

0 - 20 21-40 41-60 61-80 81-100 N/A

Best PracticeNITANATIONAL INFORMATION TECHNOLOGY AGENCY

This a chart overview of website performance.

0 - 200%

21-400%

41-603%

61-8070%

81-1000%

N/A27%

0 - 20 21-40 41-60 61-80 81-100 N/A

AccessibilityNITANATIONAL INFORMATION TECHNOLOGY AGENCY

This a chart overview of website accessibility

0 - 200%

21-400%

41-600%

61-803%

81-10062%

N/A27%

0 - 20 21-40 41-60 61-80 81-100 N/A

Conclusion on Performance.

In conclusion, most sites are very slow to load on 3G networks, which is the case of most users accessing your site.

Therefore a slow website results in users abandoning your site without getting the information they sort after.

Website should be optimized enough to fast page loads which also increases a site’s user experience satisfaction.


Technical

This part of the audit simply identifies errors in browser console when you inspect elements. They include errors like;

• Sites making a an unsecure page request

• Errors found in site’s scripts and CSS

• Other errors like render blocking with translates in input latency and can sometimes affect how site scrolling animations and transitions feel.

• Etc….


Website Rating

Website rating is directly related to user experience as research has told us.

A good website rating is directly proportional to a good user experience and a bad website rating can equally translate into a bad user

experience


Cont. Website RatingNITANATIONAL INFORMATION TECHNOLOGY AGENCY

This a chart overview of website rating amongst site audited.

1, 10.81%

2, 5.41%

3, 21.62%

4, 16.22%

5, 10.81%

6, 2.70% 7, 2.70%

UX Stats

1 2 3 4 5 6 7

One (1) = Very Poor

Two (2) = Poor

Three(3) = Below Average

Four (4) = Average

Five (5) = Above Average

Six (6) = Good

Seven (7) = Very Good

UI (User Interface) Rating

A good UI in a website makes the site a pleasure to use. Colours, text transitions and animations if done right compliments the site.

And even guide the user on to what exactly is happening on the screen and what to even expect.

An example of UI concepts and principles that can be used is Google’s Material Design Principle.


Audit showed that most of the websites were in the Average and Above Average categories approximately 29% and 23% respectively

Cont. UI (User Interface) RatingNITANATIONAL INFORMATION TECHNOLOGY AGENCY

One (1) = Very Poor

Two (2) = Poor

Three (3) = Below Average

Four (4) = Average

Five (5) = Above Average

Six (6) = Good

Seven (7) = Very Good

1, 2.70%

2, 10.81%

3, 24.32%

4, 24.32%

5, 5.41%

6, 0.00%

7, 0.00%UI Stats

1 2 3 4 5 6 7

Mobile Responsive

Mobile responsive is the number one requirement for today’s websites due to the growing number of mobile device usage all around the world.

To check for site’s Mobile responsiveness, Website Grader as well as Chromes developer tools was used.

From the analysis done 43% of SOE’s websites are responsive to mobile view while 32% are not responsive.

Remaining 24% of websites were found not accessible.


Mobile ResponsiveNITANATIONAL INFORMATION TECHNOLOGY AGENCY

Content

In the content section, what was analysed includes how frequently articles or news are updated, font type used and the font size adopted. Most of the sites passed this test with very good font type and size as

well as frequent news update.

A few sites were found to be outdated in terms of their articles and news which dates just months back at the time audit was conducted.


ContentNITANATIONAL INFORMATION TECHNOLOGY AGENCY

Yes58.06%

9.68%

29.03%

Content Update Stats

Yes No Null

Yes = 58.05% (Content Updated)

No = 9.68% (Not Updated In A While)

Null = 29.03 (Site Not Accessible)

RemarksNITANATIONAL INFORMATION TECHNOLOGY AGENCY

We acknowledge the good works done by the State Owned Enterprises on their respective websites, but a lot more could be

done to improve the general look and feel, security, user experience & performance of their respective websites.

A solution for everyone;

Progressive Web Apps (PWA)

Accelerated Mobile Pages (AMP)

https://developers.google.com/web/progressive-web-apps/

https://developers.google.com/amp/

Tools, Methodology & Resources

• Website Grader – https://www.website.grader.com

• Page speed – https://www.developer.google.com/speed/pagespeed

• Lighthouse – https://developers.google.com/web/tools/lighthouse/

• GTMetrix – https://gtmetrix.com/

• Google Developers - https://developers.google.com/web

• https://www.webpagetest.org/

• https://tools.pingdom.com


https://www.website.grader.com/

https://www.developer.google.com/speed/pagespeed

https://developers.google.com/web/tools/lighthouse/

https://gtmetrix.com/

https://developers.google.com/web

https://www.webpagetest.org/

https://tools.pingdom.com/

QUESTIONS & COMMENTS


Date post:	05-Jun-2020
Category:	Documents
Upload:	others
View:	5 times
Download:	0 times

NITA NATIONAL INFORMATION TECHNOLOGY …survey.nita.gov.gh/sites/default/files/PRESENTATION ON...SEO...

Documents