Long (surname)

Human Computer Interaction Lecture 09 in Urdu| Hindi I Vcomsat

• Report rights infringement
• published: 23 May 2017
• views: 17

Lecture Interaction Design Basics– Part II Today’s Outline Basic principles Grouping, structure, order Alignment Use of white space Introduction In previous sessions we have seen to make system interactive but not about how we put them together. A single screen image often has to present information clearly and also act as the locus for interacting with the system. This is a complex area, involving some of the psychological understanding of interactivity as well as aspects of graphical design. Basic principles of design ask what is the user doing? think what information, comparisons, order design form follows function Tools for layout We have a number of visual tools available to help us suggest to the user appropriate ways to read and interact with a screen or device. Available tools grouping of items order of items decoration - fonts, boxes etc. alignment of items white space between items Grouping and structure If things logically belong together, then we should normally physically group them together. This may involve multiple levels of structure. For example, in the Figure in next slide we can see a potential design for an ordering screen. Notice how the details for billing and delivery are grouped together spatially; also note how they are separated from the list of items actually ordered by a line as well as spatially. Grouping and structure This reflects the following logical structure: logically together  physically together Order of groups and items think! - what is natural order should match screen order! use boxes, space etc. set up tabbing right! instructions beware the cake recipie syndrome!… mix milk and flour, add the fruit after beating them Decoration We can see how the design uses boxes and a separating line to make the grouping clear. Other decorative features like font style, and text or background colors can be used to emphasize groupings. Example – A microwave control panel Decoration use boxes to group logical items use fonts for emphasis, headings but not too many!! Alignment - text you read from left to right (English and European)  align left hand side Alignment - names Usually scanning for surnames  make it easy! Alignment - numbers think purpose! which is biggest? Alignment - numbers visually: long number = big number align decimal points or right align integers Multiple columns scanning across gaps hard: (often hard to avoid with large data base fields) Multiple columns - 2 use leaders Multiple columns - 3 or greying (vertical too) Multiple columns - 4 or even (with care!) ‘bad’ alignment White space - the counter White Space In typography the space between the letters is called the counter. In painting this is also important and artists may focus as much on the space between the foreground elements such as figures and buildings as on the elements themselves. White space - the counter White Space Often the shape of the counter is the most important part of the composition of a painting and in calligraphy and typography the balance of a word is determined by giving an even weight to the counters. If one ignores the ‘content’ of a screen and instead concentrates on the counter – the space between the elements – one can get an overall feel for the layout. White Space If elements that are supposed to be related look separate when you focus on the counter, then something is wrong. Screwing up your eyes so that the screen becomes slightly blurred is another good technique for taking your attention away from the content and looking instead at the broad structure. Space to separate space to structure Space to highlight White Space Animation We covered so far: Physical controls grouping of items defrost settings type of food time to cook Physical controls grouping of items order of items Physical controls grouping of items order of items decoration Physical controls grouping of items order of items decoration alignment centered text in buttons easy to scan ? physical controls grouping of items order of items decoration alignment white space (gaps to aid grouping) User action and control entering information knowing what to do affordances Entering Information Some of the most complicated and difficult screen layouts are found in forms-based interfaces and dialog boxes is to design for entering information. In each case the screen consists not only of information presented to the user, but also of places for the user to enter information or select options. Entering information forms, dialogue boxes presentation + data input similar layout issues alignment - N.B. different label lengths logical layout use task analysis groupings natural order for entering information top-bottom, left-right (depending on culture) set tab order for keyboard entry Knowing what to do https://www.youtube.com/channel/UCgrpR_m474T_CaHrh9tp7WA Please Subscribe and Share