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
