 Good evening here from Denmark and welcome to this touch the effects webinar We are getting ready at our end to take you through this webinar today We will be live in the five minutes for the actual webinar Just to give you a quick introduction to to the go-to-meeting setup we're using You are in this no remote and but you can ask questions and participate in our polls and so on And we hope you will ask a lot of questions and of course participate in the polls. We are we're doing You can see Also here, we will share a handout later on which will also appear on the need the question pane And after the webinar, we will also try to ask or answer all the remaining questions either by voice or by text Yes With me today, you can see also Henrik Henrik. Hi everyone And later on Henrik will share with you what percent it's customers think that companies deliver superior use experience and Before we start the webinar, we would like to just test a poll and See what you think of this And I'll launch it right now. So I hope you can see it At what percentage does customers agree that companies deliver superior use experience and please type in what you think and We will discover the result later on And I can see the boats are coming already Yeah, and please do this while we wait for the result Let's see if Henryk also is ready for for take you a third into this webinar. I hope you are Henrik Good Definitely Yes, and two seconds in two seconds we will close the poll and See what the results are and then we will start the actual webinar Yes, let's close it now and I will share the result with you and No one thinks 8% 40% thinks it's 32% so so let's see What the actual result will be later on and yes, I'll hide it Great I think we will start the webinar now Welcome to this touch effects webinar about embedded GUI design My name is Søren Mikkelsen and with me today behind the scene We have Kim Jönsson a digital designer from Milner informatics I hope you're with us Kim And if you are you can be sure your webcam He's right there again So you can actually ask a lot of questions and he will actually be there ready to answer you Great and last but not least we have Henryk which I gave a short introduction to before He's a US designer from Milner informatics with experience in several embedded projects Ranging from white goods smart watches to different industrial products in both the US Europe and Asia and so on He will be taking you through this webinar today and I hope you will enjoy it Before we start this webinar It would be nice to us to see what level of experience you have regarding a user experience Uninvited devices, so we will launch at home and now we know it's working So let's see what the results will be and I think Henryk will catch you on the right level here So I'll just launch it right now. I hope you can see it now and please put in your your vote here or not your vote what level you are and So we have a feeling of where you are and we are quickly reaching a 70 80 percent and while we're waiting for a result that's already a question coming in and He is asking What is the difference between a UX and designer and a UI designer? Maybe you can answer this Henryk? Yes, of course, and I see the poll already. I see a few people saying they are they are competent and even proficient in UX and UI designs. I'll be very excited to to hear your input as we go through The the difference between the UX designer and the UI designer is of course something that can be very very different According to what company you come from in our organization the user experience designer is usually the first one who gets involved with the with the customer or Or with the with the users and actually try to narrow down What kind of user experience we're looking for with this product and how we make sure that this product will be will be a success And of course as we we do all sorts of different exercises and use different methods to actually Narrow this down and align with the with the customer and align with users gather the feedback This is actually when we when we bring in our UI designers Who works usually more detail oriented? So after I have done wireframes where I've sketched up the the very early Skeleton of the application and got the initial ideas Unborn on board and aligned with the with the customer This is where the the user interface designer really starts to shine as he'll come in with his thoughts on Icon iconography Colors and really try to get out the the the feel and the finish of of the product So in this way, we're actually trying to to narrow down What kind of product we're building slowly slowly getting more detail as we get to the to the final Thank you very much sir. All right. I'll just go right into it So today I prepared what I've called five fundamentals for embedded GUI design And so these different areas is some of the not necessarily Covers everything there is to say about GUI design, but it's trying to cover different different areas that we usually Want to discuss with customers or where we usually see the pitfalls when when people embark on an embedded GUI design adventure The first one I'll be talking about today is the context and this is of course Who are your users? Where will they be using your product and really trying to define what context this product will be used in? Point number two today will be performance and hardware and this is of course something that is a pretty unique for embedded GUI design Normally if you're designing a web or mobile, you won't really think about How much RAM or how how big your processor is because things usually usually work and and perform At a high level Of course when we're working with low-cost hardware We we need to be aware of a few things before we get get started and really get into things And it's not because the low-cost hardware is limiting you But it's because you really want to to to make sure you get the best out of what we have to work with All right and point number three today is rules and recognize ability Of course when we're working with the embedded GUI design We have a set of rules and we have some Recognizability that we want to work with because usually people come from another world and embedded GUI design people's Most people frame of reference come from mobile phones And this is the touchscreen that we used to working with every day and using every day to check me Social media check our emails Browsing videos or even even texting each other So there's a lot of knowledge and a lot of rules that we Subconsciously follow and subconsciously expect of of GUI design And then better products. So this is something we have to keep in mind when we design as well Then of course we have consistency You need to be consistent with whatever rules you follow in your application And this is something I'll talk a bit more later on later on And last but not least we have the responsiveness and the animation again something that we're really used to from mobile phones Of course, the difference is mobile phones. They can get updates each week each month so you usually see a lot of different animations in in the apps that you use every day in Embedded products with lifetimes lifetime spans on five ten or even fifteen years It needs to be a bit more you'd need to be a bit more careful with what animations you choose because what is trendy today? It might not be trendy next year and certainly not in five years So choosing a choosing a careful approach here is it can be really important? Of course, the responsiveness is quite important as well We want things to be responsive again because this is what we used to we need to make sure that when I click that button The button tells me that it has been clicked. So you constantly need some some feedback loop. So actually till Till the user that that you have registered his actions But let's get started with the first one. This is of course the context and I'll just jump into the slide here Of course, the first question you need to be asking yourselves as you start to develop a GUI or embedded product in general Is who are your users and what are their needs? This is a very very basic stuff for for most designers, but It can be really daunting if you're maybe you are a developer who just got assigned to to doing the UX or the UI for the new product And maybe you don't really have the setup in our organization to actually get out talk to users and really identify the needs because of course, there's a beautiful videos on YouTube talking Talking a lot about how you should do this but very very often the the reality hits you and you have a you have a budget and can be really hard to Do this the right way at least the way it is pictured in in all these ideal Ideal videos that we see around the web so One thing you need to keep in mind as well is that the the consideration about who your users are and what their needs are It's not only a job for the user experience designer Usually the user experience designer someone who gathers the the information About users about the domain, but he needs to deliver this to to the rest of the development team as well And need to keep everyone aligned so everyone knows who they're building this product for Because when you get everyone on board and get everyone on the right track That means that every discussion and every decision that you make during development and during the process Everyone can help each other with actually delivering Some value for the end user and because it can be really hard to settle a discussion If it comes down to if one person likes blue and the other one likes red if you have a user That says that blue is definitely the thing to go for that's that's probably what you should listen to and of course We we need to we need a bit of a bit of A bit of argument of why do we need to talk to these customers and why do we need to talk to these users? And I just want to quickly to to iterate on this and so in 2005 a consulting firm called Bain and Company business consulting firm they did a survey with the 362 companies and where they asked all the companies Firstly, are you customer focused and out of all these companies? 95% said that there were definitely customer focused of course They would say that because everyone is dependent on the customers. They are the main source of income So it will be it will be quite odd to say that you weren't Then they they asked the the companies if they would say that they deliver as a period Experience and 80% of the company say that they definitely deliver as a period experience to to their customers The son started off the the webinar with a small poll asking you how How you think that cuz how many of the customers would actually agree that the companies deliver this? And actually see how this gap turns out and actually saw that no one got it, right? surprisingly 8% of customers actually agree that companies deliver a superior experience So we have a major gap here where? Companies think that they're they're delivering the very utmost experience to their customers But it's rarely that the customers actually agree and this is quite a problem because we really want to close this gap We want the the company to actually be able to deliver this this Experience is superior experience and we want the the customers to agree because this is what they will make the customers return and actually keep your business running so The I think sarin has a question for me right here. Yes Why do you think there's a big gap here? What is the main reason you think? I'll just unmute myself. I think the main reason here is is actually that most companies fail to align With the expectations and the needs of their users This is something that we we see a lot today a lot of Decisions and discussions new products are launched and not because they are based on Very grounded user research on how to how to support the user needs the best It can be skewed for a lot of different reasons But I really think it comes down to are you talking enough to your customers and I really listening to what they're saying All right, I'll go on So the next the next question we can ask here is of course, how do we actually close this gap? How how do we make our company deliver on the superior experience and how do we make our customers agree? One approach to this is of course look at the 8% look at the the 8% there of Companies who actually deliver this superior experience one thing Bayman company found was that these Companies have in common that they have a full commitment to treating their profitable customers in the right way So they will return and even recommend the services of the company to others And this is actually a very very central point And this is something that we today see that the user-centered approach is something a lot of people talk about It is the standard way when you want to deliver cutting its digital products Because you need to align on a world that is constantly moving and constantly asking for something different You really need to to make sure you have a finger on the pulse Because in the end the user is what who decides the the worth of your product If the user thinks that they have more value in another product or by a competitors product They will not buy yours So aligning with the customers who are actually paying for your products is the utmost important thing when you're actually Starting to develop a new product All right, we'll we'll move on so To to get a bit more concrete about how how you can actually can apply this this kind of thinking into into your process Is first of all define your users who will be using this product? Is it aimed for children? Is it aimed for elderly people? Is it aimed for people with low or high level of technical knowledge? Because this is all something that that you need to to think about when you convey the the user interface to the user How much do you need to hold people's hand? Is it someone who has a large amount of experience with such interfaces who just wants to Go on and solve his task or is it someone who are quite new to this technology? And maybe needs some more guidance as you go as the user goes through Another thing that you really need to to have an eye on is is this product movable? Or is it fixed on a wall? Because movable products can usually be placed a bit closer to your face and to your eyes and then then things on the wall It really depends on the height of course, but yeah funny thing people are different heights So something that is movable usually have let's say let's say have a Usually have the same distance to to to people's eyes and things that are fixed on a on the wall So this is something and you need to be aware of when you're choosing a button sizes and text sizes for example Another thing of course is are you working with with a product in an industrial setting or is it something for private use? Because in industrial settings if it's a product that a user wants to to solve a task a multiple times a day And maybe for for an extended period of time He really wants something that is fast and efficient and really Supports the task that he has at hand While on the other hand if you if you're designing for private use Usually we go for a bit more flair and we want we want people to really have a great Great experience with this so so this is this is where we we Go a bit more into detail and really create a nice vibe to to the product because When you put something into your home or into your product you start to to identify a little bit with a product So it's important that this is something that looks good and feels good Of course we have the the size and the text of buttons and this is something I think a great example is is the car displays today Some of you have might have even tried these Because the size of text and buttons on car displays today is most of the time absolutely horrendous it's it's really hard to to Take a quick glance at at text on these displays when you're driving the car You can't really look at the display for five seconds at a time because you need to watch the road as well So the size of text and the ability to actually hit these buttons when you're driving down a bumpy road as you usually do It can it can actually help quite a bit to keep these in mind when you're designing the user interface one thing I wanted to To include I hope you see my my little display over here with the with the washer and Is is that this this? Demo that we did is of course aimed for being on a washing machine So in this case we were actually having a display that were mounted On a fixed surface So we we should actually be be able to to read this as a larger distance that we would if people could help have it at face level So the difference here is of course, is this something that is 30 centimeters from your face It is something I can hold in my hand or is it one meter away when the when the washing machine is at my the height of my hip so The the decision we did here regarding text and icon sizes were actually We're actually decided on the the distance that the most users would have to the display Of course, I can start it for for a bit for a bit flare keep you entertained at home All right, so on you have Yeah, yes, we have a question from one in the audience how much Does the geographical culture of users around the world impact the Google design? It can actually mean quite a lot Usually what we want to to define when we get a customer in our house is actually are we are we aiming for a Western audience are we aiming for Europeans or an American Market or we're looking for an Asian market or maybe even a third one because Especially the the Western market and and the Asian market. It really has different approaches to what a good UI is So it it actually matters quite a lot who you're designing it for and it really underlines the importance of asking who are the main Who are the users and who are the target audience for this product? Alright, so I'll I'll move on and actually some these These context tips up a bit for you before we go into the next one So of course keep the focus on on your end end users and you should actually do this throughout your development It's not something you can just do in the start and then think that the the world will stand still while you develop your product You still need to to to talk to your users as you go through and it can actually be a very good idea to talk to Users and test the ideas that that you have as you go on test Maybe some quick prototypes and receive some feedback because this can actually help you stay on the right track as you develop it because a lot of ideas will will come up and and Be either integrated or bounce off your product or or your or your project as you develop it So you really need to make sure that the right things get into your product and the wrong things are kept out And again, the users will decide what these right and wrong things will be And and just just to give a quick example as well Usually what we do is is kick off a project project with user research And maybe a workshop to actually gain some domain knowledge before we actually start to do wireframes and before we start to do the the Graphic design for the UI Because this can actually help us guide this process a lot and make sure that we are lining with the customer Again, because we want to build the right thing from the start All right. So the next the next point up is performance and and hardware and Of course, this is something that matters quite a lot, especially on in these low-cost micro processors And so one thing you need to keep in mind when you're developing your your UI It's actually considering these performance options early And this is not because you cannot do beautiful stuff and do high-end graphics on Unlow and on low-end hardware, but it's because you need to to to know what the limits are in your hardware So you can actually play to the strengths and not the the weaknesses of the hardware And of course a framework like touchy effects is actually amazing in this regard because it it actually Delivers some flexible solutions to how you can approach different problems so sometimes when if you have a very low cost Low-cost processor that can't really do the animations that you want You might consider doing stuff like animated images instead and actually hand Hand-animate each image and this is actually something that we did for for for the the washer prototype So if I start to do a wash you'll see that the the center circle will expand a little bit This is something that is actually quite hard to do with the most low-cost hardware the Scaling of different objects because you need to calculate the the size as it grows And this can be quite straining on hardware and your frame rate frame rate will really take a hit But if you if you do this in images instead and actually hand draw the development of this this animation You can use the animated image widgets in touchy effects, which is very very cost efficient on your hardware You're just making the software do the work instead This is actually something that is quite nice with touchy effects Another thing you need to consider on your on your hardware is of course what are the color color possibilities on the display? I work with the four-bit displays with 16 colors I working with 24 bit with 16 million colors because this is something that really has a lot to say when you when you're developing the You are the UI of course This is not to say that you can't make great UI on the on the lower bit Displays in there in the corner of this slide you for example see our some fee design quite as a few years on the back But I think I think it's it still looks it looks quite good and and the black and white can really make a UI design quite simple So less is or more is not necessarily better when it comes to colors And another thing we get asked about once in a while is viewing angles And I won't be covering this today because I have a we have a tight schedule But we have a webinar later in the fall as called choosing the right display So if you think this is something that applies to you you might consider signing up for this All right, I think we're ready to move on to to the tips for performance And of course you want to avoid these disappointments That can it can be and in really developing a great-looking UI on your four thousand dollar iMac Monitor and then when you when you flash it on your display you realize that you only have 16 colors and everything Doesn't look quite as well as you imagined it. So it's a very good idea to actually check early if your graphical design will actually Will actually look as great as you as you think it will Another thing you want to do is is work closely with the developer Developers and this is to identify the options you have not only in the hardware But actually touch gfx itself because usually the hardware of course poses some limits on what you can do But the solutions to to these limits and the solutions to different problems You have during development often lies in the software that you use and this is where touch gfx and the flexibility That comes with touch gfx. It's actually something that can help the the UX and the UI designer Try to accompany this into the design So you're not giving your developers a hard time later on but you can actually play to the strings of the hardware and the software that you're using Of course, you want to evaluate your performance as you go And this is to identify when you need to find alternative roots. I mentioned before touch gfx is flexible So there's always a different approach to solving a specific task if you have a An animation that's a bit tricky. It's always a different way to do it. It's just a matter of identifying it So this is is quite nice to to identify these as early as possible as well It's one thing that I need to mention as well is of course that performance should be tested on the hardware itself And not the PC simulator and this is where the touch gfx designer think sarin will talk a bit about it later as well the ability to flash something quickly onto onto hardware With the touch gfx designer is something that makes it very very quick to to actually test this performance Again to make sure that you're not you're not Dreaming of something that can't be realized on the hardware that you have chosen And actually while we are talking about touch gfx designer We have a question from one in the audience and it's actually for you and like Are you using the touch gfx designer and how are you using it? I? Am using the touch gfx designer. I use a bunch of other tools as well But the touch gfx designer really comes into play when I get the the UI designer involved So usually my process will be to to sketch up Very early some very early drawings and making the the skeleton of the of the application And as as we as we go in be become more detail oriented I start to get some graphical assets some images from my From my UI designer that I can work with Then I can very quickly start to put these into into the touch gfx designer and actually set up the The UI as I imagine it will look in the end and I can quickly flash it to to the drive I can do some quick animations if I want to test something out quick interactions as well and so this actually helps me and Try out some some very early ideas ideas and actually prototype quite fast And this is usually how you identify And distinguish good ideas from bad ideas So this is this is where touch gfx designer really starts to to make its worth All right, we'll jump on to the next one. This is rules and recognizability I mentioned it as we started off as well I need to say it again smartphones design define our rules for for touchscreen navigation This is something is Really really hard to get around because the frame of reference that users have today is The smartphone they have in their pocket. There's no way to get around this And it's something we have to keep in mind when when we design embedded GUI One thing that we we need to keep in mind as well as the expectations that comes with the with this smartphone mania and because smartphones of course have Some hardware that can do Quite a bit more than than what we can in microprocessors where we have something that That's cost a fraction of what a smartphone does but this does not really affect the the Expectations users have and this can of course sound a bit unfair But it's not something that that should actually limit us too much So when when we when we're looking at these rules that is defined by smartphones is We need to consider these well established conventions that we we see see around the The app world right now and this is something that actually comes from a lot of web design as well. I Brought a few examples in the text here The closing X is usually put in the top right corner of Of the window because this is where people will look This is where they usually look when they need to close a window or need to go back in a menu so another thing that Is important to consider here is the reading direction for at least most languages in the world Is from left to right and from top to down? So this is actually the the direction that most people will scan the interface as well when they're trying to make sense of it Or they're trying to identify where's the navigation? Where's the content? Where's the thing that I'm looking for right now and actually having Having these structured in a way that the user can quickly identify them Is something that will strengthen the ability for the user to navigate the interface? and this leads us to what? We what we call a visual hierarchy This is something that we see in the example in the bottom here Something that can really help prioritize what's going on on the screen For the user so on on the left side where it says a weak visual hierarchy We have an example of a web page where there's not really any titles There's no distinguishing in what is content what is navigation and this this can On the one hand look very boring And on the other hand it really makes it hard for the user to quickly distinguish where should he look? For the thing he's looking for right now and on the right hand side We have the strong visual hierarchy Where the the top bar is quickly marked out and this might have some navigation Maybe a search field and then the content comes comes along as she moves down the the UI so This this reading direction point is usually why people put The the navigation in the top of the screen on the left side because is where people will will look In the in the first place when they're trying to to see how they can navigate this interface And one example that we can we can do here as well I'll return to to our washing demo over here It's in the visual hierarchy point Because what we what we imagine when we did this this Washing machine demo Was that for most people using a washing machine? It really comes down to quickly identifying the washing program you're looking for and then starting the starting the The wash it's not a lot of nitty-gritty details that you want to go into maybe you do but Necessarily necessarily what you what you are looking for So we wanted the main part of the screen to be made up of the most important thing in the interface And this is of course the washing programs So we have a central part of the screen where we can choose the program that we're looking for and we can start The wash right away so in this way we have already prioritized the content of the UI for the user and it makes it easy to find Exactly what he needs at that time All right, I'll just sum up the rules and Recognizability tips and I'll get back to you son so you can you can ask your question First of all get inspired by smartphone UI design. There's a lot of great things out there There's a lot of things that people have spent hundreds and thousands of hours on on Designing and and thinking out so it's a great place to get inspired because this is this is the reference that people will Have when they're using your interface as well So it's a great place to to check out if you're looking for different or alternative solutions to what you're already already making Another thing to keep in mind is check if you're following the rules if you're breaking any conventions breaking any rules You really need to think about why you're doing it and if it is necessary Because each time you break a rule it will make the user stop and think What went wrong here or what do I need to be aware of if it's not important that the user does this then it can really start to get Frustrating that things are not as the user expects And then of course in the end take advantage of a strong visual hierarchy and actually guide the user Throughout your application. You really want and a flow throughout the Throughout the application and help the user solve the task that he's he's trying to to to accomplish And then I'll get the get back to you sir Great and thank you. I like Before we move on to the next topic we would like to launch one more poll and hear more about who's making the user experience design at your company I launch now and you can try and and Then put it in what who's making the ux at your company and then meanwhile and like maybe you can share more about how you're working together with With the trust effects developer then better developer on you How do you secure that? That the relationship is good and yeah, you're getting the best product Yeah, I actually I think it's a it's a great question It's it's a it's a it's a great question because it's a hard one to answer It really comes down to to to what the structure is of your company I'm quite lucky to to have access to to my developers Pretty much all day every day so What I I do when I I get an idea and if I want to check if something is is Something that can be realized on the final hardware because I'm not an expert on hardware I know a bit of touch gfx, but I'm not a developer either way I don't I don't code. I don't do c++. So I need people around me that are experts on these fields So what I usually do is actually go down and insanity check My my design with a with a developer before I put in too much time and effort Into the direction that I'm hitting because I want to make sure that this product is is something that of course can be Realized but also want the input from the developer because usually he sees some some different opportunities in different ways of doing this So that can actually help benefit the the final user experience Something I can incorporate into my my design. So that back and forth with the developer I think is is a very very healthy relationship and something that you should strive for At least at least as much as your company structure allows it Great, and thank you and we can see here. That's 75% of you is actually the software developer But doing the user experience part of the the GUI and I think it would be worth mentioning here that This is actually the beginning of a webinar series The topics today is a high level speaking and We will do more webinars in the future diving into specific topics and later on it in this webinar We'll also Try and get some input from from you about what you think is relevant to learn more about So we can plan more webinars and equip you more to make a yeah fantastic embedded product Yeah, that's yeah, please proceed like Yep, without further ado, I will So the next one Comes up is the consistency. This is of course something that Overlaps a bit with my with my previous point about the rules and and Recognizability because you want to be consistent with the choices that you have in the UI So if you're following any rules if you're following Conventions, I really hope you are at least following some conventions Then you need to be consistent with these choices Because generally speaking The the more the user has to learn about this interface The the less he or the further away he has from actually taking a full advantage of the product If it's hard to to to reach new features or it's it maybe it's hard to understand How to how to really use them chances are he won't use them at all And and in that way your shiny new feature actually won't have any value for this customer because he's not using it so in that way, it's it's really important to to be consistent and make the Minimize the learning that the the user has to to do to actually use this product But because of course something that You often can forget is that the user is not just navigating the the UI for for for fun It's not the goal for for him to just poke around in your UI It rarely will be at least He's actually using your UI to solve a task. Maybe it's operating a washing machine over here Maybe it's buying a ticket. Maybe it's Turning on a light. Maybe it's operating an industrial machine he's he's trying to to to solve a task in the real world and the the user interface is is A gateway to actually doing this and so it's very important to to make the the UI As invisible and as possible in this regard You don't want the user to to think too much and learn too much about how to navigate this It should be come just you come as natural as possible And this is of course something that can can be done by actually using some some some conscious Tricks and because there's a lot of clues in the visual design that can actually guide the user One that's brought up very often is is the color red Color red usually means that you're canceling something you're going back you're closing something so by integrating the color red Into your design you can very quickly and of course integrating it in the right places You can very quickly guide the user to to places where he Where he can see that he he's going back so in that way you incorporate these very natural subconscious things into the UI and that that makes it a bit easier for the user to to to come by To sum up some of these into some easy to read tips is of course that you need to design for the user's expectations if the user is always Surprised by what is happening in the UI because things are not consistent He will stop and think each time and it will actually interrupt the task that he's trying to solve It'll interrupt the flow. He has of buying that ticket or setting or washing those clothes or operating that machine and This actually makes a very bad user experience quite fast So it's important to keep these expectations in mind when you're designing the flow throughout the the application Another thing of course you want to be consistent in is the graphical design You need to be consistent With the colors the shapes the icons the typography that you use because this is again something that the user will try to get familiar with and as soon as you as you break this balance the User will stop and think Why did you do that? Is there a reason for this and should I be aware of something and if there's not this will get quite frustrating very very fast Another thing you need to be consistent is of course the the general navigation The menu structure the position of buttons should be consistent again So the user can can find a natural way around the UI if you need to stop and identify How do I get out of this screen or how do I continue throughout this screen each single time? It can become a very very tedious product or very tedious task to to do Of course the end you need pretty much to make the UI predictable And you can actually compare this to driving driving down a road Because driving down a road with a good visibility. No sharp turns It's actually a bit more in enjoyable Then driving down something that has very narrow roads. You never know what is coming up Because this is really interrupting your flow on on the road You really want to see what is ahead and the user has the same way here. He wants to see the path To to actually solving the task he has at hand That brings us to the last point for for today or at least for me And this is a responsiveness and animation in embedded GUI design One thing I need to mention here can be a bit philosophical But on on the bottom humans are very communicative creatures We're always looking for for feedback for for the actions that we do in the world One example is that if I'm talking to Sharon, I I'll become very frustrated frustrated quickly If he does not recognize that he's listening to me If it doesn't keep eye contact if he's doing something else and run not really Acknowledging the things that I'm saying to him. I'll be frustrated a lot earlier than I actually Think I will and it's the exact same way with with user interfaces actually We expect things to to give us some feedback until That the action you just did it actually matters and it actually Got registered by me Because when when this fails and you've probably tried it before Clicking around on your on your desktop on your mobile phone as soon as As you don't get feedback as soon as that nothing happens when you tap the screen or touch the mouse You think that something broke The maybe the the application has frozen Maybe the product is dodgy. So you really need to come to constantly deliver this feedback Because it's actually a very vital to to make a UI feel responsive When you're providing this this user experience and actually providing a good one To do this in a very let's say in a low low level way is actually Providing press states for all your buttons. Maybe all your sliders as well Make sure that when the user touches a button he can See a slight movement With there with the images that there's another image for the press state so you can identify that ah I pressed this button and the interface knows I did That'll make him happy for a while. So that's that's a good thing to incorporate Another thing that we're covering in this point is animation Animation, of course is something we see all around different mobile apps and you can't really Open one of the big apps today without everything being riddled with animation small fades small bubbles coming coming up and Dimming the screen fading out again. Everything is moving all the time and it can be very You can be very tempted to to incorporate this into into your embedded GUI design right away as well As I mentioned earlier one thing that we need to consider when Doing embedded products that have a quite a long lifetime Is that animation on on smartphones can get updated? Pretty much every week every month and you'll see this change in in the apps that you use today and What we see today is not the same what we will see in one year, but on embedded In embedded products and these can have a lifetime We usually see five to ten years. I've seen 15 years as well This is actually a very very long time and it makes it quite hard to actually do something that you know Will last throughout the ages One that one reference I brought for you today is the most sold mobile phone of 2005 so this is 13 years ago. We haven't even reached the the 15 years lifetime yet This is the the Nokia 1110 Maybe some of you remember it. Maybe some of you owned it but this is a quite far away from the the Expectations to mobile phones that we have today and and this is just to give you a little visual idea on how long Five ten or fifteen years can actually be So what we usually do when we add animations to our embedded you guys is actually considering Is this just a trendy animation? Is this is this something that? Has has been around for a while or is it just the newest a craziest animation that we need to to incorporate because Just because or is it because we actually trying to to incorporate some some life into into the the the application and actually Having small subtle animations that won't really take too much attention from the user But it's all these small micro interactions all these small micro animations that can really gather Up and and deliver a great user experience So one one advice I would have for you It's really look out for for these long animations that we see once in a while animations that last Half and whole seconds Those can really add up and start to get annoying especially in five years time When we have a completely different expectation to waiting times So it's really important to to not keep the user waiting for too long when you when you add animations Make them be snappy and make them be a bit subtle. So so the user won't grow frustrated with them And just to sum up this this point is Provide the feedback for your users use press state and buttons Messages if something changed that the user needs to be aware of and constantly make sure that user understands that the user the the UI is is Talking back to the user Making sure that everything is okay, and his actions are actually being registered right now You know, of course need to to avoid this this use of frustration And this is by actually just letting the user know that the UI interactions have an effect and Last but not least animations are quite important Especially today when the the expectations from mobile phones is that animations are everywhere, but really Consider that you're not only Incorporating trends because they are trendy right now But try to to to think of the whole product lifetime and corporate something that won't be a Completely annoying in in a year or two or something that won't really won't really last the the whole lifetime without becoming At least looking very very obsolete. I Think that was it for me at least for now Of course, if you have have more questions, please throw throw them in and we'll have a Q a in in a few minutes Sarn told me he just wanted to to say a few words. So I'll just give the word to you, Sarn Thank you. I'm like Please change the slide. Oh, you have thank you while talking about the touch the effects designer We'll just launch a poll Quickly and just to see if you are musing a market or user research to secure your product success Please put in a vote and let's see what the outcome will be And and after this we will talk a bit about the touch defect designer And how we are using it and how also Henrik is using this especially in user tests And how fast and easily can be done. I can see we already had a 70 80% Vote ratio, so let's close it and I'll share the result with you And I can see a lot of you are not doing a user and market research So maybe this should could be a topic that we should discover later on If it should be please let us know and we'll do a poll later on also To get your inputs on what could be relevant Yes back to the designer just to give you a quick idea about the designer the touch defect designer with with this you can easily and fast create a simple UI and You can simply choose a board a pre-supported board by just the effects and build a UI It doesn't have to be the most fancy one with the greatest graphics, but you can In a few minutes already get started And maybe Henrik you can explain more about how you're using the designer to do user tests and iteration also Yes, I think mentioned a bit earlier when in the process that actually start to to use the touch the effect designer And this is Usually when the when the just the UI designer starts delivering some assets to me some images That has this feel of a final application What touch the effects designer really allows me to do is quickly flash it on to some hardware Not necessarily the the end hardware that I'll use for the product But just the the same size of screen is often enough And when I have this on my hardware It's pretty much only only the fantasy that that sets the limits for for what we can do You can go out and talk to users and actually ask them about how they experience this if some of you read our our case on on Customer and Niko that we engaged during embedded world this year and Niko invited us Or we invited Niko to to partner up in a in a workshop During a better world in three days and actually build a prototype One of the things that we talked about Niko is that we wanted on something on day two So when we were halfway through the the process We wanted something that we can put on to some hardware and actually to go out and ask people How do you experience this and how can we make it even better? And this is something that the touch the effects designer actually allowed us to to do is very quickly build up a rough a Rough interface on on the UI flashing on some hardware go out and test it Just immediately come back and do the changes and then you could go out again and ask some more and the the amount of iterations Can actually can actually deliver Quite a lot of feedback and really give give you a good feel of what direction you should take your product Great, and thank you. I like could you go to the next slide, please? To give you something from this webinar, which you can use Henrik and Kim has made a PDF file With yeah, saying some of that you are in US wisdom and please check this out with made a handout Which you can see beneath? the question pane and You can download this and if you can't see it or didn't receive it, please let me know. We will also share this after the webinar Great, please the next slide Henrik And the touch the effect designer is also available Online in a free evaluation version. Please visit such effects.com. You can also see the link in the chat for this download and getting more support Knowledge space and so on you can visit our health center. We have basic Knowledge space articles videos examples and so on you can of course write us both me and Henrik And we will try and help you move on And also upcoming and previous webinars can also be found on our website as I mentioned We will do more of these webinars later on, but we will also do More on the embedded side at the developer side on hardware integration, for example, and this Will be done next week. So please sign up if this is relevant for you We will also Do another poll here just to see what you think could be a relevant topic to discover in this line of webinar Regarding the UI and UX So just launch a poll here and please give your input here If this doesn't cover what you think could be relevant Please use the chat or the questions just to give us a quick answer on what you think is relevant this is good input for us and Useful for for future roadmap planning for webinars. So please let us know so we Yeah, and they are coming I can see We have a lot of from idea to finish product and the responsiveness and animations. I just Close it now and you can also see the results of those Yeah, this is also the results most likely from from our earlier webinar today So we will take this into consideration and yeah, please stay tuned in on our on our website great Next slide please Henry We are online after the women also it will end in a few minutes Try to answer all your questions your remaining questions either in voice or in writing and You can also write us an email if you have any questions Next Yeah, and thank you for for attending this webinar being active More as to come in the future and then we hope to contribute contribute to you in your making of a success successful product and We will wish you a great day or evening depending on where you are and hope to see you again next time Yeah, maybe you have a last Thank you say hello. Yeah, I do. Thank you so much for tuning in guys I hope you got something for it if you have a question or anything that you any Interest point that you thought we should talk a bit more about just Quickly leave a comment or a question below and we'll talk a bit more online With you before we all hit off, but have a great evening guys Yeah, and you can see an email address here trusty effects Info at draupnographics.com Please write us and let us know what you think and if you have any questions, feel free to fire away Yeah, I buy from here