Editing an alert integration today. The scroll bars within scroll bars are frustrating, but even more so when the inner box overflows over the outer box covering the save button. After a while, i figured out that there’s a little tiny save button (icon, no text) at the very top of the modal that popped up as i was editing the payload. After saving that and closing the modal, there was the main save button (text only, no icon) at the very bottom.
- Pick a place, top or bottom to put the save button and do it the same way.
- Pick a method (icon, text, or both) and be consistent.
Also, the entire time i had the connectwise integration in edit mode, it appears to have continually reconnected to CW to get the alert parameters refreshed. Maybe it was doing that before, but seems overkill.
Breaking several of the 7 commandments of UI design:
- “Discoverability: It is possible to determine what actions are possible and the current state of the device.” - I couldn’t find the save button because I was looking for the button at the bottom where the rest of the save buttons usually are.
- “Feedback: There is full and continuous information about the results of actions and the current state of the product or services. After an action has been executed, it is easy to determine the new state.” - Was it saving automatically as I tabbed out of the field i was editing? Maybe they got rid of the save button? Felt like I wasn’t in control of the saving process.
- “Conceptual model: The design projects all the information needed to create a good conceptual model of the system, leading to understanding and a feeling of control. The conceptual model enhances both discoverability and evaluation of results.” - This was fine as the new UI didn’t change anything about the conceptual model, just gave it a new skin.
- “Affordances: The proper affordances exist to make the desired actions possible” - The save button was there, the product was capable of saving.
- “Signifiers: Effective use of signifiers ensures discoverability and that the feedback is will communicated and intelligible.” - This is the main problem. The signifier for saving is not consistent with other signifiers. This hinders discoverability. I couldn’t find the stupid save button.
- “Mappings: The relationship between controls and their actions follows the principles of good mapping, enhanced as much as possible through spatial layout and temporal contiguity.” - Number 2 main problem here. One save button had a 3.5” floppy disk icon. The other had the word “Save” on it. Simple consistency here people.
- “Constraints: Providing physical, logical, semantic, and cultural constraints guides actions and eases interpretation.” - The overflow of the inner modal wasn’t complete. It only covered up about 80% of the outer save button, making it seem like i might have been able to solve my problem by just clicking on that button that I thought said save on it. However, that would have saved the entire integration, not the one action i was modifying.
Total UI design score: 2/7. Failure. If you don’t know what the above are or what text they come from, you should not be in UI design.
Product Manager