UX improvements

[lemio]

Hey there;

Not sure if this will work (since this is quite a big merge). But I was playing around with improving the user experience for the configuration of Wifi. Not saying that this is the way, but suggesting some stuff that might be relevant to think about. From experience user testing smart and connected products; users generally don't read, don't follow instructions and systems don't behave according to the happy flow; making the setup better can greatly benefit the first interaction with a product, Some general concepts that I tried to adhere (stolen from Nielsen Norman)

wifimanager-ux.mp4

I'm not sure if it is a good idea to push this all as is; since it is mostly vibe coded and not well considered if it comes to performance and stability.

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. -> For this I kept the AP open even when successfully connecting to Wifi to show the user that it was succesfull, included the onboard LED as an extra indicator

Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process. -> This is currently the problem with WifiManager, the user is just left in the blue if their actions are successful.

Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution. -> When the user fills in a wrong password; or the system can not find the SSID we can give the user precise instructions and have clear call to action on what to solve (change the password; bring the device closer to the router)

It’s best if the system doesn’t need any additional explanation. -> Especially when the user is in the captive portal, the phone can not be used to look something up. From here on the wifimanager should be self documenting. I added optional (animated) SVGs so as a maker we can show the product feedback that is expected in each stage.

Issues

• preload wifiscans, faster page loads (mentioned on main readme) -> Since we now have the wifi page as main page we don't have to wait again after connecting; which makes the experiences a lot faster.
• softap stability fixes when sta is not connected (mentioned on main readme) -> SoftAP just remains active, when connected it will have a timeout; when not it will just remain active
• Fixed the current ambiguity "Connecting to WiFi network... If the connection fails, come back to this page to try again.", how would the user know it fails? How would the user know it succeeded? How to come back to this page?

Main Changes

• AP remains available until the user leaves the captive portal
• Less screens to navigate through (so less time on the portal, less friction, less change for interruptions because kids make a mess; human life is messy)
• Dark mode based on OS settings
• Optional LED feedback (with defaults that might work)
  • Green connected (by default only for limited time)
  • Yellow (not configured infinite)
  • Red (could not connect to network)
  • Blue (connecting)
• The idea behind this is to not emit light when not needed; but have light to indicate that the device is on when first plugged in and indicate when the device needs attention (no wifi, not configured) but not when all is good.
• SVGs that allow for custom product 'renders' including some animations to indicate user actions or device response.
• General cleanup of the UI; but nothing mayor could also be ignored since you might want to tailor it more to the brand of your product.

[tablatronix]

Yeah its time to make something new for esp32 only, plenty of memory and overhead and multitheaded stability. To be honest I think serial wifi and wifi_prov_mgr are much more user friendly

[lemio]

Hey, Thanks for your comment; would be great to do some user-testing comparing the different methods.

Not sure what serial wifi refers to? I built this webserial flasher that can adjust wifi credentials in the binary during web flashing, this is fine for developer-users (tech savvy etc.) but for normal users this has some problems:

• It requires the user to install the drivers for the USB port (and have a non-locked device that allows this), not sure if the esp-usb is now standard supported in all OS
• It requires the user to find an USB cable that supports data (I've seen this go wrong so many times; especially when manufacturers give a cheap charge only cable with the product, but FW update is supposed to happen over USB).
• For webserial; it requires the user to use a supported browser (does not work on Safari for example); For python/pyserial even worse, for 'normal' users.
• It requires an USB port to be visible and accessible

With wifi_prov_mgr as it is from the esp32 example I do see some problems:

• It requires the user to download the esp provisioning app (not sure if the user knows if he/she needs softAP or BLE, and if their phone support it + their hardware supports it). Or expects the developer to make their own app (and maintain that for the coming 5 years, according to the EU Cyber Resilience Act)
• When starting by connecting to the PROV network nothing happens; and you can not download the app; since you don't have internet.
• The ESP app is not going to the right page in the settings; so not clear what to do for the user
• The flow assumes the QR code
• The flow does not have nice wrong password handling (you go back to the first page); need to reselect device and network.

Things that could be fixed:

• The developer experience is not easier than this library (this works in Arduino IDE, wifi_prov_mgr needs ESP IDF); would be relatively easy to wrap everything in an Arduino library

It seems like the SoftAP method with captive portal is a relatively robuust option that will most likely work in 10 years from now; and on devices from 10 years ago (that can't handle installing apps, don't have BLE...); while all these 'custom' apps and new flows are not as established; they could be added; but as a baseline to cover 5 years support after last item sold the method of this library is actually good.

[tablatronix]

https://www.improv-wifi.com/