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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
Overview
• Future of the web.
• Breakdown of categories of audit document.
• Tools, Resources & Useful Links
• Questions & Comments
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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:
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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).
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
Web App Install & Native App InstallBanner
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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?
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
Web Push NotificationNITANATIONAL INFORMATION TECHNOLOGY AGENCY
Designing Beautiful User Experiences
“Pay attention to what users do, not what they say.”— Jakob Nielsen —
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
Cont. Designing Beautiful User Experiences
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
Security Report On Websites of All SOE’s.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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….
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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.
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
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)
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
NITANATIONAL INFORMATION TECHNOLOGY AGENCY
QUESTIONS & COMMENTS
NITANATIONAL INFORMATION TECHNOLOGY AGENCY