Overview
I am working on a mobile app that has a feature which allows the buyer and seller of a good/service to debate the price and exact nature of a transaction. The process of this transaction (haggling) is fairly simple:
1) The user clicks on the haggle button. At the start of every transaction, the user has 3 haggle attempts.
2) The user selects their haggle price from a pre-determined range to promote fairness.
3) The user presses the send button and awaits response. In about 5-10 seconds, the user receives confirmation whether their haggle has been successful or not.
- If successful, the user can accept the haggle price and gets taken to the payment screen to confirm the transaction.
- If unsuccessful, the user can re-attempt to re-haggle. This process repeats itself until the user runs out of haggles, after which they can purchase more haggles.
Problems currently faced
I spent the afternoon mocking up the user flow for this but got stuck on a 3 things:
1) Each user has 3 haggle attempts at the beginning of the transaction. This is currently illustrated on the button before the user presses it i.e. Haggle (3) and on the second screen when they are about to send their haggle quote i.e. Send (3). My concern is that that this may not be clear enough to first time users, is there anything I can do to make it immediately obvious?
2) Once the user clicks on the haggle button, they need to select the quote which they want to send. I am not comfortable with the layout of the UI elements in this modal window for two reasons.
Firstly, I want to encourage users to click on the "get more haggles" button but only if they have 0 haggles. However, this means that the "get more haggles" button should only appear on certain conditions. How would I best model the user flow to accomplish the conditional display of this UI element?
Secondly, I want it to be immediately obvious to users that they need to decrease the price the price before clicking on the send (3) button. I thought the best way to do this would be to use a variant of the (+/-) button number incrementers. However, increasing a price is not synonymous with haggling, as you would always want to get a lower price. Are there any other design patterns I can follow to help me restructure this UI element?
3) How would I best communicate to the user whether their haggle has been successful or unsuccessful after they've sent their quote on the second screen in a non-obtrusive way. Should I get them to wait until they receive a response or switch back to the first screen and display it there?
If I switch it back to the first screen, how would I get the user to focus on that item explicitly? Will it need to be done on a new page or on the search results screen?
If I decide to freeze the app (with a loading button) or something, then how do I elegantly transition between the let's haggle setup to the haggle result setup?