Adaptive UI
Project overview
The problem
Machine learning is widely used to improve the user experience on mobile applications. For instance, personalized recommendation, spam filter, prediction on users' next step. UI, especially mobile UI benefit from adaption because of limit screen space and limited attention of on-the-go usage. Some interaction design expert said that "AI is the new UI". If it's true, adapting UIs and user flows to reduce the navigation and selection effort is a future trend.
My work
I discovered two UI design patterns that help mobile interface designers recognize where and when to use adaptive UIs. I also explorated animations that communicate to users the adaption that has taken place, so they both understand and appreciate the UX advance.
Advisor
Brainstorm
Professional Meetup/Conference
Define
I chose Chase app as to apply adaptation. I found two UI adaptation opportunities.
Reduce navigation efforts
The scenario: A user is having dinner with a friend at a restaurant. The user launches his/her Chase app to split the bill.
The UI adaptation opportunity: When a user launches the Chase Mobile app at a meal time with an SSID data indicates he/she is in a restaurant, there is big chance he/she is using it to split the meal bill.
Reduce select efforts
The scenario: A user has a habit of making credit card payments at the beginning of every month.
The UI adaptation opportunity: When a user launches the Chase Mobile app at the beginning of every month or when he/she spends a lot of money recently, there is a big chance that the user is going to make a payment. So the Chase Mobile app can reorder the rank of each card, putting the credit card on the top of the Home page. It'll save some efforts to find the card/bill he/she wants to pay.
Prototype
One of the biggest challenges in adaptive UI is the interaction design. Adaptation could make some users feel inconsistent, increasing their cognitive workload. So the transactions between each page need to be carefully designed that communicate to users the adaption that has taken place, so they both understand and appreciate the UX advance.
Scenario 1: Split the meal bill at a restaurant
- Use Time and Bluetooth data to decide whether the user is at dinner with friends.
- Let user has a "send money" button on the homepage. Or even more aggressively, direct the user to the "select recipient" when he/she launches the app.
- The recipient's order is calculated using Bluetooth data. The friend who is in closest reach thus has the opportunity to receive money.
- Use animation in transactions between pages, let users understand the workflow.
Scenario 2: Remind the user to pay bills on time
- Use Time and Transaction data to decide whether the user needs to pay a bill.
- Reorder the cards’ rank in homepage based on the priority of operation on each card.
- Use animation to remind the user that s/he needs to pay a bill now.
Future work
- Design how to recover from mistake actions.
- Explore different levels of confidence adaptation, like low-confidence adaptation, high-confidence adaptation, full automation.
