Skip to content

UX and IA

Jump to bottom
miguelperezcolom edited this page Jun 8, 2024 · 22 revisions

I have done my best with Mateu UIs to provide the best user experience (UX) possible. Along this chapter we will review the information architecture (IA) and UX considerations that have been used to build the Mateu user interface.

Navigation tree

Since version 2 of Mateu a lot of things have been taken out of Mateu, and so the navigation has been simplified. Now you only have direct components (forms and cruds, aka journeys) exposed under a url and a complete UI which contains a header with a multi level menu.

All the authentication stuff has just been removed and is not part of Mateu, so putting parts of your UI under a public or private zones are up to you. Usually you would simply use plain Spring boot security for that.

Wireframes

A UI is composed of a header and a slot for the step:

The header is optional, and is only visible it there is a menu to be shown.

The View is the top level structure for an step which is, basically, a set of slots which matches the typical html5 page structure:

Any of the slots is optional, and will only be visible if it has some content. The slot itself is just a container of components which are layered one below the other:

User experience

User experience (UX) is embraced as much as possible by taking advantage of everything I know:

  • clean user interface
  • font sizes and styles are used for semantics
  • mouseover effects for identifying clickable areas
  • information is positioned according to relevance
  • all browser facilities work as expected:
    • significant page titles
    • history
    • back and forward navigation
    • bookmarks
    • multiple tabs opened at the same time
  • minimum steps for every task
  • social login
  • menu search
  • keyboard shortcuts for common tasks (Ctrl+S for save, Enter for search, ...)
  • responsive website

Conclusion

I think the final user experience is quite good and smooth. The user finds a user interface which works as he expects, which is clean and where information is well hierarchized and where important things are calling your attention. Also, it is a responsive web application and it is made evident: it feels like a web application and all of the browser facilities (history, significant urls, ...) work as expected.

Clone this wiki locally