MHIT Lecture – 11 Apr 2016

recording is going cool right so um how does this work oh yeah yo yo a command line so who is ever used this before any kind of commercial I doesn’t have to be this one but any kind of command line tool yes thus was come on tania’s so who has ever used it kind of terminal thing one two three baby okay so oh just okay because there’s so few people who knows this I’m just gonna fire it up so this is a come on Lyle come on too old and what you can do is you can just um look at you know we can use these all sort of things right and this was of course something that was way before you know graphic user interface me this is graphical that’s drawn on the screen you know there used to be interfaces that were actually not on screens so that’s right yet for example punch cards right so you have to punish a card you know put it to the computer and would give you back a punched card and also this can be it can be quite a hazard to do things like that right so what’s the advantage of this true but you can do things with all sort of ways I mean like there are different ways I’m doing the same thing so once the advantage of doing it this way okay those people who are used it what do you think is the advantage of this remember other work he was a calm thank you that’s why oh these are all very good and valid points so to summarize the great thing here what you said you can get two things quick you know any kind of command you just type it you don’t have to go through any menus you don’t have to like oh here go there open the software knows it’s there that know everything is right there you can do it right away so it can be very very quick um disadvantage of course is because it doesn’t give you any hint you have to know you need to know that LS is the command for creating a listing all right you just have to know these things so the knowledge has to be in your mind but once you know it you know applying it it’s wonderful and fast um your moves mentioned where our time self reliability and you know so this interface is just text right so it’s

difficult to get wrong you know so in that sense oh yes it’s extremely reliable it is not limited to just making file manipulations you know there’s you can you know read and write emails with this you can actually arm or did recently things started with its own text editors you can actually edit text right away in it so there’s a text editor that runs inside there right so you can do all sort of things very quickly and this kind of interface you can also very easily transport over the internet so they’re essentially what SSL is doing you can actually remotely log into a computer and then you have this window of your computer right in front of you and you can do whatever you want with that computer over the Internet all right so there are some distinct advantages to this but of course the biggest disadvantage is to steering you have to know right and therefore it’s always trade-off between the main it’s all about the shape of the learning curve right so yes you have to invest quite a bit in the beginning to get up to speed but once you know it you’re much faster than anything else right very my ride and of course this thing then is still not gone that’s interesting thing there stole the quiet of software that then goes up to this level where you have um and if I just put on top off in our shell you know which is graphical but fundamentally it’s still text there still is there’s still some applications who use this for some reason for example it runs on very old computers very easily you know the thing is easier there’s a lot of advantages to it and what I’ve course see here now is that you first got a couple of cues now right so type n for new message all right so it puts them the memory again back on the screen of what can I do is shown on the screen and use type on your habit but the advantage of course like people are on their keyboard like the one thing that drives me crazy is when you have a form and the person takes the mouse goes to field clicks it and then type something moves the mouse goes to the next we will click it as crazy takes forever so few people know what we need to tap it automatically jumps to the next field right so the speed is a major issue for somebody if you have to do a task with a computer a dative an emulation all day you remember things and you get fast and then command line or text based things it’s all about speed then you know so remember this one this is the birth of graphical user interface so the company called xerox which does copy us these days but they also used to do computers and they are credited for creating the first graphical user interface the first desktop metaphor and interestingly my interest from historical point of view they developed it and they’re also located in Silicon Valley and Steve Jobs and so the three founders of Apple essentially visited Xerox and they had this explained to them you know how it all works and what all does and then ever thought oh it’s a good idea let’s do that so essentially design of the first graphic user interface for the Mac comes from here interestingly and this is all again a sad part of the story is if Z ropes would have been smart they would have done this with their computers have sold it and you know they would have done something with it but they decided not to they just didn’t do it and this is an example of like okay some researchers put something together has a lot of potential management doesn’t see it and somebody else picks it up and runs with it you know sort the good outcome is that somebody did actually run with this idea right I mean

if quite often their projects where you know it just dies and nobody ever knows about it right but everything you do windows you know sliding you know foreground background overlapping windows folder structure you know that you actually have you know the hierarchy of files that you map it like that looks like actual photos you know that you have so these things I mean this is again you might not remember this but particularly in the US they had this kind of fold of system you know and this just looks like it you know so for us this has this is actually has become more like a full so I know this from the computer but actually was based on a metaphor based on actual files paper cardboard all those kind of things yep so and of course since then we know graphic user interface has taken off and has taken completely over pretty much and then the things that you mentioned terms of locating it’s best for everybody no yes there’s something to be said about it because you don’t have to remember that much right but you know the more repetitive the task the more and you actually want to move away from using the mouse is it’s not not necessarily a good tool so keyboard shortcuts become a big issue right go there quickly or again dubbo in the direction of and generative design automation now can you automate these steps you know can I write a script that goes takes all the files go screws with extracts there’s put it there you know automation kicks in right so I gets much more interesting and of course the other interesting things like this was done in the 70s right and not much has changed that’s the interesting thing like the fundamental ideas in fundamental principles remain untouched it still does it so rough there’s incremental improvements you know you know we’re like small steps that have been taken care this is a bit quicker you know but fundamentally you know the main things hasn’t changed and the mouse and the keyboard you know it’s still very very powerful tool for inputting for communicating with the computer and all the things that we do here with VR and they are robots it’s all nice and good but you know it doesn’t necessarily make it any better you know so there’s always a trade-off I mean it’s easy to make things that are different right yep I can come up with a new way of doing things that is the relatively easy but the tricky part is making it better and for that part you need to have evaluation mine so you know a lot of computer scientists you know come up with like oh I’ve got a new way of doing this and here it is and you go like okay great and she’s any better than mouse and keyboard and then very often you realize that now it isn’t so even further down the road it’s very very difficult to be paper and pen paper and pen are really really powerful and if you want to do anything it was better than the paper and a pen you know that’s a real challenge and of course the other thing that’s true is that you know commercially it’s still the web all right yes the big hey day is over you know and love technological innovations are done that’s what we see is this big move from away from for example classical software that you install on a computer and it’s going over to like okay bigs browser-based all right um so that’s that’s a move that you see so that sense graphical user interfaces potentially web-based are the bread and butter of today of course if you want to get you know stinking rich what you do is like you start all company you know you do something amazing for two to three years and then you get bought up by a big company right and it’s just one of them because this was one of the more insane ones for instagrams what I facebook friend of what Bill you know I don’t know what they paid for it crazy right I mean this is it’s a good way of getting rich that say but then again Instagram is also know that novel you know it’s like there are the servers dip it before slightly differently so you know the technical innovations are not necessary there so I guess they’re the biggest difference from it’s a any kind of social media to what we had before is

just limiting access so instead of having a block that everybody can be it on the world you know you constrain it my cert number and then you connect and you have social networks essentially that essentially this innovation in taking no modeling how we are connected to the people we know and to what degree and being able to regulate that that’s against the point so when you do graphic these interfaces I suppose that you know follow some of my colleagues will where I talk to you about you know the processes of how to do it in your making it or a little project and there’s all kind of things you can do and one of the other guess one of the important things to know is that you know it doesn’t make sense really to stop making it when you go to client is it like we I want to have a web page you know supposed to listen this it’s really not a good idea to start actually making it in terms of okay here’s the graph you guess the logo is the button is you know you design everything out all right it doesn’t make sense because you want to go through several stages of prototyping because then you know the the more you are able to find problems and issues the Earl I you for you find them the cheaper it is to fix it all right if you have if you let’s say what’s canales because then I would be like okay company comes to you and say it’s like I got one of a web page they said great I do it and then you make a web page completely beginning to end you save it or here’s your web page and the client says like yeah but that’s not what I want or this is not how it’s supposed to work all right then you’ve wasted an enormous amount of effort right and very often it is ah well one of the biggest problem I kind of see very often and dealing with clients is that they they don’t know what they want they only can tell you what they want once they see it so once they see and I can click oh this is when i go there and this things happen oh you know I get it right once they see it and once I can try it they are able to for me like what I like and don’t like but if you ask them up front what should the menu structure be like you know but it wouldn’t be able to tell you anything because they just don’t know so what is necessary is to have a tool that allows you to prototype things so that you can know show this to a client he can try it out and experience it provide you with feedback and then you know you can continue and this kind of prototyping again very often it’s not about pretty graphics or you think this is just very much about or how does it actually work and there are of course plenty of tools around that allow you to do this and axor is just one of them you know and I guess when I did ask em and look around kind of tools I list again the prototyping tools for guys is just it’s very much fashion in a way as well you know a lot of things suddenly there’s something is fashionable when you try to you or use it and then later on you know a force out of fashion something else come in so this is just one tool right and it’s a reasonably good one so essentially what exira allows you to do is to arm create prototypes of graphical user interfaces and you can very easily you know move around quick together your interface and and then you can use that to communicate with the client there’s a couple of advantages that I’ve found for this one one is that um it is still based on the metaphor of a page I mean these days then the metaphor for web page actually is disappearing you know very often you have elements within a miniature the web becomes more like what software used to be like you can click something here and then I meant over here changes like you know web used to be like okay if I click here I go to another page and then I go to another page right so the metaphor for offer page is disappearing in the web these days but for understanding to structuring our thinking pages are actually are still quite a good metaphor in quite quite useful and so it has still maintains the page may tougher the other thing is that is nice it has a huge library of all kind of existing buttons and menus and you can never just drag and drop it in there so you do not waste any time I’m arm designing pretty buttons no because it’s not at the point you know that will come later another important issue a on feature of it it has masters masters slice of masters in terms of like in the same way you would have a PowerPoint or keynote you have a master slack which you can edit things

you know this has soul as well it does allow you to give you the full you know richness of interaction so you can have all the mouse gestures like one button down on or on rollover you can have all this kind of highly interactive stuff which is still possible but it’s still based on the page whatever and which is kind of nice and easy still to think about interaction in the way to other things that I find quite interesting about is it does allow you to do quite a bit of documentation which is something which is very often elected and this is something that will is something that it’s probably gonna bite you at some point that’s why i’m going to i get into it a little bit so um its innocence because the clients struggling was telling you exactly what they want and they can only tell you once you show it to them it’s very difficult to document decisions okay no so we are you have a meeting with a client and you just show them that and you discuss things and you in the communication the verbal communication you agree introduced it takes in a certain way right the tricky part is that a human communication is very ambiguous all right you might well be in a situation where you you think you have agreed something on it but what you think you agreed on what the other person is saying it hit regan are very different all right and when you talk about something like a medium like interaction which is time tastes all right it’s very hard and to really document and decide okay this is how it’s going to be so exert does allow you to do functional specifications the point is you can actually output a document that formally describes how everything is going to work you can give it to the client and say this is how it’s going to be and they can then sign off on this and then you are you know on the safe side because then you can say okay this what we agreed on how go to the paper it’s been signed and it later on the client comes Pegasus like oh no that’s not what we agreed upon that’s not how it’s supposed to be you can go back and say look here here we agreed on it all right show you that essentially establish something like a ground truth and of course that only ever matters when things go wrong I mean if your client is happy with what you do you know and you mix of things and their voice happy is no problem right this is then really only useful more particularly useful when things go wrong like what if you invest it already like you know a hundred hours into this you know and you view this is what what you prove what your initial budget essentially allowed you for but then it comes for that the kind of wonder they wanted in different way and you see like yeah but you know we already doll of this and you know we are use of all of our time and that is essentially to fight about money right and then that’s when things turn nasty and this is where this will help you because you can go back and document the decisions that you’ve made and of course a client that changes his mind is always great you should never you know you don’t ever consider this to be a problem is always opportunity to make more money right so if you have this document if you agree to come this health system is going to work and the client goes like yeah but wait a minute we forgot this in this and when you clear this news in this way hey so great sure of course we will do it this is what’s going to cost you right so a client changes his mind is great because it means more work which means you get paid more so it’s so innocent it’s something very positive you know and the only thing it need to be sure is that you know the client does not have the opportunity to essentially go and say like yeah but you know we agreed on this should be part of the old but it should have been like this from the start all right that discuss you don’t want to have right that’s again why it’s important to document things it seems a pay the

bottom almost like you know it does happen and again and part of the problem is that talking about interactive system is very difficult because it is time based and it is changed I mean like if you have it say you know something static like we did like a poster you know it’s very it’s more easy to talk about you can say okay this headline should be a little bit lower should be a little bigger you know but it’s really easier to talk about it all right and talking about interactivity is really hard like how does this work how does the button work and so the only thing you can go back down to something like as formal as this where it really specifies every click it’s real specified if you click here it go there this will be principal it really shows to how everything works and it’s then very long you know it because the long document it will come out of it you know and it seems almost like a total overkill but yeah it is today the client so that comes down to the question about who is a very often the user and the person is giving you the money are not the same all right and out well you’re supposed to being the advocate for the actual user but the person who gives you the money you know it’s very important to and sometimes these came conflict right and so that is indeed an issue that’s why I and of course in the way you work around that one is that you do usability testing all right so you make prototype with exer and you say okay and now we’re going to test it with real users and then you find certain problems and when you’ve a client like you said it’s like no no has to be completely different things like this or let’s say you develop something the client said like this how it should be you test it but the actual users want something very different you know it’s matter about of course convincing them and your own personal persuasiveness in terms of that look I’m an expert on interaction and this is not how it should be it should be different is convincing to some degree you know it’s better than her own our complete naive person saying this but it’s still not as powerful when you actually have a usability test you know and you can show look you know nine out of ten people were not able to do this you know you can actually back it up with with some real observations some empirical data so that’s really good what another important thing is i think is quite interesting this software is um teamwork because something that you just noticed like when you have developers involve business analyst and who knows who was involved it’s unless it’s a very small project where it’s like okay there’s like a five person company who wants to have a web page and you’re a designer and you do everything and okay then then you don’t need much teamwork but as soon as they suffer or the end of poem if the system becomes of a certain size you know there will be different people involved and you no longer work by yourself and that’s where a collaboration and working with other people become so important even at the level of doing prototypes because with large systems not a single person can do it anymore now sue actually you split up the system into you know it on how many sub components and then you would say okay I make a prototype for this part of the system and you do it for that part of the system and of course you consistency in the constant issue and you do the same thing but anyway its

teamwork you have to work together and exert house is built in then it allows you to work in a team to check in check out files and define hook into what so photos also kind of neat so what I would like you to do for next week is to create a prototype of the software and we don’t so the software itself you know doesn’t really you know what software it is so I just picked now one that I know of and that is very simple so we should not have something it’s too complex because there was take too much time to do all right so me and a friend so we developed so it’s slightly basic little bit more fancy anyway so this app is available for free so you can just download it and run it and what it does essentially it’s a very data-driven so where where you can just select minifigures lego minifigures so if you let’s say go to 2014 and you’ve got the 658 mini figures that were you know produced in this year and you can pick one get some metadata it’s connected and it’s a little bit of functionality around it but it’s a very data-driven application and it is pretty simple it’s not that fancy in terms of functionality now so what I would like you to do is make it better not David and better and you do not need to do this you know it’s supposed to be a prototype so it doesn’t have to be you know or what pretty or we knows completely you know every pixel perfect design that’s not the point points that you learn how to prototype in a team that you’re able to create a functional specification that you can then use essentially to offer make me a contract offer me a contract you know you’re going to redesign this and tell me how much it’s going to cost this is it right and of course there are some specific challenges with with this kind of well this kind of platform has its own specification problems so you’ve got iOS you’ve got android two different software platforms but then you’ve got two other issues one is that the screen size is tremendously variable right you got tablets you’ve got tiny little phones you know and everything in between so the screen size is a big issue which needs to be considered um but also the problem of portrait whereas as landscape how are you gonna deal with that right so the proportion of the screen you know it’s also an issue and uh you have this for example is found little stuff for for mac OS called an iBook author and what allows you to do is it allows you to create ebooks and and what you see here is the same book just once displayed as a portrait and once district as a landscape so everything changes depending on how you look at it so the way you hold your tablet becomes actually an input method okay now I want to actually rate what now I want to do this and that and you just change that why are you know holding it the other way around so you can do all sorts of things with this or let’s say there there are challenges around this and designing for our specific type of devices I mean it of course the same thing still holds true for any kind of desktop computer or laptop computer screen size also varies you know and recently we have this interesting move towards you know flexible design in terms of liquid design so the idea essentially is that your interface gets information about it okay I’m a browser on have got that much

of width and this month height and and depending on that the design changes so the starting problem is now you used up all the red parts anyway yeah it’s okay um I was I um lost my train of thought oh um oh yeah and I remember so there are two ton of strategies how to deal with it on one is that you actually have it say okay they are let’s say you know 150 different screen sizes well we’re gonna boil it down to let’s say we’d make one XL version 1 and version 1 s version right and you have three designs for these platforms right and you could do that I in turn you’ve got three different versions that you have to maintain so if you make a change on one of them you have to go to all the other ones as well and change them as well another way it’s like again as I just try to explain its like the software or your interface actually reads in in all the specifications of its display unit is attached is non touch is it you know which proportion you know its landscape or care of the size all kind of things and then it changes itself immediately and adapts itself to it and the advantage of that is that instead of having to maintain three different versions you only have to maintain one version but of course the challenge is like you have to have this smartness built into your user interface that it knows ok if I’m in a portrait mode then the menu structure in our goals vertically like this but when I’m in when I’m in landscape then I move this to their went so you have to have the logic behind it has to be in the graphical user interface which has to be a little bit smarter but you only have to maintain one version so it’s all pros and cons anyway so I would like you to do since we are we can form two teams I would like you to form two teams oh and work in fitting to create a new prototype of this design really one two three four I’m not sure if you participating is no good very good so then we have one team 31 teeth for arm you know I suppose you’re smart enough to get yourself the software is available and hit a file server the serial numbers required are available on the file server um there’s a very good chance that in our since they know they are updating the software frequently that there’s a newer version available if so right download it put it on the file server for the next person and and it started up no I just took screenshots from it so that’s why oh yeah well then see I have the iOS landscape is in comparison still relatively easy if you go to the end right platform the amount of variety in sizes and proportions is just outrageous there’s so many different devices and then makes it so hard to design for it now if you limit it to iOS then you essentially you know it becomes a little bit easier it’s a matter of personal preference to some degree but I guess these days you cannot afford to be bound to only one platform if you want to earn money you have to go to iOS and if you want to have millions of installations you ought to Android a maker feel free oh it changes all the time you know I saw that’s why I gave up updating the slides because this kind of pointless you know when how I do it everything will have changed again so pointless so the important thing is how do you design something that can be a little bit future-proof so when the next bigger faster or different kind of thing comes around that you don’t have to change too much unofficial Lego minifigure app I

think Oh catalogue the unofficial Lego minifigure catalog yes it does yes yes yeah so I guess it kind of breaks down a little bit in design psychology and program so you want to have one of each oh I leave it to you I think your adult enough to do this