William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Designing for the WebDesigning for the Web

Cooper 37Cooper 37

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

TopicsTopics

The Good News and the Bad NewsThe Good News and the Bad News Common Web Design MythsCommon Web Design Myths Web Sites vs. Web ApplicationsWeb Sites vs. Web Applications Browser Based vs. Internet-Browser Based vs. Internet-

EnabledEnabled Intranets, Extranets and the Intranets, Extranets and the

InternetInternet

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

The Good NewsThe Good Newsand the Bad Newsand the Bad News Early Web designEarly Web design

– Graphic artists and designersGraphic artists and designers– Focused on visual expressionFocused on visual expression– Few guidelines, flew by seat of pantsFew guidelines, flew by seat of pants

Information architectsInformation architects– ““Findability” of informationFindability” of information– Focus on content, navigation and Focus on content, navigation and

organizationorganization

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Common Web Design MythsCommon Web Design Myths

The Web inherently makes things The Web inherently makes things easier to useeasier to use

Designing for the Web is new and Designing for the Web is new and differentdifferent

Web design is about HTMLWeb design is about HTML Web design is just about the front Web design is just about the front

endend

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Common Web Design MythsCommon Web Design Myths

Web design is about browsersWeb design is about browsers Web design is about Web pagesWeb design is about Web pages The Web and the Internet are The Web and the Internet are

anonymousanonymous Web applications are easier and Web applications are easier and

faster to build than desktop faster to build than desktop applicationsapplications

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

The Web Inherently Makes The Web Inherently Makes Things Easier To UseThings Easier To Use Early interaction was single clicksEarly interaction was single clicks Click on links or imagesClick on links or images Minimal interactionMinimal interaction It was easy to use, but limitedIt was easy to use, but limited

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Designing For The WebDesigning For The WebIs New And DifferentIs New And Different More constrained and fluidMore constrained and fluid UI was differentUI was different Emphasizes content over formEmphasizes content over form The design process is the same as The design process is the same as

for desktop applicationsfor desktop applications

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Design Is About HTMLWeb Design Is About HTML

Print and graphic designers are Print and graphic designers are media focusedmedia focused

Graphic design and Graphic design and implementation are the sameimplementation are the same

Application design is more Application design is more complexcomplex

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Design Is Just About Web Design Is Just About The Front EndThe Front End Design encompasses the entire Design encompasses the entire

productproduct Equal parts of:Equal parts of:

– Visual designVisual design– Information designInformation design– Interaction designInteraction design

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Design Is About Web Design Is About BrowsersBrowsers Most web applications are within Most web applications are within

browsersbrowsers More desktop applications are More desktop applications are

becoming net awarebecoming net aware Web-enabled softwareWeb-enabled software

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Design Is About Web Web Design Is About Web PagesPages Hierarchies of static pagesHierarchies of static pages Move is towards transactional, Move is towards transactional,

dynamic sitesdynamic sites Becoming client-server Becoming client-server

applicationsapplications

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

The Web And The Internet The Web And The Internet Are AnonymousAre Anonymous The Web is browser accessibleThe Web is browser accessible The Net is really a diverse The Net is really a diverse

networknetwork

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Applications Are Easier Web Applications Are Easier And Faster To Build Than And Faster To Build Than Desktop ApplicationsDesktop Applications

HTML is fairly quick for HTML is fairly quick for prototypingprototyping

Transactional applications require Transactional applications require design and developmentdesign and development

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Sites vs. Web Web Sites vs. Web ApplicationsApplications Web sitesWeb sites

– Information-centricInformation-centric– Interaction is searching and Interaction is searching and

following linksfollowing links– Sets of pages or documentsSets of pages or documents– Design focuses on content, Design focuses on content,

organization and clarityorganization and clarity

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web Sites vs. Web Web Sites vs. Web ApplicationsApplications Web applicationsWeb applications

– Transactional in natureTransactional in nature– Mostly dynamic screensMostly dynamic screens– May utilize multiple databasesMay utilize multiple databases– AppletsApplets– Browser based or standaloneBrowser based or standalone

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web ApplicationsWeb Applications

Transient postureTransient posture– UtilitiesUtilities– Must clearly indicate functionalityMust clearly indicate functionality– Simple, direct and to the pointSimple, direct and to the point– Fit user’s mental models and flowFit user’s mental models and flow– Consider access to user dataConsider access to user data

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web ApplicationsWeb Applications

E-CommerceE-Commerce– Transient activities (research, Transient activities (research,

purchase)purchase)– Combine informational and business Combine informational and business

elementselements– ShoppingShopping– CheckoutCheckout

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Web ApplicationsWeb Applications

Sovereign postureSovereign posture– Densely populated with controlsDensely populated with controls– Many featuresMany features– Use panes (frames) for organizationUse panes (frames) for organization– MS Outlook Web AccessMS Outlook Web Access– ANGELANGEL– WebMailWebMail

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Browser Based vs. Internet-Browser Based vs. Internet-EnabledEnabled Browser basedBrowser based

– Provides web accessedProvides web accessed– Difficult to implement on multiple Difficult to implement on multiple

clientsclients– Easy to install and maintainEasy to install and maintain

Internet-EnabledInternet-Enabled– Desktop applicationDesktop application– Can access the Web, data, etc.Can access the Web, data, etc.

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Intranets, Extranets and the Intranets, Extranets and the InternetInternet Can not guarantee automatic Can not guarantee automatic

data savesdata saves InternetInternet

– New or infrequent usersNew or infrequent users Intranet, ExtranetIntranet, Extranet

– Frequent usersFrequent users

William H. Bowers – whb108@psu.eduWilliam H. Bowers – whb108@psu.edu

Questions & DiscussionQuestions & Discussion