This feature was completed at the end of 2022. I played the role of the UX/UI designer.

Requirements

Interact City is a web app, mainly targeted to be used on desktop devices. So in general, we would like to enhance the tablet experience of Interact City this time. There are some specific scenarios to be covered and mentioned as a must-have in the requirements.

• Scenario 1: As a commissioning engineer, I want only basic functionality that focuses on mobile use. clean screen, easy to navigate. I want a contextualized map view based on my location so that I know the distance between myself and the streetlights, and I can navigate to them easily.
• Scenario 2: As an operator, I want to enable mobile officials (police, ambulance, firemen) to be able to easily override lights in case of an urgent need to have maximum light level, e.g. disperse loitering/fighting crowds, medical aid situation on street, etc.
• Scenario 3: As a commissioning engineer, I want to use Interact City to analyze failures in installation without the need to bring a notebook and hotspot to connect.
• Scenario 4: As an installer, I could use a tablet to take a picture of the streetlight in the field and upload it in the attachments. Interact City shall enable Asset attachment, camera or file as inputs.

Implementation check

As the first step, we checked the implementation and understood what was missing in a good tablet experience. It was done on Oct 31, 2022.

Principles for tablet

This part includes all the general changes across the app when user opens it on a tablet device.

1. The navigation needs to be completely rebuilt for small screens. No need to take care of 320 ~ 679 for now.

2. The action column in all the tables should be fixed on the right when the tables are long. The rule applies to all the tables in Interact City on all platforms (Windows, Mac, Android, iOS, etc).

3. For easier finger operation always use the native menu components (iOS: see the context menu, pull-down menu, etc. Android: see menu). See the example below.

iOS:

• The context menu is used for the actions on the maps.
• The pull-down menu is used for the collapsed actions in the 3-dot icon, etc
• Use the style of the pop-up menu for the options in the dropdowns.

Android:

4. Tap and hold to trigger the edit menu in iOS and menu in Android when user would like to do the copy and paste on tablet or mobile devices.

5. For easier finger operation always use the native date picker and month/year selector components. (iOS: see pickers; Android: see docked date pickers).

6. When native components are used, the theme (light/dark theme) also follows the system.
7. All hover behavior basically needs to change to the tap behavior when we detect user uses Interact City on touch devices.
8. Tap with two fingers to trigger all right-click behavior.
9. Page title bar layout changes:
   • The controls (most of the time the drop downs) always go to the second line.
   • Always collapse the search when the screen width is 0~959.
   • Show as an icon-only button when we can’t afford the text button on the page title bar. It happens very often on mobile devices.
   • Collapse the button in the 3-dot icon when there are multiple actions or we can’t afford the text button.

Covered scenarios

Tips before start

• When we detect user is using Interact City on a touch device, show tips before user starts.
• Tips only show for the first time that user opens the project on a touch device.
• Use 2 fingers to trigger the right-click on the map.
• All sub-menus are shown by tapping instead of hovering on touch devices.

Switching among the layouts and Search/query optimization mainly covers Scenario 1 and Scenario 2.

Switching among the layouts

• Default display: half of the screen for horizontal split on iPad.
• When user switches to the vertical split, show the panel in its minimum width by default. The minimum width of the panel is 536 dips.
• Add the location icon to the map. Ask permission for the geo-location when user logs in. If it gets permission, user is always able to locate his/her position on the map even if it is out of the project area.
• User can zoom in/out by pinching and spreading.
• When it is horizontal-split, the panel shows at the bottom of the page, the rule applies to both desktop and mobile devices.
• When it is in portrait view, drag the edge directly to control the panel size, and swipe up and down to switch between layouts. Users should swipe twice if they would like to switch from full-screen-panel to full-screen-map.
• When it is landscape view, swipe is going to trigger the horizontal scroll bar.

Search/query

View details dialog and Attachments optimization mainly covers Scenario 3 and Scenario 4.

View details dialog

Attachments

Others: Besides the main scenarios, I checked the responsiveness of the whole app so that users can use the app freely on the tablet device.

Map behavior example: cellular streetlights

• Dim the menu when the sub-menu is open. See principle No.3.
• When the menu can’t be fully displayed, make it scrollable.
• Close both the menu and submenu when user clicks outside. Collapse the submenu by clicking the expander.