The User Interface (1 Viewer)

[Thales750]

I thought I would start a thread on art and ergonomics. I imagine a thread of this nature could generate broad discussions,
I'm going to start it with one topic, Form Density.

Do we start with a question, or a statement? How about a question.

How do you determine the balance between too much info on one screen, and too much popup opening?

There that should get us started.

I edited this for punctuation and clarity. They still might be screwed up, but it is an improvement.

 

[Uncle Gizmo]

Databases do not appear out of thin air, they are usually based on something that precedes them.

1) This could be a paper based system comprising of a set of forms that need filling in.

2) A database might be based on a set of spreadsheets, and again the spreadsheet will probably have some formalized design similar to a paper form.

3) An off the shelf package. Off the shelf packages are your best approach when building something. You should only deviate from a pre-built off the shelf option if it will not cover every aspect you want it to in your MS Access database.

If there is nothing pre-existing then try and find something similar, and use that to guide you...

If you have the opportunity, you should discuss the needs of the end user, the person using the database, their requirements should be the basis for your user interface.

Other considerations, what screen size is common throughout the organisation that is using the database? If there are many different screen sizes then you may have to have several forms, one for each screen size. Alternatively build a form that automatically resize, not sure that's the best approach.

I note that AWF member, Colin, @isladogs has covered aspects of interface design on his website.

This link takes you to Collins website:-

Control Application Interface

This article discusses how the Access application interface can be controlled including hiding the navigation pane, ribbon or the entire application interface.

isladogs.co.uk

Not sure if that link is helpful but I'm sure there is other stuff on his website that you may find relevant....

 

[The_Doc_Man]

Something Uncle G said is important. Most databases and DB apps do not spring from a vacuum. If the previous method of business involved paper forms, then doing something to replicate the "look and feel" of that paper form reduces the impact of converting to a database app with a keyboard. It is less jarring and more familiar to the folks who have to learn how to use it.

Personally, I avoid pop-ups almost entirely because that totally disrupts the flow of operations. (But that is a personal opinion!) I used pop-up message boxes (usually with either OK/Cancel or OK Only) where some kind of operational or procedural concerns mandated a confirmation step. The LAST thing you need to do is to derail your user's train of thought. Pop-ups tend to do that.

IF (and this is a big IF) your users were accustomed to a multi-page pile of paperwork and you are worried about page density, look into tab controls as a way simulate "flipping a page" for whatever is being done. If they were accustomed to long forms, allow for some scrolling. Just take into account what they would do (or would have done) before your DB app is ready.

 

[GPGeorge]

I thought I would start a thread on art and ergonomics. I imagine a thread of this nature could generate broad discussions,
I'm going to start it with one topic, Form Density.

Do we start with a question, or a statement. How about a question.

How do you determine the balance between too much info on one screen, and too much popup opening? There that should get us started.

Perhaps you can prime the pump. Provide some examples. Show what you would consider too much info one one screen, for example.

 

[tvanstiphout]

Re density: I gravitate towards denser because it means fewer forms and users quickly learn where the pertinent information is for them.
For the Northwind 2 project we used .25 inch tall controls, which is a tickmark more than I would normally do, but this was considering the audience.
For commercial projects like below I typically go 1 tickmark smaller and that still looks good to me (and the customer, more importantly). Grouping controls, lining them up, and using negative space can make a form look less dense.
You might think the Schedules form is too loud, but different people are focused on only 1 or 2 colors.
The ribbon icons are temporary; just yesterday we purchased the set we're going to be using.

BTW, I don't think we can have a discussion about UI without screenshots.

 

[isladogs]

To some extent, the opposite of Tom though I fully understand his reasoning.

I try to keep forms both simple and usually sparse, using a consistent style and layout to make the interface as easy as possible for users to understand. I also avoid popups for the reason George stated.
I never use layout guides, anchoring and tabbed documents as I prefer to have full control over the final layout and appearance of the form.

I do use automatic form resizing on all my commercial apps & on many free apps as well.
Where appropriate, I may also hide the application interface. Again, this can help provide a 'clean' environment

 

[CJ_London]

I have several styles depending on how the app is required to work.

One style mimics the way browsers work - a single form for navigation, displaying
a) the users latest actions (similar to the browser tabs across the top)
b) displaying selected forms in a single subform on the navigation form and
c) with the ability for the user to 'lift' the current subform off the form as a popup (basically a second/third/+ instance of the subform) so they can compare records side by side.

Another style uses a small navigation form as a popup which the user can place wherever they want on the screen - navigation will open other access forms or other applications

I also have swipe functionality so user can swipe left or right as a means of selecting or deselecting items, closing or hiding forms - just a bit more fun that clicking on the title bar or a button and originally developed for users accessing the app from their phone using teamviewer/similar or remote desktop.

What I don't do is use popups as part of data processing - I agree with Doc, it interrupts the flow.

With regards density - my objective is to show relevant information on one screen - and that depends on the client to decide what is relevant.

This is an example of the popup navigation form (redacted)

users work from left to right with the redacted data showing the current state of play
red - action required
green - no action required
grey - might need action (goes red or green once all the other buttons are green)
no colour - admin functions

 

[KitaYama]

I also have swipe functionality so user can swipe left or right as a means of selecting or deselecting items,

By swipe do you happen to mean mouse gesture?

 

[Edgar_]

TL;DR I avoid dense to favor workflow. Popups are no problem here.

We are at the end of the year 2023 and ALL of my users use smartphones. Therefore, all of my users are more familiar with the web standard than the windows forms standard.

When I open a smartphone app, what I see is simplicity and lots of feedback, so I apply those two concepts into my designs. In doing that, I don't have to provide training to my users, because it's intuitive for them. They often say "Oh, it's like whatsapp", "Oh, like sending an email, right?", "This looks like the app of my bank", etc.

Things that made sense in 1995 don't make sense in 2023. My users obviously don't want to use paper for data entry, so I design forms that take advantage of the computer medium, instead of making them look like paper forms. They're no longer used to paper forms anyway, so I won't bring back ancient solutions when there are objectively better options. So, instead of dense forms, I design workflows.

If you want to know what I mean, I will share with you my inspiration app, this entire site is amazingly well detailed and it will surely give you some great inspiration:
https://experience.sap.com/fiori-design-web/when-to-use-which-floorplan/

Here's a few screenshots:

Also look at the many other design principles used in that app:
https://experience.sap.com/fiori-design-web/action-placement/

Or this, which is a workflow I love applying because my users understand it so easily:
https://experience.sap.com/fiori-design-web/navigation/

Navigate that site, it's incredible. I have another one, from a UI framework I use for web apps, here's a few links and screenshots:
https://ant.design/docs/spec/navigation

https://ant.design/docs/spec/proximity

Make sure to browse the other categories, they give amazing insights about form design.

Most of these things can be applied to Access.

 

[Pat Hartman]

It is important to show as much information as the user needs to see at one time. When there is too much information to show it all, the best option is tabs that are used to collect data that is used together so the user doesn't have to scroll or go to other forms needlessly.

This is an example of why I hate Web applications. I use an on-line pharmacy for drugs because the Insurer offers lower co-pays using their preferred pharmacy. Their web application is is as bad as it gets. As you can see, the web page shows ONE prescription. Huge amounts of white space. Notice the "Archive Medication" option at the lower right. The ONLY medications you can archive are ACTIVE medications with refills available. A one-time cream I was prescribed 18 months ago is still on the list and I can't even hide it. It has no refills. The rash cleared up. It will never be filled again and yet it is one of the 16 items on the list. 3 are active. Those, I can archive. 13 are useless. Those are there permanently. I tried to explain to their tech support that the logic of this was backwards but English was not his native language and so he never understood what I was trying to tell him. Although, if I scroll the form, I can see a whopping TWO at one time. The tital and the two search boxes scroll away.

 

[GPGeorge]

It is important to show as much information as the user needs to see at one time. When there is too much information to show it all, the best option is tabs that are used to collect data that is used together so the user doesn't have to scroll or go to other forms needlessly.

This is an example of why I hate Web applications. I use an on-line pharmacy for drugs because the Insurer offers lower co-pays using their preferred pharmacy. Their web application is is as bad as it gets. As you can see, the web page shows ONE prescription. Huge amounts of white space. Notice the "Archive Medication" option at the lower right. The ONLY medications you can archive are ACTIVE medications with refills available. A one-time cream I was prescribed 18 months ago is still on the list and I can't even hide it. It has no refills. The rash cleared up. It will never be filled again and yet it is one of the 16 items on the list. 3 are active. Those, I can archive. 13 are useless. Those are there permanently. I tried to explain to their tech support that the logic of this was backwards but English was not his native language and so he never understood what I was trying to tell him. Although, if I scroll the form, I can see a whopping TWO at one time. The tital and the two search boxes scroll away.
View attachment 111480

My bank's online banking pages have evolved; apparently they listen to customer feedback such as mine.

At one point, the page for downloading files for use in Quicken or QuickBooks looked like they were designed for a smart phone screen. A lot like this with huge amounts of wasted white space and ginormous buttons. You could not see the selection portion where you picked which account to download and the "Download" button at the same time. You actually had to select an account and then scroll down to get to the button to trigger it. It was absurd. However, it changed fairly quickly. The phone app evolved to work effectively in that environment and the browser app evolved to work in that environment. I think they are both quite usable now.

The insane thing is, I think, that the people who design such pages don't have to use them, so they don't get how unusable they are for real people.

Ideally, you start with an idea of who is going to end up using the interface and design for them. Tom's users welcome dense screens. Edgar's users welcome the more web-like experience. If Tom's app were put in front of Edgar's users, or vice versa, they would probably all complain.

And Pat and I rant about absurdly designed web apps.

Here's a screen shot of an app I built for a non-profit. What do you think, web-based or PC-based? More appropriate for a desktop with a hi-resolution monitor, or on a smart phone?

 

[CJ_London]

By swipe do you happen to mean mouse gesture?

mouse or finger for touchscreens

 

[Pat Hartman]

Here's a screen shot of an app I built for a non-profit. What do you think, web-based or PC-based? More appropriate for a desktop with a hi-resolution monitor, or on a smart phone?

Way too much data for a phone screen. Probably OK for a notepad.

 

[GPGeorge]

Way too much data for a phone screen. Probably OK for a notepad.

It does run on a phone, but just barely. It works great on an iPad or on the Windows desktop. If I had to design it for a phone it would take at least three times as many screens, and become a nightmare to navigate.

 

[CJ_London]

If I had to design it for a phone it would take at least three times as many screens, and become a nightmare to navigate.

one technique I tried in the past was to divide the form into equal width sections (typically subforms). On a normal monitor they are displayed side by side, on a phone they are displayed below each other and the form becomes scrollable. Two problems - dividing up into logical equal widths can be difficult and I was never able to find a way to detect what device was being used (using team viewer or equivalent or remote desktop) so user had to click a button to change the layout. And for some forms it would just be impossible to create something that worked effectively both ways - although in reality (in this case), the work done by using a smart phone will really only be a subset of the entire application.

 

[Edgar_]

it works great on an iPad or on the Windows desktop.

iPad? then it's web? But why:

it would take at least three times as many screens, and become a nightmare to navigate.

It would not be a nightmare, what do you mean? It's web technology, you can use responsive design and easily adjust to any screen size.

 

[Edgar_]

Here's a little app you can test for book searching and stuff, let me know if you want me to add features... it's using google's book api

Vite + React

obscene-boundary.surge.sh

I made it mobile first, but it will look ok for desktop too. Just to show a book app shouldn't be a nightmare to navigate.

 

[GPGeorge]

iPad? then it's web? But why:

It would not be a nightmare, what do you mean? It's web technology, you can use responsive design and easily adjust to any screen size.

Some people prefer "webby" designs and others don't. This is a data collection focused app. Forcing people through multiple screens to complete a record seems to me, at any rate, to be less user friendly. To me, that's the wrong approach for rapid data collection.

 

[gemma-the-husky]

Re density: I gravitate towards denser because it means fewer forms and users quickly learn where the pertinent information is for them.
For the Northwind 2 project we used .25 inch tall controls, which is a tickmark more than I would normally do, but this was considering the audience.
For commercial projects like below I typically go 1 tickmark smaller and that still looks good to me (and the customer, more importantly). Grouping controls, lining them up, and using negative space can make a form look less dense.
You might think the Schedules form is too loud, but different people are focused on only 1 or 2 colors.
The ribbon icons are temporary; just yesterday we purchased the set we're going to be using.

BTW, I don't think we can have a discussion about UI without screenshots.

View attachment 111463

I have to say, I like that one line menu bar. However, is that the ribbon beneath that. I can't say how much I dislike the clunky ribbon. It takes up far too much space on a laptop. When you design a form, and you get these giant icons for the screen controls, so big you have to scroll to find them all, it's clear that the MS designers were struggling with the ribbon. Ctrl-F1 immediately.

For the same reason, I like a menu/switchboard for an accounting type menu. Easily navigated with one line options, and filled pages to give simple access to hundreds of options.

 

[Pat Hartman]

For the same reason, I like a menu/switchboard for an accounting type menu.

That's why I've tried to expand and modernize the way the old switchboard looks.