ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

GUI

?
?
Faculty of Science , portsaid Univeristy
Faculty of Science , portsaid Univeristy

GUI and web page design share similarities as interactive experiences presented through screens, but have key differences. For GUI, devices and screen layout are well-defined, users complete tasks within applications, and navigation is standardized. For web, a wide range of devices exist, screen layout depends on hardware/software, users browse information across sites with limited familiarity, and navigation faces few standards. Printed and web pages also differ in aspects like fixed vs variable size, immediate vs slow rendering, and sequential vs independent navigation, though basic printed guidelines can apply to web design.

1 of 8
Downloaded 19 times
GUI versus Web Page Design : ¡ñ GUI and Web page design are similar. ¡ð they are software designs used by people . ¡ð they are interactive, experiences presented through screen . ¡ð they are composed of similar components. ¡ñ There are difference between GUI and Web page design , parts of them are based on Berry(200) and Nielsen(1997a) . 1. Devices : GUI design : ¡ð The characteristices of interface devices (monitors and modem) are well defined.design variations tend to be restricted ¡ð The layout of screen will look exactly as specified . Web page design : ¡ð an assumptions about the user interface devices can be made , user devices range from handheld mechanisms to high end workstations (in GUI design, the difference in screen area between laptop and high end workstation is factor of 6 in web page design, the difference of connection speed bandwidth is factor of 1,000), WYSIWYG no longer exist in web page design ¡ð The layout of screen will effected by hardware and software, sothat the deaigner must make full control for the interface with users and their hardware and software . 2. User focus : GUI design : ¡ð well defined applications ,data, transactions and processes . ¡ð attention must be addressed for user to complete tasks Web design : ¡ð Web is primarily in information, application and navigation, is characterized as browser and visual scanning of information to find what information is needed 3. Data/ information : GUI design : ¡ð data is created and used by known and trusted source, the properities of data is known, information is organized in understandable fashion, there is notion of shared data and privacy data . web page design : ¡ð Web is full of unknown conten /informationt placed by unknown other to users, these information can not be trusted . 4. User tasks : GUI design : ¡ð users install, configure, personalize, start, use and upgrade programs, they open, use and 1
close applications. ¡ð familiarity with applications achieved. Web design : ¡ð users link to sites, browse or read pages, register for services and download, save content. ¡ð Movement between web pages and sites are very rapid. ¡ð familiarity with web pages , sites not established . 5. User conceptual space : GUI design : ¡ð controlled and constrained by the program and application Web design : ¡ð infinite and unorganized 6. Presentation elements : GUI design : ¡ð The main kinds of GUI presentation elements are windows, menus, controls, toolbars, messages and data . ¡ð dynamically appearing and disappearing depending on the current interaction, standardized as result of toolkits and style guides used . ¡ð presented on screen as specified by designer Web design : ¡ð Web browser and Web pages . ¡ð Web browsers are GUI applications with GUI presentation elements. ¡ð Web page are combination of text , images, audio, video and animation . ¡ð Web pages are complex and cluttered asThe designer focused on new and pretty ,little attention given to usability , sothat there are interface style guides and duidelines to aid the design process . ¡ð not presented on screen as specified by designer, as presentation deponds on browser and monitor . 7. Navigation : supplement to tasks functions and actions . GUI design : ¡ð User navigate through menus, lists, trees, dialogs and wizard . ¡ð standardized by toolkits and style guides . ¡ð GUI provide a strong sense of navigation as ¡°to another window¡± command indicates as ¡° Open..¡± command buttons such as ¡°Ok¡± and ¡°Cancel¡± that direct to another window and wizard. . Other GUI design does not provide a strong sense of navigation as pressing an button, no result visible happening . Web design : ¡ð User navigate through links, bookmarks and typed URLs ¡ð Web provide significant and highly visible concept with few constraints . ¡ð As the immense size of web, user may lose ¡°sense of place¡± . ¡ð Web navigation has few standards for button and links . 2
¡ð Navigation is part of page design that ensure lack of consistency and confuses users 8. Context : GUI design : ¡ð enable user to maintain better sense of context . ¡ð path are resticted, and multiple overlapping windows are presented, enable users to remmember how what they are doing fits into task . Web design : ¡ð Web pages are single entities with unlimited navigation paths . ¡ð they do not bring up separate dialog boxes to ask questions or request information or present mesages . ¡ð contextual clues become limited or hard to find . 9. Interaction : GUI design : ¡ð consists of activites such as clicking menu choices, button, choices from list,cutting, coping, pasting data in context in window and program . Web design : ¡ð is single click that cause changes in context as moving to another site, these changes may not be noticed when occur . ¡ð Web provide parallel mechanism that may function differently depending on context . 10. Response time : GUI design : ¡ð fairly stable , if not nearly instantaneous . Web design : ¡ð variable ,slow (long response times of system loads, page content may upset and frustrate users) . 11.Visual style : GUI design : ¡ð prescribed and constained by toolkits . ¡ð Visual creativity in screen design is allowed but is diffcult to do. (while some user options and style choices, little opportunity exists for screen personakization) . Web design : ¡ð artistic, individual, and unrestricted presentation style . ¡ð freedom ,but differ browser and dispkay capabilities, screen size, bandwidth restrict this freedom ¡ð Limited personalization of system is available for user at browser or site . 12. System capability : GUI design : ¡ð limited only in proportional to capabilities of hardware in speed, memory and configuration, 3
and sophistication of software . Web design : ¡ð more limited by hardware, browser and software, and by page owner to provide functions and elements, user willingness to allow features because of response time, security and privacy concerns. 13. Task efficiency : GUI design : ¡ð used to perform spcific tasks , the efficiency of performing task is limited by amount of programming undertaken to support it . Web design : ¡ð limited by browser and network capabilities . ¡ð Actual user audience is not well understand because many web sites are intended for everyone . 14. Consistency : GUI design : ¡ð majar objective in development efforts, while they are far from perfect, an attempt to male them consistent ¡ð Organizations put interface and screen design standards and toolkits to aid in standardization process, and allow certain degree of universal consistency in GUI products . Web design : ¡ð want to establish their result in web sites in little consistency across sites. ¡ð Standards established within a site, too many developer ignore guidelines for identical components, especially controls existing in GUI components used in web pages 15. User assistance : (guidance) GUI design : ¡ð important part in GUI design . ¡ð User access this assistance through standard mechanisms as F1 key, Help menu, message, status area, online and offline Documentation Web design : ¡ð does not provide help systems (assistance) ¡ð little available help built in web design . ¡ð customer service support, if provided to product or service offered . ¡ð GUI browser may provide GUI assistance . 16. integration : GUI design : ¡ð Primary goal of most GUI applications is integration of all pieces, functions . ¡ð toolkits and their components are key elements in accomplishing integration . Web design : ¡ð apparent in site for basic functions such as navigation, printing . 4
¡ð Wwb design prefers individual distincyion, interoperability between sites than integration 17. security : GUI design : ¡ð security controlled , depend on the degree of willingness of organization to invest resources and effort . ¡ð not important in home application for PC users . Web design : ¡ð renowned for security exposures, sothat is inhibitor to use for businesses and consumers. ¡ð provides security options that not well understood by average web users . ¡ð when employed. these security ootions have function-limiting side effects .(create more trust appearance by security levels and passwords to ensure to users that web is secure environment. ) 18. Reliability : GUI design : (as security) ¡ð Reliability controlled , depend on the degree of willingness of organization to invest resources and effort . Web design : ¡ð Web Reliability is susceptible to disruptions by Telephone line, Hosting servers, Internet service providers . Although many GUI design techniques and guidelines are used in Web design, many of these GUI-Web differences will disappear Printed pages versus web pages : ¡ñ while internet history spans a couple of decades , the printed page spans more than five and one- half centuries . ¡ñ Research with printed pages through these centuries has created set of guidelines for style, presentation and text organiztaion. ¡ñ While these guidelines are clear, comprehensive, consistent and can be applied to web page design, There are major differences between printed and web page design . ¡ñ The differences between printed and web page design : 1. Page size : printed page : is more larger than their web counterparts . ¡ð fixed in size . ¡ð designed as one entity, the final product will be in complete look . ¡ð The visual impact of the printed page is maintained in hard-copy form . web page : is less larger than their printed counterpart . ¡ð variable in size . ¡ð designed as a complete entity, presented in pieces with dimensions that differ depending on the technology of user (browser, monitor, ¡­) . ¡ð The visual impact of web page is substantially degraded, because the user never see some parts of the page because their existance is not known or requires scrolling .Sothat the top 5
of web page must be the most important element and content signals to the parts of page lie below the surface . 2. Page rendering : Printed pages are better than wep pages in rendering . Printed page : ¡ð presented as complete entities, and their contents are available for reading and review immediately . Web page : ¡ð rendered slowly depending on line transmission speeds and page content. This impatient users may not wait many seconds for page to completely appear and move to somewhere else. ¡ð Design implications : provide page content that downloads fast, and give user elements to read to make passing time diminished (bandwidth to download web page as fast as turn printed page) . 3. Page layout : Printed page : ¡ð The layout is precise with much attention given to it . Web page : ¡ð The layout is negatively influenced by deficiencies in design toolkits and the characteristics of the hardwar, screen sizes and the browser of the user . ¡ð Design implication : understand the design of most common user tools . 4. Resolution : ¡ð The resolution of printed page (displayed printed characters) exceeds the resolution of web page (screen characters) . ¡ð Design implication : provide easy way to print long web document (speed of web page reading as the speed of printed page reading) . 5. User focus : Printed page : ¡ð present people with sets of information. ¡ð efforts needed to deal with page are easily made ¡ð some printed pages may be read seqentially (novel), or partially (newspaper) or skimmed (sales brochure) web page : ¡ð present people with snapshots of information or with few clues about structure and sequence or with rarely with few clues about length and depth . 6. Page navigation : Printed page : ¡ð Navigating the printed page is simple as page turning . ¡ð interaction between printed pages is rare because the process is sequential . Web page : 6
¡ð Navigating web page requires decisions which of links should be followed .(by know the end of link , is it my need) ¡ð Design implications : provide overviews of information organization schemes and descriptions of where links lead . 7. Sence of place : Printed page : ¡ð Users have sense where they are through graphic and page . ¡ð paging the printed page is orderly, sequential and understandable process . Web page : ¡ð Users easily lose sence of place, becouse of paging using browser back button, moving through web links . thus build cues into web pages help users to maintain sense of place . 8. Interactivity : Printed page : ¡ð involves letting eyes traverse information, selectively looking at information and using spatial combinations to enhance and explain page elements . Web page : ¡ð involves letting hands move information (scrolling, pointing, expending, clicking,..) with eyes . ¡ð information (static or dynamic) expressed as part of interaction and user movement . ¡ð memorable than only seeing . 9. page independence : Printed page : ¡ð sequential, standardized in organization, provide clear sense of place ¡ð content (table of content, index, outhor,..) easily found in well defined page . Web page : ¡ð independent, its topic and contents explained without assumption about any previous page seen by user . ¡ð Design implication :provide header and footers on each web page . However Printed page differs from Web page in many aspects, many of the basic printed page guidelines can be applied to Web page . 7
8

More Related Content

GUI

  • 1. GUI versus Web Page Design : ¡ñ GUI and Web page design are similar. ¡ð they are software designs used by people . ¡ð they are interactive, experiences presented through screen . ¡ð they are composed of similar components. ¡ñ There are difference between GUI and Web page design , parts of them are based on Berry(200) and Nielsen(1997a) . 1. Devices : GUI design : ¡ð The characteristices of interface devices (monitors and modem) are well defined.design variations tend to be restricted ¡ð The layout of screen will look exactly as specified . Web page design : ¡ð an assumptions about the user interface devices can be made , user devices range from handheld mechanisms to high end workstations (in GUI design, the difference in screen area between laptop and high end workstation is factor of 6 in web page design, the difference of connection speed bandwidth is factor of 1,000), WYSIWYG no longer exist in web page design ¡ð The layout of screen will effected by hardware and software, sothat the deaigner must make full control for the interface with users and their hardware and software . 2. User focus : GUI design : ¡ð well defined applications ,data, transactions and processes . ¡ð attention must be addressed for user to complete tasks Web design : ¡ð Web is primarily in information, application and navigation, is characterized as browser and visual scanning of information to find what information is needed 3. Data/ information : GUI design : ¡ð data is created and used by known and trusted source, the properities of data is known, information is organized in understandable fashion, there is notion of shared data and privacy data . web page design : ¡ð Web is full of unknown conten /informationt placed by unknown other to users, these information can not be trusted . 4. User tasks : GUI design : ¡ð users install, configure, personalize, start, use and upgrade programs, they open, use and 1
  • 2. close applications. ¡ð familiarity with applications achieved. Web design : ¡ð users link to sites, browse or read pages, register for services and download, save content. ¡ð Movement between web pages and sites are very rapid. ¡ð familiarity with web pages , sites not established . 5. User conceptual space : GUI design : ¡ð controlled and constrained by the program and application Web design : ¡ð infinite and unorganized 6. Presentation elements : GUI design : ¡ð The main kinds of GUI presentation elements are windows, menus, controls, toolbars, messages and data . ¡ð dynamically appearing and disappearing depending on the current interaction, standardized as result of toolkits and style guides used . ¡ð presented on screen as specified by designer Web design : ¡ð Web browser and Web pages . ¡ð Web browsers are GUI applications with GUI presentation elements. ¡ð Web page are combination of text , images, audio, video and animation . ¡ð Web pages are complex and cluttered asThe designer focused on new and pretty ,little attention given to usability , sothat there are interface style guides and duidelines to aid the design process . ¡ð not presented on screen as specified by designer, as presentation deponds on browser and monitor . 7. Navigation : supplement to tasks functions and actions . GUI design : ¡ð User navigate through menus, lists, trees, dialogs and wizard . ¡ð standardized by toolkits and style guides . ¡ð GUI provide a strong sense of navigation as ¡°to another window¡± command indicates as ¡° Open..¡± command buttons such as ¡°Ok¡± and ¡°Cancel¡± that direct to another window and wizard. . Other GUI design does not provide a strong sense of navigation as pressing an button, no result visible happening . Web design : ¡ð User navigate through links, bookmarks and typed URLs ¡ð Web provide significant and highly visible concept with few constraints . ¡ð As the immense size of web, user may lose ¡°sense of place¡± . ¡ð Web navigation has few standards for button and links . 2
  • 3. ¡ð Navigation is part of page design that ensure lack of consistency and confuses users 8. Context : GUI design : ¡ð enable user to maintain better sense of context . ¡ð path are resticted, and multiple overlapping windows are presented, enable users to remmember how what they are doing fits into task . Web design : ¡ð Web pages are single entities with unlimited navigation paths . ¡ð they do not bring up separate dialog boxes to ask questions or request information or present mesages . ¡ð contextual clues become limited or hard to find . 9. Interaction : GUI design : ¡ð consists of activites such as clicking menu choices, button, choices from list,cutting, coping, pasting data in context in window and program . Web design : ¡ð is single click that cause changes in context as moving to another site, these changes may not be noticed when occur . ¡ð Web provide parallel mechanism that may function differently depending on context . 10. Response time : GUI design : ¡ð fairly stable , if not nearly instantaneous . Web design : ¡ð variable ,slow (long response times of system loads, page content may upset and frustrate users) . 11.Visual style : GUI design : ¡ð prescribed and constained by toolkits . ¡ð Visual creativity in screen design is allowed but is diffcult to do. (while some user options and style choices, little opportunity exists for screen personakization) . Web design : ¡ð artistic, individual, and unrestricted presentation style . ¡ð freedom ,but differ browser and dispkay capabilities, screen size, bandwidth restrict this freedom ¡ð Limited personalization of system is available for user at browser or site . 12. System capability : GUI design : ¡ð limited only in proportional to capabilities of hardware in speed, memory and configuration, 3
  • 4. and sophistication of software . Web design : ¡ð more limited by hardware, browser and software, and by page owner to provide functions and elements, user willingness to allow features because of response time, security and privacy concerns. 13. Task efficiency : GUI design : ¡ð used to perform spcific tasks , the efficiency of performing task is limited by amount of programming undertaken to support it . Web design : ¡ð limited by browser and network capabilities . ¡ð Actual user audience is not well understand because many web sites are intended for everyone . 14. Consistency : GUI design : ¡ð majar objective in development efforts, while they are far from perfect, an attempt to male them consistent ¡ð Organizations put interface and screen design standards and toolkits to aid in standardization process, and allow certain degree of universal consistency in GUI products . Web design : ¡ð want to establish their result in web sites in little consistency across sites. ¡ð Standards established within a site, too many developer ignore guidelines for identical components, especially controls existing in GUI components used in web pages 15. User assistance : (guidance) GUI design : ¡ð important part in GUI design . ¡ð User access this assistance through standard mechanisms as F1 key, Help menu, message, status area, online and offline Documentation Web design : ¡ð does not provide help systems (assistance) ¡ð little available help built in web design . ¡ð customer service support, if provided to product or service offered . ¡ð GUI browser may provide GUI assistance . 16. integration : GUI design : ¡ð Primary goal of most GUI applications is integration of all pieces, functions . ¡ð toolkits and their components are key elements in accomplishing integration . Web design : ¡ð apparent in site for basic functions such as navigation, printing . 4
  • 5. ¡ð Wwb design prefers individual distincyion, interoperability between sites than integration 17. security : GUI design : ¡ð security controlled , depend on the degree of willingness of organization to invest resources and effort . ¡ð not important in home application for PC users . Web design : ¡ð renowned for security exposures, sothat is inhibitor to use for businesses and consumers. ¡ð provides security options that not well understood by average web users . ¡ð when employed. these security ootions have function-limiting side effects .(create more trust appearance by security levels and passwords to ensure to users that web is secure environment. ) 18. Reliability : GUI design : (as security) ¡ð Reliability controlled , depend on the degree of willingness of organization to invest resources and effort . Web design : ¡ð Web Reliability is susceptible to disruptions by Telephone line, Hosting servers, Internet service providers . Although many GUI design techniques and guidelines are used in Web design, many of these GUI-Web differences will disappear Printed pages versus web pages : ¡ñ while internet history spans a couple of decades , the printed page spans more than five and one- half centuries . ¡ñ Research with printed pages through these centuries has created set of guidelines for style, presentation and text organiztaion. ¡ñ While these guidelines are clear, comprehensive, consistent and can be applied to web page design, There are major differences between printed and web page design . ¡ñ The differences between printed and web page design : 1. Page size : printed page : is more larger than their web counterparts . ¡ð fixed in size . ¡ð designed as one entity, the final product will be in complete look . ¡ð The visual impact of the printed page is maintained in hard-copy form . web page : is less larger than their printed counterpart . ¡ð variable in size . ¡ð designed as a complete entity, presented in pieces with dimensions that differ depending on the technology of user (browser, monitor, ¡­) . ¡ð The visual impact of web page is substantially degraded, because the user never see some parts of the page because their existance is not known or requires scrolling .Sothat the top 5
  • 6. of web page must be the most important element and content signals to the parts of page lie below the surface . 2. Page rendering : Printed pages are better than wep pages in rendering . Printed page : ¡ð presented as complete entities, and their contents are available for reading and review immediately . Web page : ¡ð rendered slowly depending on line transmission speeds and page content. This impatient users may not wait many seconds for page to completely appear and move to somewhere else. ¡ð Design implications : provide page content that downloads fast, and give user elements to read to make passing time diminished (bandwidth to download web page as fast as turn printed page) . 3. Page layout : Printed page : ¡ð The layout is precise with much attention given to it . Web page : ¡ð The layout is negatively influenced by deficiencies in design toolkits and the characteristics of the hardwar, screen sizes and the browser of the user . ¡ð Design implication : understand the design of most common user tools . 4. Resolution : ¡ð The resolution of printed page (displayed printed characters) exceeds the resolution of web page (screen characters) . ¡ð Design implication : provide easy way to print long web document (speed of web page reading as the speed of printed page reading) . 5. User focus : Printed page : ¡ð present people with sets of information. ¡ð efforts needed to deal with page are easily made ¡ð some printed pages may be read seqentially (novel), or partially (newspaper) or skimmed (sales brochure) web page : ¡ð present people with snapshots of information or with few clues about structure and sequence or with rarely with few clues about length and depth . 6. Page navigation : Printed page : ¡ð Navigating the printed page is simple as page turning . ¡ð interaction between printed pages is rare because the process is sequential . Web page : 6
  • 7. ¡ð Navigating web page requires decisions which of links should be followed .(by know the end of link , is it my need) ¡ð Design implications : provide overviews of information organization schemes and descriptions of where links lead . 7. Sence of place : Printed page : ¡ð Users have sense where they are through graphic and page . ¡ð paging the printed page is orderly, sequential and understandable process . Web page : ¡ð Users easily lose sence of place, becouse of paging using browser back button, moving through web links . thus build cues into web pages help users to maintain sense of place . 8. Interactivity : Printed page : ¡ð involves letting eyes traverse information, selectively looking at information and using spatial combinations to enhance and explain page elements . Web page : ¡ð involves letting hands move information (scrolling, pointing, expending, clicking,..) with eyes . ¡ð information (static or dynamic) expressed as part of interaction and user movement . ¡ð memorable than only seeing . 9. page independence : Printed page : ¡ð sequential, standardized in organization, provide clear sense of place ¡ð content (table of content, index, outhor,..) easily found in well defined page . Web page : ¡ð independent, its topic and contents explained without assumption about any previous page seen by user . ¡ð Design implication :provide header and footers on each web page . However Printed page differs from Web page in many aspects, many of the basic printed page guidelines can be applied to Web page . 7
  • 8. 8