Specialist meeting 7- Gesture Interaction
After brainstorming and observing various the gesture interaction on the mobile web, I came up with 6 interaction base on the gesture I propose:
- swipe (change background)
- tap (change character)
- up down (change colour)
- shake (change music)
Thoughts of the day:
I kind of struggle a lot on the interaction by using everything with just gesture control, even if I come up with a nicely design interface to communicate how to use.... I don't know if is able to code it out, since I have to consider how the HTML div would have block each other that would make another function not working. So on the next post I would talk about my consideration and consultation with the technical lecturer for support.
The idea of having dots/ slider is to show the user there is how many backgrounds to change, some change to numbers or words to represent the next coming background. For the next interaction (music), there will be an instruction to show the user on how to interact with the customization. Similarly to the other interaction on swiping up & down and tapping, there will be a tutorial before the user starts interacting with the customize function.
The difference between the 6 interfaces is how the icon and placement represent a clear idea for the user to interact with. By observing for behance, dribbble and other sites the most common way to show gesture interaction is to use :
- tap icon to show there is something on the picture
- slider to swipe for other options
- shake using tutorial or a icon animation to tell the user
- arrows to show swiping up & down for more content
Below are some examples that I use for designing the interaction. It show a clear instruction (tap icon, left & right icon and so on) to tell the user there is more content by swiping to the next page.
- tap icon to show there is something on the picture
- slider to swipe for other options
- shake using tutorial or a icon animation to tell the user
- arrows to show swiping up & down for more content
Below are some examples that I use for designing the interaction. It show a clear instruction (tap icon, left & right icon and so on) to tell the user there is more content by swiping to the next page.
Consultation
I explain part of my interaction and decision to my specialist, the result of our conversation:
- I have been trying to finish my content visuals, and I show the 3-4 sets of my nightmare that is almost complete
- I need to start testing my interaction by having user test, to know which interaction is the best to communicate
- Could observe more on how my user behave
- Maybe I could start coding my artifact
I explain part of my interaction and decision to my specialist, the result of our conversation:
- I have been trying to finish my content visuals, and I show the 3-4 sets of my nightmare that is almost complete
- I need to start testing my interaction by having user test, to know which interaction is the best to communicate
- Could observe more on how my user behave
- Maybe I could start coding my artifact
Reference for Images
Pham, M. (2018) 3D Product Swipe. [Image] Available at: https://dribbble.com/shots/4811613 [accessed 6 November 2018].
Villanueva, A. (2018) Shop Car App + Tour 360ยบ. [Image] Available at:
https://dribbble.com/shots/5692178-Shop-Car-App-Tour-360 [accessed 6 November 2018].
Thoughts of the day:
I kind of struggle a lot on the interaction by using everything with just gesture control, even if I come up with a nicely design interface to communicate how to use.... I don't know if is able to code it out, since I have to consider how the HTML div would have block each other that would make another function not working. So on the next post I would talk about my consideration and consultation with the technical lecturer for support.
Comments
Post a Comment