# core design sesnse

https://www.youtube.com/watch?v=imrsGSMXtLk

[00:04] Design interactions is another important topic when it comes to UI design.
[00:12] And in this conversation we will talk about what exactly is interaction in regards to user interface and what are the different kinds of devices that we use to interact and what modes do they provide these different interaction devices and specifics to that of if we had to build the interaction design with desktop what are the specifics that we should be aware of.
[00:48] Likewise for laptop mobile and variable interactions is what we will discuss during this conversation.
[00:55] Let's begin with what is interaction in UI design.
[00:59] Interaction refers to how users engage with a systems interface.
[01:08] And uh, it could involve various ways, um, the activities that could be required for user to perform actions such as clicking buttons, swiping, typing, or even making use of type, uh, voice commands as well.
[01:24] Um, all are included under the interactions umbrella.
[01:29] Interaction design actually ensures that whatever the actions are being provided to the users are very intuitive.
[01:34] They are efficient and respond to whatever user's needs are and what user is trying to achieve.
[01:44] So good interaction, uh, focuses upon making the user's journey very smooth.
[01:51] It, uh, how does it do that is by optimizing buttons, feedback mechanisms, gestures, and, uh, overall the entire experience should appear like it is seamless and user-friendly across all the devices that they are going to.
[02:08] Experience.
[02:11] There are various uh devices and modes which uh a user gets to interact with the interfaces out there.
[02:18] The first one is all about what different kinds of devices do we interact with.
[02:23] Desktop computers where uh the interaction mode is keyboard and mouse.
[02:29] And uh what is specific to that of desktop computers is because of the mouse and the combination of keyboard you have precise control.
[02:43] You can extensively make use of shortcuts and also um the the screen size actually gives away the ability to handle complex interactions lot better when it comes to desktop computers.
[02:58] Followed by laptops you will make use of keyboard and touchpad and sometimes even external mouse as well as the interaction modes and similar to that of.
[03:09] The desktops, uh, they also have a lot of characteristics which match with the desktop computers, but they also come up with portability as one of the important factors.
[03:19] They sometimes also include touch gestures on, uh, you know, few models that you have recently been able to, you know, see.
[03:32] The next one is tablets, where, uh, the primary interaction mode is touchscreen and, uh, you can directly manipulate the interface elements through touch.
[03:41] It also supports gestures like, uh, pinching, swiping, tapping, etc.
[03:50] When it comes to smartphones, uh, again, interaction mode is touchscreen, but the screen is a little smaller.
[03:58] So you will get to see touch-based interactions, uh, often with very small or limited screen space, and it includes gestures as well as taps.
[04:08] Then there are wearables.
[04:12] Such as smartphones, uh, smart watches where the interaction mode could be touchscreen, physical buttons, as well as voice commands.
[04:23] So because of the limited screen space, you firstly are to focus upon quick interactions and, uh, they often also are relying on voice input or gestures.
[04:37] Next, there are voice assistants which are like Amazon's Alexa and Google Assistant, Siri, and, uh, the interaction mode primarily is voice commands.
[04:49] So you wouldn't get to see visual interface.
[04:52] Uh, you will have to interact through spoken language and, uh, it requires natural language processing.
[04:59] Then there are kiosks and public terminals which have touchscreens and also physical buttons as well and or they are often used in public spaces.
[05:11] So they are designed for rather quick and.
[05:13] Straightforward interactions.
[05:15] There is also virtual reality where, uh, you will make use of VR controllers, motion tracking as the interaction modes.
[05:28] And the virtual reality is supposed to provide you with immersive experience interactions through physical movements as well as through gestures as well.
[05:37] Augmented reality.
[05:37] Uh, you can make use of smartphones or tablet camera as well as AR glasses.
[05:47] And the characteristics of AR interaction include the, uh, overlays of digital information on the real world.
[05:58] And, uh, you majorly will be able to interact through touch or, uh, gesture.
[06:07] So what could be the differences in interaction modes?
[06:10] First, if we start.
[06:14] Looking at the aspect of uh input precision, then with respect to desktop computers, the uh interaction mode is uh keyboard and mouse.
[06:27] So you will be able to have high precision over here with a cursor.
[06:33] Whereas um if uh it's the touchscreen with respect to say tablets or phones, then you will be able to directly touch and interact with them.
[06:43] So the input precision is lot lesser than that of the mouse, but it is rather more intuitive as well.
[06:51] And when it comes to voice, you uh do not have any visual feedback for the input that you provide.
[06:58] It uh solely relies upon verbal communication.
[07:04] If we move towards interaction complexity, then desktops support complex interactions uh by making use of keyboard shortcuts as well as mouse.
[07:16] Whereas touchscreen, they would rather have simplified interactions and are often gesture based.
[07:23] And when it comes to voice, the complexity is not too high.
[07:29] So you'll have to make use of simple commands and it is limited to what can be effectively communicated verbally.
[07:37] So there are variations with respect to screen sizes as well.
[07:38] Desktops have the larger screens and can display more information whereas tablets or phones have smaller screens and they require prioritization of information before it gets displayed on these screens.
[07:53] And then with respect to variables, it's lot lesser, very limited space.
[07:59] So they primarily focus upon simplicity.
[08:02] There are also variations with respect to the context of use of these devices.
[08:07] Um, your desktops or laptops usually are used in stable environments like offices, homes whereas tablets or phones.
[08:18] Are used on the go.
[08:21] Um, so the interactions are supposed to be rather very quick and efficient.
[08:25] When it comes to variables, the focus is on glancible information because you usually use variables when you are in a different activity altogether and you rather would be aiming for quick actions whenever the information is glanced over.
[08:38] And uh, the context of use with respect to voice is uh hands-free and it is used in environments where visual interaction is almost impractical.
[08:53] Now let's go in a little more uh deep, let's let's understand a little more deeper with respect to desktop interactions.
[09:00] So what are the key considerations?
[09:03] First one is your interaction mode involves keyboard and mouse usage.
[09:12] Um, that's why the um users uh rely heavily on the precision of the mouse.
[09:19] And uh especially for the navigation, they often make use of the keyboards for uh shortcuts or text input or sometimes even navigation as well.
[09:31] So this combination of keyboard and mouse provides high levels of efficiency.
[09:36] Next, desktops typically offer larger screens, which mostly means that you can display more content in one single go.
[09:44] And uh there is also a possibility for multi-wind and multitasking uh steps being presented.
[09:54] Um complexity tolerance is high, which is users on desktops are more comfortable with multi-step interactions.
[10:04] Um because it is easier to handle all these complex workflows or detailed um forms because of the higher form factor.
[10:13] And uh what are the expectations from a desktop interaction is um users expect.
[10:20] That, uh, the system response, uh, faster, that is faster response times and, uh, faster precision, higher precision, and accessibility to advanced features like drag and drop functionality, resizable windows, or even multi-level navigation as well.
[10:37] So some of the familiar interactions include double clicking, uh, right-click context menus, hovering; these are rather very standard as well.
[10:49] Some of the key theories and principles that, u, we can look out for whenever we are talking about desktop interactions include Fitts's law, which is, uh, which, which states that the time which is required to move to a target.
[11:04] A target could be a button or an icon in this case is a function of two variables.
[11:10] One is distance to the target and the other one is the size of the target.
[11:17] So, um, in loose words it translates to.
[11:20] The fact that if you would like your system to be usable, then ensure that the clickable elements are large enough and placed in easy to reach areas.
[11:32] Then there is Hick's law, which suggests that the more choices a user has, the longer it will take to make a decision.
[11:40] So you'll have to limit the number of options presented to users at any given moment.
[11:45] Um, especially if you're dealing with complex workflows or navigation menus.
[11:50] Then there is Gestalt principles, which is all about the way how we visually group elements either logically or intuitively on the screen.
[12:03] So, place similar actions close together and visually connect all the related information which is rather related to each other.
[12:12] And um, then there is Miller's law, which suggests that people can only hold about 7 plus or minus two items in their working memory at one.
[12:20] Point of time.
[12:24] So make sure that you do not overwhelm the users with too many choices of information in a single screen.
[12:28] Um as much as possible try to create manageable chunks uh by breaking the content.
[12:35] And then there is affordance which is refer to the perceived and actual properties of um whether an object suggests how it should be um used.
[12:47] Example, if you look at a button, it should look like it can be clicked.
[12:52] So your design elements should visually communicate their function.
[12:54] Uh buttons should look like buttons links should look like links by making use of underline.
[13:02] Um or they also at least should stand out.
[13:05] There also is feedback which also is an important parameter when it comes to desktop interactions which is about providing immediate and clear feedback for whatever interaction.
[13:14] So you'll have to ensure that all actions are followed by feedback to confirm that the.
[13:22] Interaction is captured.
[13:29] Um, best practices to uh highlight when you are uh building the designs for desktop interactions.
[13:38] First is leverage the screen real estate because you have a larger screen space and uh it will help you provide more content without having to overwhelm the user.
[13:50] So you can make use of grids for uh organization and uh make sure that you keep the balance between white space and content such that you don't, you know, create clutter but more information can be displayed without creating clutter.
[14:05] Next is making use of keyboard shortcuts, especially for power users.
[14:11] You will have to uh, you'll have to make common tasks like saving, copying or uh uh maybe even undoing actions uh through keyboard combinations such as, you know, we make use of Ctrl + S for save control.
[14:25] C for copy and controll + Z for undo.
[14:30] Redo as well.
[14:34] Um, utilize hover states because uh you'll be making use of mouse which is rather very central central to the desktops.
[14:41] Core FX can be provided to uh can be used to provide additional information, tool tips or even a visual feedback without having to click on the given CTA.
[14:52] Next, multi-level navigation is also, you know, advisable.
[14:55] Uh, it's it's really common to look at drop-down menus or sidebars.
[15:02] Um, but we will have to make sure that the navigation is intuitive with clear labels and hierarchy as well.
[15:12] It's also very common to look at resizable windows and modality where you will have to avoid making use of too many dialogues but if used we have to ensure that they are accessible and provide an easy way to close or dismiss.
[15:26] Them.
[15:29] Then there are also advanced controls like uh drag and drop features um that will help in moving lists, files or items from one place to another place.
[15:36] And um they are usually used in dashboards or workbased apps.
[15:40] They allow for customization of layouts, sidebars um as well as views sometimes.
[15:49] And then there is a form design which is unique to um uh the desktop where you will have to make use of inline form validation especially if you are making use of long forms and uh this will help in preventing errors rather very early on.
[16:05] So you'll also have to make use of progress indicators if at all you have multi-step performs and ensure that the fields are logically grouped and as well as aligned.
[16:15] Some of the common mistakes that you will get to see when you are when you have either designed or evaluating a desktop interaction is u because of the.
[16:27] High form factor and because we think that the complexity could be very easily handled by the users we do not know exactly as to where to stop.
[16:34] So we will end up over complicating the navigation.
[16:39] They definitely can handle complexity but adding too many options can definitely overwhelm.
[16:46] So it is required that you keep the navigation clear and radical.
[16:51] Um there is also a possibility that you will fail to account for accessibility needs like keyboard navigation or screen reader support as well.
[17:04] So you will have to ensure that there is sufficient color contrast for readability too.
[17:08] And not providing feedback which is a very common mistake when designing that for example loading states or clear confirmations, no one knows as to what's actually happening where the screen is just being blank even after the user has interacted.
[17:23] It really makes user feel very confused about whether their.
[17:29] Action was registered, or is something being done about what he was intending to do?
[17:33] And then there is overloading of content.
[17:37] Just because there is more space on the desktops doesn't necessarily mean that you should just fill almost every other inch that is available on the screen.
[17:45] So too much content or too much actions on the screen can actually make it feel like it's rather very difficult for users to focus on what is really important and what is not.
[17:58] And not optimizing for the keyboard, such as creating keyboard shortcuts or assuming that users will only make use of mouse, is another common mistake.
[18:08] Inconsistent use of buttons, fonts, and visual hierarchy across different screens can confuse users.
[18:13] So we will have to make sure that the design is really cohesive and it follows one particular design system.
[18:23] Next, let's look at laptop interactions where the primary...
[18:30] Interaction mode is keyboard and touchpad.
[18:32] Most of the laptop users rely upon a combination of keyboard and touchpad for interaction.
[18:37] So um what does this do is it makes the navigation, typing, and precision rather uh easy um but also has limitations in comparison with that of the desktop uh systems.
[18:54] And uh there is a high chance that whenever someone is making use of laptop they also are connected to external devices such as mouse, keyboard, second screens, or so.
[19:05] So when you're making use of a laptop in a fixed location like a desk, you could be ending up using either of these external devices.
[19:14] There is also optionally touchscreen where uh you will have added additional interaction methods like u uh touch gestures and stylus support as well.
[19:25] If you're making use of this touch screen, then on the lines of screen sizes, you will.
[19:31] See that desktops could be ranging anywhere between 13 to 17 in.
[19:36] This limits how much information can be displayed on a single screen without having to own the users.
[19:48] You will also have to consider optimizing your layout such that it ensures that there the layout is responsive and uh it makes efficient use of the limited screen uh real estate and uh whatever are the important features uh they are presented in the front and in the center of the layout.
[20:10] Um you also have to take into account the uh context of use because laptops are u often used in various environments could be from desks to cafes to public public transports as well.
[20:24] So this portability may lead to more interruptions um in regards to lighting uh.
[20:32] connectivity as well as attention span
[20:35] and uh since the laptops are portable
[20:38] right they
[20:40] are uh there there might be some
[20:42] concerns in regards to the battery life
[20:44] as well internet connectivity too. So
[20:47] the designs are supposed to avoid
[20:50] draining resources unnecessarily such as
[20:52] making use of animations a little too
[20:54] often is not necessarily required if you
[20:56] are trying to um you know consume less
[21:00] battery and u some of the key principles
[21:04] that you know you will have to take into
[21:06] account when you are um working on
[21:09] laptop interactions. The first one is
[21:11] fits law. Now that the screen size has
[21:14] rather reduced, um the distance to and
[21:17] the size of clickable targets should be
[21:19] considered more deeply especially given
[21:21] the touchpad is rather very precise um
[21:24] is is not as precise as that of the
[21:26] mouse and um um they and you have to
[21:31] also make sure that you make clickable
[21:33] elements large enough for users to
[21:34] easily interact with them.
[21:37] As per the hick law, you'll also have to
[21:39] reduce the travel time and effort. Um
[21:42] the other one is responsiveness and
[21:44] adaptation because u laptops come in
[21:48] varying screen sizes. So responsive
[21:51] design becomes really critical and you
[21:53] will also have to ensure that the UI
[21:55] adapts to different resolutions and can
[21:57] handle resizing when users switch
[21:59] between multiple displays or connected
[22:01] to external monitors. There is also
[22:04] something called gorilla arms syndrome
[22:06] where um it's a concept that refers to
[22:11] users fatigue when using touchscreens on
[22:14] laptops for a prolonged u period because
[22:17] you'll have to extend your arm like
[22:18] that. So touch-based interaction should
[22:21] not be the primary mode of interaction
[22:23] on laptops as the ergonomics aren't
[22:25] suited for long-term touch usage at all.
[22:29] Miller's law. Uh since laptops have
[22:31] smaller screens, cognitive load should
[22:33] be managed very carefully. Avoid
[22:35] overwhelming users with too much
[22:37] information on a single screen. Um
[22:40] wherever possible, make use of
[22:41] progressive disclosures so that you hide
[22:44] less relevant details unless it is
[22:45] needed. and um um you know take care of
[22:50] the posture and ergonomics as well
[22:53] because uh laptops will be utilized
[22:57] either on desks or even on laps as well.
[23:00] So designing for uh different angles and
[23:03] distances from the screen becomes really
[23:05] important.
[23:13] Some of the best practices to look out
[23:15] for when we are making use of laptops is
[23:18] optimize the layout for smaller screens
[23:21] and u uh touchpad friendly interactions
[23:25] which are uh easy to click, hover as
[23:30] well as drag. Avoid requiring small
[23:33] detailed moments. Ensure that hover
[23:35] effects provide adequate visual feedback
[23:37] for interactions. Um, as users may take
[23:41] a second longer to aim and click with a
[23:43] touchpad in comparison with that of the
[23:44] mouse.
[23:46] Um, make use of keyboard shortcuts.
[23:49] Laptop users often rely on keyboard
[23:52] shortcuts for faster navigation,
[23:54] especially in productivity apps. Often
[23:57] um, offer intuitive keyboard shortcuts
[23:59] for any common action that could come
[24:01] up. Optimize the UI to minimize uh
[24:04] resource usage. Avoid any resource
[24:07] intensive animations. Um autoplaying
[24:10] media which can u just you know drain
[24:12] the battery life very quickly and uh
[24:16] also have modes such as power saving
[24:18] modes if at all you know such kind of
[24:20] things are to be avoided or high
[24:22] performance UI modes and uh build
[24:26] context aware UI since users may switch
[24:29] between environments. Um, designing UI
[24:32] elements that adapt to both the dark and
[24:34] bright settings such as including a dark
[24:36] mode for low light environments could
[24:38] help and have a multi-device workflow
[24:43] where uh because the the laptops are
[24:46] often used in conjunction with other
[24:48] devices like phones or tablets as well.
[24:50] So you'll have to design interfaces that
[24:52] allow for seamless cross device usage
[24:55] and also ensure that users can continue
[24:57] tasks started on some other device
[25:00] altogether. Some of the common mistakes
[25:02] to avoid one is um ignoring keyboard
[25:06] navigation altogether and then focusing
[25:08] only upon the touchpad or the
[25:10] touchscreen navigations. Uh this will
[25:14] make users feel like u especially the
[25:16] power users feel like they are alienated
[25:18] and then they'll have to depend upon an
[25:20] external device. Overloading the screens
[25:23] uh laptops generally have limited screen
[25:25] real estates compared to desktops. So if
[25:28] you try to display a lot of information,
[25:30] it will overend the user. Do not do
[25:32] that. and heavy resource usage such as
[25:36] um um the ones that would require a lot
[25:39] of battery power to run um excessive
[25:42] animations or high resolution media.
[25:45] They uh reduce of the performance or
[25:47] drain battery really quickly. So
[25:49] optimize for energy efficiency.
[25:52] um neglecting external device
[25:54] compatibility like it was discussed many
[25:57] laptops you um in actually make use of a
[26:00] lot of external peripherals like mouse
[26:03] monitors and keyboards the interfaces
[26:05] that don't adapt to multiscreen setups u
[26:08] can actually cause a lot of usability
[26:10] issues. So if you are creating the
[26:13] solutions for laptop then also design
[26:16] for uh many other uh you know multiple
[26:19] screen experiences as well. Failing to
[26:22] provide feedback uh where input methods
[26:24] are more varied providing real-time
[26:26] feedback becomes really crucial. So
[26:28] don't neglect to show feedback for
[26:30] interactions. Um even as little as hover
[26:33] states, press states or loading states
[26:35] as well.
[26:39] Next are um the key considerations for
[26:42] uh smartphone interactions. Um here the
[26:47] primary input is uh touch with the
[26:50] gestures that could include taps,
[26:53] swipes, pinches as well which play a
[26:55] very important role. So the design
[26:57] should make interacting with fingers
[26:59] rather very smooth and intuitive.
[27:02] So um also take into account the thumb
[27:06] reach. Most users interact with their
[27:09] phone one-handed using their thumb.
[27:11] Consider designing the interface in a
[27:13] way that uh places
[27:17] um essential actions within the thumb
[27:20] reach which is said to be the thumb
[27:21] zone.
[27:24] Um smartphones have limited screen uh
[27:27] real estate. So it would require very
[27:30] careful consideration of how much
[27:32] information is to be shown in one single
[27:35] go and how it has to be progressively
[27:36] disclosed as well. So prioritize your
[27:39] content and create a very clear visual
[27:40] hierarchy. Um design needs to be
[27:43] responsive. It should ensure that it
[27:45] adjusts well across various phone sizes.
[27:48] So um make sure that your uh user
[27:52] interface also handles well the
[27:54] responsive changes especially when you
[27:56] move from smaller to larger smartphones
[28:00] or towards the bigger devices such as
[28:03] laptops and tablets as well.
[28:06] Um the context of use that is um uh your
[28:11] smartphones will be utilized in variety
[28:13] of environments. Um sometimes in the
[28:16] public transport or cafes and u they are
[28:20] often used while you know the person is
[28:23] moving or multitasking. So uh designs
[28:26] should be context aware and uh they
[28:28] should allow for uh quick and glancible
[28:31] information. Smartphones can switch
[28:33] between portrait and landscape modes. So
[28:36] we have to ensure that the design adapts
[28:39] smoothly to all of these orientations as
[28:41] well. Um could happen that one of these
[28:44] modes could be dominant but uh some of
[28:48] the applications still make use of a
[28:50] combination of them such as if you have
[28:52] u the media players um such as in the
[28:55] Netflix. So it could be used in one mode
[28:59] generally while you have to pick a
[29:01] particular movie that you would like to
[29:02] watch and then when you have to go into
[29:04] an immersive state that's when you will
[29:06] go towards the landscape mode. Um
[29:09] smartphones are uh portable mobile so uh
[29:13] users may experience fluctuating network
[29:16] conditions and they also have limited
[29:18] processing power. So you'll have to
[29:20] optimize your design for lower bandwidth
[29:23] and ensure that the app runs smoothly
[29:25] even on lower-end devices as well.
[29:29] Um so in these cases one principle that
[29:32] stands out is the sorry two two
[29:37] principles that stand out in comparison
[29:38] with that of the laptop interactions is
[29:41] thumb zones. So um first one with
[29:44] respect to fits law you should at least
[29:46] have a tab target of anywhere between as
[29:49] minimum as 44 pixels cross 44 pixels
[29:52] because that's the amount of target that
[29:54] you would require to make an interaction
[29:55] with your finger and there also is a
[29:58] thumb zone principle which focuses on
[30:00] how users hold their smartphones
[30:02] especially with one hand. So the thumb
[30:04] zone is the area of the screen that's
[30:06] most accessible for users thumb. And
[30:09] what you have to do is you'll have to
[30:10] place primary navigation uh frequently
[30:13] used actions within this thumb's natural
[30:16] range. And this will enhance the
[30:18] usability um especially if the screens
[30:21] are a little large. And uh there also is
[30:25] a posture design principle that you'll
[30:27] have to take into account where uh users
[30:30] may hold their phones in various ways,
[30:31] one-handed, two-handed or with one hand
[30:34] while tapping with the other. These
[30:36] postures have an impact on how easily
[30:39] users can interact with the interface.
[30:42] So avoid placing critical actions in
[30:44] places which are hard to reach when you
[30:46] have to build the interfaces.
[30:50] What are some of the best practices that
[30:51] we will have to aim for when uh we are
[30:53] building smartphone interactions is
[30:56] firstly prioritize the content because
[30:58] uh mobile screens are limited in uh
[31:00] size. So use a content first design
[31:04] strategy uh putting essential
[31:06] information at the forefront and avoid
[31:08] overloading users with non-critical
[31:10] information. Simplify the navigation. Um
[31:13] make sure that uh the uh navigation is
[31:16] very intuitive and reduces the number of
[31:18] steps to reach the important actions.
[31:21] And uh making use of bottom navigation
[31:24] or hamburger menu um to keep important
[31:27] actions within easy reach especially for
[31:29] one-handed use is another good practice
[31:31] to follow. Design for gestures. Um
[31:35] provide visual cues that hint at
[31:36] gestures such as swipe to de swipe to
[31:39] delete and ensure that there are
[31:41] alternative views to complete these
[31:43] actions for accessibility as well. Make
[31:45] use of visual feedback um such as you
[31:50] can actually design clear tactile or
[31:52] visual responses um where if you click
[31:56] the color changes or if you you know
[31:59] click on the button there is a vibration
[32:00] that comes up. It indicates that the
[32:03] interaction was a success or a failure.
[32:05] Also, optimize for different screen
[32:07] sizes. Ensure that the responsive
[32:10] scaling happens where the layout adapts
[32:12] to different screen sizes and make use
[32:14] of flexible u grids instead of making
[32:17] use of fixed width designs and aim for
[32:20] micro interactions um to communicate a
[32:24] status change or a transition. and also
[32:27] ensure that you don't use them
[32:29] excessively because they overwhelm the
[32:31] entire experience also have an impact on
[32:33] the uh battery life as well. Um aim for
[32:36] optimizing the load times, minimizing
[32:38] background processes and ensure that the
[32:41] content loads incrementally rather than
[32:43] having to just display almost everything
[32:45] in one single go. Some of the common
[32:48] mistakes that we should be aware of so
[32:49] that we could avoid is u cluttered
[32:52] screens trying to fit too much
[32:53] information on a small screen. it will
[32:55] open the user as well as um impact the
[32:59] uh navigation as well. Um tiny tab
[33:02] targets where you are making use of very
[33:05] small buttons or links that are hard to
[33:08] tap. These will frustrate the users and
[33:11] I and might also lead to a lot of user
[33:14] errors as well. Over reliance on
[33:16] gestures. Um they definitely can
[33:18] streamline the interaction but they
[33:20] should not be the only way to complete
[33:22] tasks. So you will have to provide with
[33:25] alternatives or instructions that can
[33:27] lead to confusion
[33:29] that can uh lead you away from the
[33:31] confusion and uh ignoring orientation
[33:35] and device flexibility where we assume
[33:38] that all users will hold their phones in
[33:41] portrait mode only. It's actually a
[33:43] mistake because uh especially with
[33:45] respect to media consumption or gaming
[33:47] apps, they could change the way how they
[33:49] make use of their phones from landscape
[33:51] to portrait and vice versa. Um and if
[33:53] you haven't been able to adapt your
[33:55] experience for that, it will um you know
[33:58] actually have an impact on the overall
[33:59] experience of making use of your
[34:01] application. Um small font sizes or low
[34:04] contrast text can also uh make reading
[34:07] on smartphone really difficult
[34:09] especially if you are in outdoor
[34:11] environment. So um you know poor
[34:14] readability is also one of the common
[34:16] mistakes that you will get to see. Um do
[34:18] not make it difficult to read in various
[34:20] light conditions and uh overusing poorly
[34:23] optimized animations that will uh slow
[34:26] down the app and drain battery life is
[34:28] also a common mistake that you see with
[34:30] respect to smartphone interactions.
[34:33] Moving on to the variable interactions.
[34:36] Um firstly they are uh small screens and
[34:41] uh this is going to limit the amount of
[34:42] content to display and uh you will have
[34:46] to rely on a mix of interaction modes as
[34:49] they will also have touch um physical
[34:52] buttons, voice commands as well. Some
[34:55] devices also use gestures such as wrist
[34:58] movements and u um the haptics the
[35:01] vibration feedback that we receive and
[35:03] context of use is very important because
[35:05] variables are often used when uh people
[35:08] are on the go say walking exercising or
[35:10] driving. So interaction should be brief
[35:12] and um uh very contextual. Users will
[35:15] glance at the screen and expect to
[35:17] accomplish tasks very quickly. So the
[35:19] focus should be on glancible interface.
[35:22] uh variable devices have rather very
[35:24] smaller batteries even compared to that
[35:26] of the smartphones. So energy efficiency
[35:28] is very crucial. Variables are heavily
[35:31] notificationdriven. So the primary use
[35:33] case of making use of uh the variables
[35:36] involves checking notifications for say
[35:39] emails, messages or app alerts. So
[35:42] you'll have to design clear
[35:43] non-intrusive notifications that can
[35:45] very quickly be dismissed if needed. Um
[35:49] so the key principles that you'll have
[35:50] to look out for is for the minimalism
[35:52] that is the screen is very limited. So
[35:54] you'll have to make use of minimalist
[35:56] design principles over here. Um you also
[36:00] have to take into account the uh mistake
[36:03] proofing where you're making sure that u
[36:08] you do not allow missteps or accidental
[36:12] inputs to just lock off the action from
[36:14] the user and you make use of
[36:17] confirmation actions everywhere wherever
[36:20] possible before you lock the user off
[36:22] from you know reverting whatever the
[36:24] action that the user has taken. Um you
[36:27] also have to take into account context
[36:29] awareness because um usually variables
[36:32] will be utilized in context such as
[36:34] fitness tracking, navigation,
[36:36] communication. So the design should
[36:38] adapt to the user's situation.
[36:42] What are some of the best practices that
[36:45] u uh we will have to take into account
[36:48] when we are building variable
[36:49] interactions? The first one is we have
[36:51] to focus on quick interactions because u
[36:54] you know glancibility uh is the
[36:57] important factor over here. Uh make use
[36:59] of voice and gestures uh because they
[37:03] are rather more natural and hands-free
[37:05] ways of interacting with the variables
[37:09] especially because um you know the
[37:11] person is on the move. So you'll have to
[37:14] integrate voice control uh for tasks
[37:16] like replying for replying to messages
[37:18] or u um setting reminders or so.
[37:21] Optimize for readability. Make use of
[37:23] bold fonts and ensure high contrast
[37:25] between text and background. Limit the
[37:28] amount of text displayed at once. Um
[37:31] favoring icons and simple visual
[37:33] elements as well. Leverage haptics and
[37:35] feedback. Design for multi-device
[37:38] ecosystem because uh variables rarely
[37:41] work in isolation. They're often paired
[37:42] with smartphones, tablets or other
[37:44] devices. And some of the common mistakes
[37:47] that you should avoid when you are
[37:49] building for when you are trying to
[37:51] build interactions for variables is do
[37:53] not um over complicate the interface. If
[37:56] you try to cram too much content onto
[37:59] the screen, it leads to clutter. Um
[38:02] makes it really hard to navigate and uh
[38:05] you will definitely have to focus on
[38:06] simplicity and uh privity. uh do not
[38:09] neglect the content because the content
[38:11] is the important factor. Um if you fail
[38:15] to design for context um such as
[38:19] offering small text or uh touch targets
[38:22] that are really difficult to interact
[38:24] with while walking or working out. It
[38:26] rather makes it very difficult to
[38:28] utilize on the move. And do not ignore
[38:31] battery optimization. And uh thinking
[38:35] that touch is always the ideal approach
[38:38] of interacting with a interacting with a
[38:40] variable is wrong because users might be
[38:43] on the go or even wearing gloves as well
[38:45] and they will not be able to interact if
[38:47] you do not have say voice activated or a
[38:50] physical touch interaction modes. Uh
[38:53] make sure that you keep providing uh
[38:55] feedback. Do not fail to provide
[38:56] feedback. um make use of haptic or even
[38:59] visual feedbacks when user completes the
[39:01] actions.
[39:03] With that we have come to the end of
[39:04] this discussion.