As a design professional you may find yourself being asked to contribute Usability or Performance NFRs for a Web or Application project. There are a lot of different resources that have recommendations for different properties and metrics can be used to quantify the experience of using a website or app, below is an attempt to collate them into a usable template you can customise to your specific requirements.
Nonfunctional Requirements (NFRs) define system attributes such as security, reliability, performance, maintainability, scalability, and usability.
— https://www.scaledagileframework.com/nonfunctional-requirements
| Item | Value | Notes |
|---|---|---|
| First Contentful Paint (FCP) | <1500ms | |
| Largest Contentful Paint (LCP) | <2000ms | |
| First Input Delay (FID) | <100ms | |
| Time To Interactive (TTI) | <2500ms | |
| Total Blocking Time (TBT) | <300ms | |
| Cumulative Layout Shift (CLS) | <0.1 |
- These values are based on our GA reporting or on Australian statistics, you should tailor these to your market.
- https://gs.statcounter.com/screen-resolution-stats/all/australia
- Can be tested with browserstack or similar.
| Item | Value | Notes |
|---|---|---|
| Chrome | >=84 | |
| Safari | >=13 | |
| Samsung Internet | >=11 | |
| Support TouchEvents on Event Handlers | ||
| Support Resolutions in Portrait and Landscape | ||
| Supported Desktop Resolutions (w/h) |
|
|
| Supported Tablet Resolutions (w/h) |
|
|
| Supported Mobile Resolutions (w/h) |
|
| Item | Value | Notes |
|---|---|---|
| WCAG 2.0 AA Compliance | WAVE Accessibility Tool: 0 Errors 0 Warnings | |
| Semantic HTML Elements w/ Meaningful Names | ||
| ARIA Labeling | ||
| Relative Font Sizing | ||
| All media descriptively titled |
Semantic HTML Elements with Meaningful Names
DescriptionRelative Font Sizing
A current accessibility recommendation is to use relative font sizes such as percentages or units of em instead of absolute sizes such as pixels or points. This allows text to be more easily resized appropriately across multiple devices and platforms.
— EIT Accessibility Group, Pennsylvania State University
| Item | Value | Notes |
|---|---|---|
| Images should be in the appropriate format for the content | ||
| Images served at the appropriate resolution for the device | ||
| Total Page Weight / App Bundle Size | <=5mb | |
| Make use of local caching | ||
| Download media on-demand, provide thumbnails and previews |
| Item | Value | Notes |
|---|---|---|
| Animations at 60fps | ||
| Process User Events | <50ms | |
| Visible Response to Events | <100ms | |
| Responses typically over 1s should provide an indicator / warning | ||
| Responses typically over 10s should be performed in the background and not block other tasks | ||
| Consider Server Side Rendering to optimise the first load | ||
Reduce Content shift by:
|