scrollwap网站制作

WAP-DesigningforSmallUserInterfacesAlbrechtSchmidt,HenningSchrderTecO,UniversityofKarlsruhe76131Karlsruhe,Germany{Albrecht,schroder}@teco.
eduOliverFrickSAPCorporateResearch,CECKarlsruhe,76131Karlsruhe,Germanyo.
frick@sap.
comKeywordsWAP,WML,mobilepersonaldevices,smallUIdesignINTRODUCTIONCurrentandupcomingWAP-capablemobilephonesintroducenewuserinterfaceswherestandardmethodsforapplicationdesignoftenfail.
AutomatedtranslationofHTMLtoWMLproducesscreenlayoutsandinputmechanismsthatareoftennotuseableonamobilephone.
InthispaperwesuggestastructuredapproachforbuildingWAPapplicationandinparticularthedevelopmentoftheuserinterface.
FirstwegiveabriefsummaryonthediscriminatingfeatureofaphoneinterfaceandonmechanismstobuildapplicationsonWAPdevices.
ThenweprovideguidelinesonhowtoportfromWebtoWAPandhowtodevelopWAP-Applications.
WefinallyintroducetheWAPapplicationthatledtoourfindings.
WAP-DEVICESAnincreasinganumberofWAPdevicesbecomeavailabletoday.
IncontrasttodesktopmachinesthesedevicesdonotformahomogeneousplatformintermsofUIandusage.
ThisparagraphgivesabriefoverviewonourfindingsconcerningdifferentUIsandthesupportforWAP/WML.
UserInterfacesWAPdeviceshaveavarietyofinterfaces;outputcanbedisplayedastext,formattedtext,orgraphics.
Inputisprovidedbytouchscreensand/orbuttons.
DisplaysareingeneralmuchsmallerthanthatonPCs,howeverthesizevariesverymuch.
TheEricssonMC218forexamplehasa640x240pixeldisplaywhereastheNokia7110hasonly96x65pixel.
Thisisaratioofabout24:1whereasworkstationscreensdifferonlybyaratioof6:1(1600x1200comparedto640x480).
ThislargedifferencesinscreenspacemakesitalmostimpossibletodesignanapplicationsothatitfitsallWAP-devices[1].
TheinputmechanismsprovidedbyWAP-devicesarenotcoherenteither.
PDAlikedevicesofferpointandclickonatouchscreenwhereasmostphonesrelyonasetofbuttons.
Linknavigationwithabuttoninterfacehoweverismoredifficultthanpointandclick.
Scrollingupanddownissupportedverywellonmostdevices(e.
g.
scrollwheelonNokia7110)whereasoftenthedisplaywidthisfixedandnoleftrightscrollingisprovided.
Textinputisdifficultandtimeconsumingonmostphone-sizeddevices,whereasinputtingnumbersissupportedverywellandusersareaccustomedtothat.
PDAlikedevicesontheotherhandtypicallycomewithalpha-numerickeyboards.
Applications,WAP,WMLandWMLSPDAlikedevicesaswellasphonesofferanumberofapplicationsbeyondphoning,suchasmessaging,calculator,addressbook,andgames.
Fortheseapplications,andtosomeextentevenforphoning,theusageofdevicesfromdifferentmanufactures(orevenfordifferentmodelsofonemanufacturer)doesnotfollowthesamerules.
WiththeintroductionoftheWAPstandardamanufacturerindependentplatformforthedevelopmentanddistributionofapplicationsforWAP-phonesandotherWAP-devicesisgiven.
ApplicationsarewritteninWMLandorinWMLSandconstituteofoneormoredecksconsistingofonormorecards.
Theresourceisprovidedonaserverandcanbedownloadedbytheuser.
Inourexperimentsweobservedthatmostdevicessupportonlyasubsetofthespecifiedmarkuptagsandthatthewaysinwhichthesetagsareinterpretedarealsodifferent.
Thismakesitimpossibletoforeseetheappearanceofanapplicationontheusersscreen;thedifferenceobservedissignificantlylargerthanthedifferencesobservedwithapplicationsindifferentstandardWebbrowsersondesktopmachines.
DESIGNINGANDDEVELOPINGWAP-APPLICATIONSFromourexperienceindevelopingWAP-applications(aselectedapplicationisdescribedinthenextsection)wederivedasetofguidelinesforthedevelopmentofWAP-applications.
Inthenextparagraphstheseguidelinesarestatedasaninformalprocedure.
GeneralIssuesThefirstandmostimportantmatteristoidentifythebenefitsforbringinganapplicationtotheWAPplatform.
Supportingthesebenefitsmustbetheprimegoaloftheapplicationdevelopment.
Apotentialbenefitis,e.
g.
,universalaccesstoinformationthatisvitalwhileontheway(e.
g.
contactaddress,travelmanagement).
Thenavigationspaceandimpliedinteractionwiththeapplicationshouldbereflectedinthestructureofdecksandcardsintheimplementation.
Whereverpossible(ifcardsdonotrelyonuserinput)provideamaximalnavigationspacewithinonedecktoavoidreloadingduringnavigation.
IfinformationisalreadyprovidedonaWebsiteandshouldalsobeavailableonWAPthefollowingapproachcanbeusedforporting:defineatypicalpathormoregeneralagraphandbuildanavigationalstructureforthispath,whichisthenrepresentedbyadeckconsistingofmultiplecards.
UsedthetitlesandheadlinesofWebpagesalongthepathtohavethecontentframework.
Reducetexttoaminimumanddesigninformationchunksthatfitonthesmallestdevicesyouaredesigningfor.
InputDesignMostcurrentphonesareoptimizedinputtingnumbersratherthantext.
Alsodirectpointandclick,asknownfromPDAsandPCs,istypicallynotgiven.
Basedonthisthefollowingrecommendationsforinputdesignshouldbeconsidered:§usenumbersforinputwheneverpossible§usecommonabbreviationslikecountrycodes§iflettersareusedkeeptheinputmechanismsinmind,e.
g.
preferfirstletteronkey§offerchoices(e.
g.
numbers,listboxes,radio-buttons,link-lists)ordefaultvalueswhenapplicable;evenlongerlinklistproveuseablebecauseofscrolling§providelabelstohardwarebuttonswerepossible§usestandardconventionsonbuttons(e.
g.
back)Onebasicissueistoreducetheneedforuserinputasmuchaspossible.
Herecustomizationofapplicationsfortheuserprovidesoneway.
AlsothecooperationbetweendesktopinterfacesandWAP-devicescanbebeneficial(cf.
ourcasestudydescribedinthenextsection).
OutputDesignDisplaysonmobilephonesareingeneralrathersmallandprovideonlyalowresolutionandcolordepth.
Thus,readingoflargertextsisratherdifficultwhereasthedisplayofsmallinformationchunksismuchbetter.
Theusageofgraphicsdoesoftennotprovideadditionalvaluebecauseofthelowresolutionandpoorrendering.
Thefollowingputsattentiontothemostimportantissues:assessthescreensizeandqualityofthetargetdeviceswithtextandgraphicsreducetheoutputbycustomizingtotheusersneed[2]designinformationchunksthatareseenatonceonthescreen,largertextblocks(morethan20words!
)withinoncardshouldbestructuredhorizontalscrollingiseasyonmostdevices,verticalisnot!
usemultiplecardsinonedeckinsteadofverylargecardsormultipledecksConsideringtherangeofdevicesandtheircapabilities,itisadvisabletodesigninputandoutputforcertaindevicesclassesindividually.
PERSONALWAP-ACASESTUDYWithintheprojectPersonalWAPweinvestigatethereductionofuserinteractioninWAPapplicationsbyprovidinguserswithapersonalizedWAPportal.
DuringourWAPusabilitystudieswefoundinputtingtext,e.
g.
settingbookmarksonaphone,veryinconvenient–butneverthelesswefounditimportanttohaveahotlistoflinkseasyaccessibleandmaintainable.
Inaddition,wewantedtohavemechanismtofilterinformationboth,personalandsituationspecific.
Finally,wewantedtohaveaccesstoshortpersonalnotes(e.
g.
anaddress,ashoppinglist,etc.
)whenleavingtheofficeorhome(a"WAPPostIt").
Thesolutionconsistsoftwointerfaces-oneforastandardWebbrowserandoneforaWAPphone.
TheWebbrowserinterfaceisusedtodefinethepersonalWAPportalwithlinksandnotes.
TheWAPinterfaceisacustomized,userspecificsetofWMLcardscarryingtheinformationpreviouslyselectedoreditedwithintheWebinterface.
TheWebInterfaceAWebservicewheretheuserisidentifiedbyhisphonenumber,accessisgrantedbyusingapassword.
Onthispagetheusercaninputlinks,newsitems,andnotesthatshouldbeavailableonhispersonalWAPportal(Figure1).
TheWAPInterfaceTheWMLdeckwhichrepresentsthepersonalWAPportalisgeneratedfromtheinformationeditedontheWebinterface.
TheWAPURLtothepersonalWAPportalisfixed,whereasthecontentoftheWMLdeckisdynamicallygenerated.
AsthemanagementoftheWAPportaltakesplaceontheWebinterface,notediousbookmarkmanagementonthephoneisneeded(Figure1).
Figure1Figure2CONCLUSIONWAPapplicationsrequireanewtechniqueforuserinterfacedesign.
Primedesignguidelineisminimaluserinteractionduringinputandoutput.
SuggestedtechniquesforoutputreductionareWAPspecificpresentationaswellasuserdrivencustomization.
Suggestedtechniquesforinputreductionisservicepreselection,provisionofchoices,inputbynavigation,andfocusonnumericinput.
REFERENCES1.
Brewster,S.
,Cryer,P.
MaximisingScreen-SpaceonMobileComputingDevices,inProc.
CHI'99,1999.
2.
Barret,R.
,Maglio,P.
,Kellem,C.
HowToPersonalizetheWeb,inProc.
CHI'97,1997.