UI and UX: turning a user’s task into an understandable interface

UX concerns how people complete tasks and experience interaction. UI is the interface through which they do so. Visual style and logic work together: an attractive form does not help if fields or submission status are unclear. Start with the task and validate the complete journey.

Describe the user and desired outcome

Establish prior knowledge, entry points and the decision required. Service buyers may need examples, terms and a clear next step. Internal systems may instead need fast search, status visibility and error correction.

For example, a customer wants to migrate accounting without knowing the module name. Navigation based only on acronyms makes selection harder. Connect structure to the task while retaining exact names for knowledgeable users.

Test the sequence in a prototype

First agree structure, content order and transitions. A prototype should let someone complete the main action rather than view static screens. Questions discovered here are easier to resolve before complex implementation.

Define errors, empty results, loading and completion. When a filter finds nothing, users should understand how to restore results. A failed form check should identify the correction needed.

Build shared components and accessibility

Buttons, fields, tabs and messages need agreed states and purposes. The ALL IT Agency site uses shared button and form components so repeated pages retain consistent interaction. A design system should continue into code rather than remain only a design file.

Check keyboard access, focus, contrast, labels and text adaptation. User involvement complements accessibility requirement evaluation rather than replacing it. One successful journey does not prove usability for every person and device.

Hand over rules and validate implementation

Developers need components, states, content and responsive behaviour. Agree how long names and other languages work. Error and accessibility decisions should not accidentally disappear during handover.

After implementation, repeat the journey in the browser. Reconcile content, component behaviour and relevant technical checks. Assess improvement through observation and available data rather than guaranteeing conversion growth from a new appearance.

Sources and further reading

• W3C WAI: involving users
• Figma: prototyping interaction
• GOV.UK: shared components and research

• Related subservice: UI/UX design
• Explore this service area