New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here


by: Vito Kilback

GraphicalUserInterfaces CS338

Marketplace > Drexel University > ComputerScienence > CS338 > GraphicalUserInterfaces
Vito Kilback
GPA 3.88


Almost Ready


These notes were just uploaded, and will be ready to view shortly.

Purchase these notes here, or revisit this page.

Either way, we'll remind you when they're ready :)

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Class Notes
25 ?




Popular in Course

Popular in ComputerScienence

This 106 page Class Notes was uploaded by Vito Kilback on Wednesday September 23, 2015. The Class Notes belongs to CS338 at Drexel University taught by DavidBreen in Fall. Since its upload, it has received 23 views. For similar materials see /class/212449/cs338-drexel-university in ComputerScienence at Drexel University.

Similar to CS338 at Drexel

Popular in ComputerScienence


Reviews for GraphicalUserInterfaces


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 09/23/15
Onwards and downwards What goes on underneath the GUI How does the toolkit draw maintain the Lecture 639 interface Graphics Basics This class Intro to basic graphics image models coordinate systems canvas drawing clipping Thanks in James La nda uc Berkeley a me lnundalinn nnhese slides Models for images Stroke model Amman mums swam PM on Jrx 593333 How can we Image set of strokes quot Stroke start end thickness color Line 104 174 thick 2 red N Circle 1913 radius 3 thick 3 black um wmmw box 39 13M WU 7M HCME SEEF WSW ms MNNG NEW u 7 a I 2 1 I Easy to display print plot g 539 E 39 w r Commonly used in GUI toolkits in variations Q N 51 A arcs ellipses rounded rectangles etc Page 1 Stroke model Can we represent this picture as strokes Pixel model Image depth Black amp white 1 bit pixel Grayscale 8 bits pixel gray from 0 black to 255 white Full color 24 bits pixel primaw colors red green blue from 0255 but lots of memory needed Colormapped 8 bits pixel pixel index into color table color table elsewhere for lookup some extra work but lots less space Page 2 Pixel model Pixel picture element discrete 2D unit of a picture grid Pixel image components spatial resolution rows columns eg your favorite monitor or printer resolution image depth number of bits per pixel why do we need more than one bit per pixel Pixel model Aliasing Smooth objects are mapped to closest pixels which can result in jagged edges Antialiasing attempts to reconcile with intermediate colors 39 Region model Region closed stroke with defined ll filled with color or blending pattern Advantages little memow for a solid shape unlike other two models independent of screenprinter resolution shapes text fonts lines7 T Coordinate systems Physical coordinates display coords are pixelbased so they scale differently for different resolutions solution specify coordinates in physical units eg inches centimeters or printer points necessary for printers not used much for GUls Model coordinates coordinate system relative to drawn objects book example architecture scales 1 20 requires conversion to other coord systems Page 3 Coordinate systems Device coordinates global coordinates coordinates of the display device origin usually at upper left Y local coordinates window is the center of attention essentially a rectangular virtual display within another can ignore actual location of window in display in Swing toplevel containers like JFrame Et JApplet choice depends on association with windows mouse events generally all coordinates are in pixels Canvas The first step to presenting a GUI to the user Canvas abstraction of the drawing surface Aspects of a canvas width amp height memory for drawn image all methods used for drawing Canvas is the basis for all subclasses used for de ningimages creating onscreen windows printing output Canvas What functionality does the canvas provide drawing of lines amp shapes with stroke Et region models drawing of text subset of lines Et shapes but highly specialized clipping drawing only what you need andor what s visible controlling color amp texture Paths 1D objects drawn on the 2D canvas no inside or outside infinitely thin can have associated stroke fill Examples lines end points circles center radius ellipses center width height arcs circle plus restrictions splines parametric cubic equations Page 4 Drawing Q How do you draw a rectangle Note void CanvasRectangle x1 y1 x2 y2 Pseudocode lineWidth lineColor fillColor Do I have to do all that every time shapes have properties in common geometry lineborder width linefill color pattern we can make use of this Maintain settings within system that generally stay the same within logical blocks void CanvasSetLineWidth lw void CanvasSetFillColor color void CanvasRectangle x1 y1 x2 y2 Regions Closed shapes Closed path fill colorpattern If path is not closed system can close it for you Text Back in the old days T e x t w a s d r a w 1 within blocks easy storage 1 byte character map character gt display representation The WYSIWYG revolution what you see is what you get suddenly text was drawn like everything else in hindsight makes sense but it takes worK iqu aguizaiuwhwmr Dammit umnwmw Text Commodore 64 screen shot Slish textekxxx is my shepherd I shall lack JIH DIchDaq Hu Text Font family general shape of characters eg Times Palatino Helvetica Courier serif vs sansserif without serif A A Helvetica Palatine fixedwidth vs proportionallyspaced every letter has every letter has the same width adifferentwidth Courier Times cm awning Tuxme aquot mum mum me Text Font style normal bold italic bold italic Font size measured in points 1 point 172 inch generally accurate for printed output on displays things can vary a great deal Font information height for multiple lines of text ascenders amp descenders eg f amp g leading space between lines kerning space between letters Ha vs Ta ems WWW Wm mumm nmwmmw 7n Text 0 Outline vs bitmapped fonts bitmapped character stored as pixels outline character stored as pathsregions why are both useful c 338 Graph cal User Interfaces Dario Salvucci Drexel Unlvemty Clipping Draw update only specific areas reason performance Rectangular areas are the most obvious Are they sufficient Milli lllhlf ml smuemi IWl Draw39 r 7 cs4B f ll7pp lipp ng Limit mwinglo gamma area a scam 7 1n pzrfnnmnte Cummaly diplomdilinearreg m mhe elervqn39ddy II CS 33 Graph cal User Interfaces Darin Salvucci Page 6 Stylized Stroke Fonts Stroke Path Stroke Profile Stroke Ends Utilizes Adaptive Distance Fields Text New Development 7b Stroke Path Stroke Pro les Stroke Ends A FWD SM 003 H St 3 015 U Clipping Rectili near regions closed shapes with edges entirely defined by horizontal and vertical lines Pixel mask updated drawing canvas masked with 01 pattern gt draw only 1 5 aria Salvum Drexel University Color models RGB model specify color by red green amp blue components additive model 8 bitscomponent 24 bits total per pixel in the end all others reduce to RGB for display quotwon my Unmmn Color models CMY model sometimes represent in terms of mixtures K Black of pigments needed for truer printing for o gets color from light it absorbs amp doesn t reflect mix Cyan Magenta Yellow o subtractive primaries cyan no red magenta no green yellow no blue used by printers and artists Color matching is quite difficult for printed output shades of black 3333 E R hmlLln rlwgyfacss mu lvwrv raslllmvemly Page 7 Color models HSV model hue saturation amp value easier for people to think about hue primary wavelength ie basic color saturation measure of how pure light is o high is pure low means it is mixed w whitegray value intensity or brightness dark vs light direct conversion to RGB r rm nlvucm Drexsl Unwemw Research Question of the Day Users are human how does this affect how we canshould do graphics Let s ask two questions Question 1 Often graphics today involves animation Animation involves redrawing frames many times per second to create motion How quickly do we need to draw new frames to get smooth motion ltlt Jumping Bug gtgt Research Question of the Day Answer to Question 1 No easy answer 0 Some common rates movies 24 fps television 30 fps actually 12 frame 60 Hz interlaced CRT cathoderay tube monitor 60100 fps Generally agreedto rates minimal rate for smooth motion 2030 fps limits of the eye probably 200 fps medium rates may not be noticeable but may cause eye strain Research Question of the Day Question 2 Today s computers can display millions of colors How many colors can people distinguish How many colors are enough 10000 01000 0700 0720 Page 8 Research Question of the Day In the context of GUls though lower redraw rates may be OK sometimes dragging a window displaying typed text finding search text virtual reality simulation Research Question of the Day Answer to Question 2 No easy answer Total colors 25603 16777216 Discriminable hues probably gt 10000 could theoretically be millions by some definition for practical purposes though ltlt 16 million This is useful to know eg some lossy image compression algorithms eg JPEG take advantage of our inability to discriminate Research Question of the Day But what about different individuals 10 of people l have some color blindness men 20x more likely than women different types redgreen yellowblue what does this mean for GUI design Graphics in Swing Drawing in a JPanel class ShapesPanel exlends JPanel nal Color bg Color lianlaray nal Color a Colonblack public snapespanelo selaackgrcund bg seircregrcund fg public void painiComponeniGraphics a super ainiComponenig nandle defaull drawing ltlt draw panel slurr gtgt Page 9 Graphics in Swing Drawing centers on the Graphics component every component in Swing has a method public void painlCornponenl Graphics a that draws the view part of the component you can override this method and draw whatever you d like 0 Let s look at the JPanel component which is just a panel with no 5th in it Graphics in Swing Drawing objects l C C drawllne deWRECI drawaDRan drawRoundenwOval drawArc drawPolygor x drawpolyllnalllliea rlllaonacl flllRoldeec llOval illlm flllPolygon gdrawUne x yreciHeigni1 xreciWidin y gdrawReci x y reciWidin reciHeialn gseiColor ram gdrawlDReci x y reciWidin reciHeigln irue gseiColor fg gdrawRoundRecl x y reciWidin reciHeigri 10 10 gdrawOval x y reciWidin reciHeialn gdrawArcx y rechidlh reclHeigil 90 135 Graphics in Swing Drawing text pretty straightforward gdrav tringC39Hello Worldlquot x y useful method int stringWidth String returns the total advance wid specified String in current th for showing the t Used for positioning String Fon Page 10 Hifi prototyping 9 implementation Hifi prototyping 9 implementation IDE Integrated Development Environment 39 SPeCifying the main application frame provides editor compiler debugger etc o when you click on Finish what does this do also provides builder for GUls prmmwmm39S39epz39 Example Borland JBuilder creating a new Class Hanovvmmrrame new E39ntarnnsn w r a J m l a 1m Prnlecl Annllcmmn Annlel SeMel JmServerPagn Arcllm ull nr Class Intervene ODE H l Jmaean Dlzlnu Frame Panel Data Mndule Data Mndule Annllc 1MB 53m Wand l ommns l2 Generate menu bar in Generate lgnlhar l2 Generate grains bar l5 Geneme Ahnm gjalun l2 Canter frame un screen OK Cancel Help gaek J Inish Cancel Lg cum Ciazln el J39Erlnl ihm Em aalmn i l mrvl lmvwwy 5 in Gruphv alllyi mm Mammy Prowl w W Hifi prototyping 9 implementation Hifi prototyping 9 implementation creation of the frame classes f1les refining the desrgn for a JButton 3 a3 HE m JVT He em emu LIIew Emlm gun my mmaw uelp me gum gum my men 5 1 mm Innls mmquot mngm m 39 g B E I H v aneunwmdrrame model J El swung van m anas MSEVESS mm m II E o K O E E um 1 l nemFocusan1 E i opaque True a I 7 meme camemsane preferredstze 333927 wquot n 95 7 us messer cun Down 3 requesiFDnu True meiamp ralloverEnabl F3559 3 Tm 39 rolloverlcun mlloverSelecL selected False selectedlcon Zliilzu lrmuum 1m 16gt Push Ma Source nzsruulem nnc History louITIpTexl v vemcalAlign CENTER quot 39 l 39 verticalTelen CENTER mum quotlb Emlynquot Equot quot muenlane Eurusrlayu Prupe ies Events cs xx maansz mu renwmrumr we whenquot Eranlucnlllzzi mam lmmml lmm mmwmmny Page 2 Hifi prototyping 9 implementation 0 And continuing with implementation compiling and running the application debugging final production of the application or applet servlet CS 333 Graphical User Intei faca Dario Salvucci i Ji39exel University Why use lowfidelity prototyping Traditional methods take too long sketches 9 prototype 9 evaluate 9 iterate Can simulate the prototype sketches 9 evaluate 9 iterate sketches act as prototypes designer plays computer other design team members observe amp record 0 Kindergarten implementation skills allows nonprogrammers to participate CS 333 Graphical User Intei faca Dario Salvucci i Ji39exel University Page 3 C5 338 Graphical User Interfac Dario Salxl Advantages uzci Dl e l University Issues with hifi prototyping don t need to produce layouts from scratch initializes all the basic component code you fill in the functionality later Disadvantages must give specific instance of a general idea eg exact widgets fonts alignments colors designers evaluators focus on details instead of overall structure amp functionality takes longer Lea u yxvvx lw SOMTDS Allen gg LVwm t Z Sowmk i WA Wm JWA P C5 338 Graphical User Interfac Dario Salxl JLML ttQ139QAM MA WW 39 Go to ht39i cmamwm V194 Paper sketches Course manager Emmamm Su vb News so 55 13410 4M MW MW Mto molt th hula all nah 3 CS l rtwmi 1A nsewi Toke Mink ch w 09 mm duhn1quot IBM 4 C l Mdnli m bN uzci Dl e l University SCENPramp O Music player quotL wmi39 yyqp 39io n QUUOHA v1 I Mya Storyboards What are storyboards used in film amp animation provide a script of important events leave out the details concentrate on key interactions Luke amp Leia coming toward camera Behind them Biker 3 Elements Luke Leia u cs 38 Graphical User Storyboards Storyboards for designing GUls create pinup lots of screens specify user interaction by associating screens Q3 m 0996 05413 CS 338 biaphvcnl user lnlerl c Page 4 5 338 3 a Lowfidelity prototyping Advantages of lowfipaper prototyping support brainstorming do not require specification of details designers feel comfortable sketching Drawbacks do not evolve easily lack support for design memory force manual translation to electronic format do not allow enduser interaction 0 Can we do better Research Question of the Day Quickly sketch this N W AM gm 135 9amp7 Research Question of the Day Transform it to this 5m mm MEEEK 4 Page 5 Research Question of the Day Add behavior Research Question of the Day SILK Sketching Interfaces Like Krazy Designer sketches ideas rapidly with electronic pad and pen SILK recognizes widgets easy editing with gestures Designer or enduser tests interface widgets behave specify additional behavior visually Automatically transforms to a finished GUI r L A Research Question of the Day SILK Screens screen rough sketch of single screen state including layout amp component features for handling screens editing use strokes to delete move group history save restore annotate widget inference recognition IvW w Research Question of the Day SILK Specifying behaviors behavior association of a screen object with another screen specifyinga behavior put relevant screens in the storyboard draw arrow from object to screen ED Ch 393 Research Question of the Day SILK Component recognition Infer recognize components based on strokebased gestures scrollbar long thin box small inner box Difficulties differ nt strokes for differ nt folks different strokes may produce same drawing e recognized very differently bu requires that system be trained for specific user Research Question of the Day SILK Component composition When a component is recognized does the new component contain or is it contained by another component is the new component near another component is the new component in a sequence of components of the same type Page 6 GUI evaluation Why evaluate interfaces commercial bad GUls can drive away customers timecritical bad GUls Profof a can distract users yp safetycritical bad GUls can kill no kidding Evaluate early amp often Evalume Empirical testing The classic method Give users the interface amp set of tasks Collect various measures from users more subjective data questionnaires interviews videotape more objective data time on tasks learning rate lowlevel data mouse movements clicks speech gestures eye movements Page 7 Evaluation methods Empirical testing Usability walkthroughs Heuristic evaluation User modeling Empirical testing Advantages user is very involved can directly comment on interface suggestions can be integrated easily77 can yield objective measures eg time on task time to learn but what are the right measures Empirical testing Disadvantages tester expertise developing questionnaires interviews analyzing subjective videotape tester s knowledge of system testers Et developers often not the same people expense of new study usability labs need lots of equipment gt money time required with the difficulty of analysis Et integration of study testing takes more than a short time Cognitive walkthrough Task analysis sequence of steps or actions required by a user to accomplish a task system responds to actions Questions asked for each subtask Does the user understand that each subtask is needed to reach the user39s goal Will the user notice that the correct action is available Will the user understand that the wanted subtask can be achieved by the action Does the user get feedback Page 8 Usability walkthrough Gather group of users designers amp human factors experts Interface is presented to group prototype stowboard pen amp paper Freeform exploration of interface ideas about usability questionnaire etc More structured exploration Cognitive walkth rough walk throughquot various scenarios with interface playing the part of user performing a task Usability walkthrough Advantages again users are involved along with experts gt powerful interaction don t need a full prototype Disadvantages time consuming esp cognitive walkthrough coordination of all personnel users Heuristic evaluation Developed by Jakob Nielsen Small set 35 of evaluators examine Ul independently check for compliance with usability principles heuristics different evaluators will find different problems evaluators only communicate afterwards ndings are then aggregated Can perform on working Ul or on sketches Thanks to James Landay uc Berkeley for the foundation of these slides Heuristics original H11 Simple amp natural H16 Clearly marked dialog exits H12 Speak the users H17 Shortcuts language H18 Precise amp H13 Minimize users constructive error memory load messages H14 Consistency H19 Prevent errors H15 Feedback H110 Help and documentation but we ll look at the revised set Page 9 Heuristic evaluation process Evaluators go through Ul several times inspect various dialogue elements compare with list of usability principles consider other principles that come to mind Usability principles Nielsen s heuristics supplementaw list of categowspeci c heuristics competitive analysis Et user testing of existing products Use violations to redesign x problems Heuristics revised H21 Visibility of system status keep users informed about what is going on example pay attention to response time 01 sec no special indicators needed 10 sec user tends to lose track of data 10 sec max duration if user to stay focused on action for longer delays use percentdone progress bars Time Lelt 000019 searching database for matches 46 Heuristics revised H22 Match between system amp real world speak the users language follow real world conventions example MacOS desktop o dragging disk to trash Heuristics revised H24 Consistency amp standards especially important for impaired users why Page 10 vs m Gmplvmlllai mm Heuristics revised H23 User control amp freedom exits for mistaken choices undo redo don t force down fixed paths example Wizards o must respond to Q before going to next o for infrequent tasks eg modem config o not for common tasks o good for beginners have 2 versions WinZip Heuristics revised 0 H25 Error prevention 0 H26 Recognition rather than recall make objects actions options amp directions visible or easily retrievable example prefilling input fields o before dialing asks for id amp password o when connecting asks again for id amp password Web Publishing Wizard u l r ti UserlD 746531751 Password W Heuristics revised H27 Flexibility and efficiency of use accelerators for experts eg gestures keyboard shortcuts allow users to tailor frequent actions eg macros Edit Cut CtX Copy CtC Paste CtV Heuristics revised H29 Help users recognize diagnose and recover from errors error messages in plain language precisely indicate the problem constructively suggest a solution You have not speci ed a Web Blawnr on Web Browse specified is inconcct Page 11 Heuristics revised H28 Aesthetic and minimalist design no irrelevant information in dialogues B ackguund Balm FFFBFU Form Hea mg anpeavs al mp ulWeb page in bald lypE T DAD Serxwaye Development Bide Desk l x Cemm mucosa E Mai lespunes o mu no appear on Allemale lav malllw lovms only Background meme dve Text to an Send Didar m Submit button Text In appeav m Reset buliun C Main Elem me Stmlhng Slams Bar Message max length e 200 chalaclem M39stanai 5b WW image Map weed l3 have lquot l Heuristics revised H210 Help and documentation easy to search focused on the user s task list concrete steps to carw out not too large Phases of heuristic evaluation 1 Preevaluation training give evaluators needed domain knowledge and information on the scenario 2 Evaluation individuals evaluate and then aggregate results 3 Severity rating determine how severe each problem is priority 4 Debrie ng discuss the outcome with design team Heuristic evaluation Advantages much faster than empirical testing 12 hours each evaluator vs daysweeks doesn t require interpreting user actions Disadvantages user testing is far more accurate by def takes into account actual users and tasks may miss problems amp find false positivesquot Good to alternate between HE amp user testing find different problems don t waste participants Page 12 Why multiple evaluators Every evaluator doesn t find every problem Good evaluators find both easy amp hard ones but different sets of easy amp hard onesll U nsuccessful Evaluators Successful Ham lt gt Easy Usability Problems Heuristic evaluation Studies of cost bene ts Nielsen 94 benefitcost ratio 48 l cost was 10500 for benefit of 500000 value of each problem 1 5K Nielsen Et Landauer How might we calculate this value inhouse gt productivity open market gt sales Studies of evaluators 1 evaluator achieves poor results only finds 35 of usability problems 5 evaluators find 75 of usability problems why not more evaluators 10 20 costs more won t find many more problems Lecture 11 Interfaces on the Web Web interface origins Development amp implementation Douglas Englebart 19605 remember him Human Augmentation system pointandclick expanding outlines multiple windows remote collaboration and the mouse Andries van Dam earliest electronic books exploited new technologies especially graphics and animation 2d Et 3d Page 1 Web interface origins Origins of the web interfaces lie in hypermedia and hypertext Early beginnings of the excitement Vannevar Bush Roosevelt science advisor As We May Think Atlantic Monthly July 1945 memex tool microfilm with encyclopedias of information and associative trai s just stare at short text and it would be amplified Ted Nelson 19605 coined term hypertext along with docuverse and stretch text computopian hopes Web interface origins 1983 Highlighted link words embedded in the text Koved and Shneiderman By mid19805 hypertext was mainstream Primarily as a publication tool presenting information with convenient jumpsquot Apple HyperCard Bill Atkinson 1987 Can be used to create your own applications for gathering organizing presenting searching and customizing information Hypertext Writing amp reading hypertext is different than writingreading normal text 0 Three Golden Rules Shneiderman 1 There is a large body of information organized into numerous fragments 2 The fragments relate to one another 3 The user needs only asmall fraction of the fragments at any one time 0 What s not easily amenable to hypertext according to Shneiderman novels poems reference books news articles7 Hypertext to web pages Hypertext was a necessary condition for web pages but not a suf cient one What else do we need layout imagesicons styles GUI elements animation scripted objs Page 2 Hypertext How long should each page be experiment U Manland many short articles vs few long articles subjects asked to answer questions about articles result short articles wins out subjects w short articles answered more questions correctly and answered in less time of course article length depends also on screen size user experience nature of task etc Categorizing web sites Categorizing by site goals Sell products eg book sellers eBay Advertise products or services eg real estate agents auto dealers Inform and announce eg universities governments Provide access eg libraries newspapers Create discussions eg bboards chat rooms Nurture communities eg professional orgs political orgs Categorizing web sites Categorizing by sizegenre 1 10 pages 5000 50000 pages o personal site project o university guide summary newspaper site 5 50 pages 50000 500000 pages o conference program o directoriesindices organization overview airline schedules 50 500 pages 500000 5000000 o city guide product catalog pages 500 5000 pages o congressional digest o technical reports film gt 5000000 pages database o Library of Congress NASA archives s web design different from GUI design The Yes side you only design part of the interface you don t control one big part the browser user can manipulate many aspects of interaction o eg resizing windows changing fonts navigating back and forth bookmarking etc some things are out of both your amp users control o eg download times security your pages are a tiny part of the web space o thus seen by a small fraction of people or likely a selfselected group of people scale of particular sites o can large sites really be designed x2 nanny u s web design different from GUI design 0 Hmm Experts don t agree on this one o The No side web site is clearly a user interface and often one with GUlike elements usability ideas for GUls transfer to the web evaluation like user testing amp heuristic evaluation remain largely the same though might need new heuristicsideas in this domain 3x 11139 m 1m 5 My Wyn m lt3 w mm m m Web site design Site prototyping storyboards are very useful like always flowcharts hierarchies provide nice overviews of entire sites or parts thereof o eg site for Aquatic Entomology course Next bunch of slides derived from information at hnpwwwediechvieduediechidinierface Web site design 0 Navigation types menutree navigation menu hierarchy is visible at all times user can go down then backtrack up WILLIAMSSONOMA INC Uhomes 65m mapimm Uirlnrev rei Darwsalwkci ElwinMammy I3 Web Site deSIgn o Nav1gation types index navigation almost all information visibleaccessible from top level com w Your Onlina Of ce Man599 Emu m Lint110ml wag W quotI quotthim 39sums 5mm a 71m 39 r vu q HarDoau mwvoarkngtga v I not at 1 I 39rquot l l mum m my 4m quot4 4ng222 m m um menwmmv dnllm39l39axl nmrauon Page 4 Web site design 0 Navigation types tabstop navigation like menutree but uses tab physical metaphor Sum 51qu in own w MW ml USI Single 1 gtqu New Dual 1 SGHz Dual 7 OGH1 mummmm nquot u l 1 oullnnnd as aw 1 u c338 Glaplwcal Lirev hummer Lvmmzalvum Di4hl lihsrgtlty l Web site design 0 Navigation types pulldown menu navigation uses Javascript to select next page display current selection y Hyuuuwanull wwnIhkrsvwrvhte gymmmnm A i wmm v 3 arm emnw Usuvlnlerlac s nmmlmlm Diagthwsyng 5 Web site design Navigation types iconic navigation o find information by picture o perhaps less ordered than textual menus 7 CREOLE MUSTARD PEPPER SAUCE MARINADE SPICE En a cam mu um I m saw mu m r H u u u Wemm m Web site design Navigation types Sile Map m my mum m UreaLl Hmku navigation by site map or table of contents o site map has groupinglinking table of contents doesn t Site Map s 332 Grapmrll LLev immace Page 5 Web site design Navigation types pageturning navigation o natural for sequential information not as useful for large andor complex sites Web site design Navigation types navigation by search o essentially builds an index on the fly based on given search terms I an 91 men 059quot Cu l x Search umbmom mum muons Nod 39 W I a mo 7m bolovm m 2601 Lan spur 5m runmm CA 94m A H mquot MA himquot I H Wm cmv Graph21 lLerlmer re mam ucm DNVelU Her t39 Web site design 0 Navigation types mixing navigation types an mquot Ill1 ir n g as 39 uma Luannquot um n w sIH1 munan Inv l DvJWMH 0 IMl m 1 a a l 5114vvwlawl taav Hm r anquot law an o 7 w r m leiml CS 338 Graphical User Interfaces Dario Salvuzci Dl39exel University Web site design 0 Screen layout focal point guides viewer s eye to desired places bouom wumsnaus Wl u mmlml an 0 all OFF EVERYTHING micme CS 338 Graphical User Interfaces Dario Salvucci Drexel University Page 6 Web site design 0 Screen layout balance is an essential component as it is for any window SCIENCE LEARNING N55235 5 u mu 0 Amumuem unien u to u ml mum up on m m Find out about our netwm n k 1 mm 4quot a n u 1 m y Mm Wm funk u a if 1 gxgm h mavdu 39 A A l be l dahu t ie rightrmagzm mfwyou 301 A quot aan mwsmm Wy Web Site deSIgn Screen layout highdensity layouts are difficult to navigate especially without strong visual grouping Abnlndr l H Andy39sriBluepRibbori Picks 7 e 39c Web site design Screen layout consistency as always is key from page to page Arumam me mumle armwms u N g ms hl 9mm mm In summama magnum mummmm we MIKle gm Igloqu I39ll ml we lay mm m nanm W laun rilydwun mnuani menu nnlsyw mm mkunuununlonmma Ammummquot sthalhnr39s hidLThuuwh me wzvu mm 51anqu PvurSwivls my on m m mm mm my mm mm damnquot pinith in Walla mm m a nun mu m an x mm mum elm l l l l i v m m Wltmm w mum noman Ms me am wavzijavel39ut aw um um mums may lemmas anal and 7 AM 7 r r A quot445mm MW rim1mm what and W summmw mum in u in human m num mmw ulluntllurs m a m ummm mm m MIa 5 mm mew mum l W came mammm M m Wm m a m mmmm 1mm 7 r V A WWW m a w r 7 mm e m e e r i mm um 1 lJNV EHy Web GUls Two ways to think about web GUls 1 The web page itself is a GUI o links buttons o radio buttons amp check boxes o input fields text fields o pulldown menus o layout o keyboard shortcuts browser 2 The web page can contain subGUls o ie applets o Swing amp Java give us the tools to make applets csaxr antimaer lnler ce mmme mm Llnweww Page 7 Web site design Screen layout metaphors can evoke mental models of wellknown objects and improve recognition Wm Idemd M rug 3 914 7ampMMIhdu s4 Applets OK let s return to Web GUls as applets Applet methods public class simple extends Applet puplic void init l 1 public void start l 1 public void stop public void destroy l init fast onetime initialization o should contain code normally in the constructor start performs some work or starts threads stop pauses work when applet not visible destroy final cleanup Applets Event handling Part drawing by painting handling events manually a 521ml ma mun put11c mud paxnllsxamncs ql gt publac hnnlean mans addll nl cllck at n nus vent emu am x am w Event handling Part II treat applet like a normal window JApplet is a toplevel container like JFrame Et JDialog Applets Including applets on a web page a simple way 4mm CnDERpp1tSubc1aJclass HIDT anInt MIGHTanIntgt 4mm with parameters and alternate text 4mm CnDE Anunalnxclass wIDl nzdsn mmmensn uneuxx on an s u 5 s ms anunauamgt mysl eans gt xc c c gt unds aul2aul3auldaul5aul6aul7aulBaul9aul au gt pause vALuE2nngt lately lqnnxlnq ma thmPPLE39mqt Lay Page 8 Applets Example HelloSwingApplet public class HelloSwingApplet extends JBpplet public HelloSwingApple lt 0 lt hack to avoid error in 11 public void initO aLabel label new aLabel You are successfully running a Swing appletl label setHorizont amlignlnent J39Label CENTER label setEorderEorderFactory createMatteEorder 1122Colorblack getContentP ane 0 add label BorderLayout CENTER l Applets Applet security What applets typically cannot do subject to particular browser read or write files on the host that39s executing it make network connections except to the host that it came from start any program on the host that39s executing it read certain system properties control certain aspects of window appearance Applets Applet security What applets typically can do subject to particular browser make network connections to the host they came from cause HTML documents to be displayed invoke public methods of other applets on the same page keep running after you leave their page though this is not recommendeddesired for most applets Note Applets loaded from the local file system have fewer restrictions than network applets ism mpm Web 20 Who uses Web 20 sites If you believe that bloggers are roughly like Web 20 users us Blog Readers by Age March 2005 as a A of respondentsl so momma an inn mmumsmmm Us Internet Users who Have Created Blags by Age March 2005 as a 6 ol respondenls my 2mg wmven lnrkeml mm m Mm awn mm unmmw Page 9 Web 20 0 What is Web 20 Mmum HTML pains mm Noam a brost Web 10 19932003 Web 20 2001 WWW Webpapes plus a blulolher cmlsnl sham uvs ha web wlm mum mlevac v y 1mm like an animal man a 9393 Next few slides derived from material by Jim Cuene Web 20 Surprisingly users find advertising acceptable Web 20 could open up marketing options us Bleg Readers Who Hav Maw 2004 as a L of respondents S m nanussrmwmz me alwnyl maxd l WW y MW suamemv mm us Bloggers39 Feelings about 3103 Advertisements 2005 as a quotn of respondents um accept hle 29 www mums mm ouzw 7005 eMaiKeleL Inc Web 20 What changes might we expect from marketers More users are connecting to each other and content through networked peerdriven activities amp content 0 Linkedin now has service referrals as part of their package API s and Content syndication will lead to more machine generated connections 0 Noncompliant content won t fit into the flow as readily Web 20 is truly twoway o Marketers need to be very willing to listen and receive more than broadcast Usergenerated content may be more valuable to users than yours Adoption will drive investments in online advertising 0 Investment in blog marketing will increase 33b Umnlvvczl lse Imevlacc ma Elwyn waxemmnmm Engineering Models of User Behavior We ve talked in recent lectures about engineering models to predict user behavior in certain situations user model frameworks eg KLMGOMS that predict timeontask computational user models eg production systems as used for intelligent interfaces and model tracing The basic ideas also apply to the web domain but we can do better by focusing on specifics of this domain 1 SNIFACT model FuampPirolli 2 Bloodhound system ChietaL SNlFACT Scentbased Navigation and Information Foraging in the ACT architecture Goal Encapsulate webbrowsing behavior in a computational model to better understand behavior to predict behavior as we will see Approach Model based on Information Foraging the ACTR cognitive architecture a production system framework SNlFACT Key component Information Scent distal info desired info a few clicks away proximal cues info right now eg link names Desired distal information Proximal cues SNIFACT SNIFACT Key component Information Scent Key component Information Scent for G information goal what user is seeking Strengths and L link to that information Desired distal informaliun Proximal cues Activation log prior Odds 39 Desired distal information Proximal cues I A 13 2 Wjs jEL A B 2 st JEL B ase level activation 166 Bx1L 2 Wm jEL fEG om Umnliiczl lsei irievacc ma zwcc 39uexe mumv 0m Uraumcailisci meme mmxmm Diexsi Ilnwersiu39 quot Declarative Procedural 39 Declarative Memor Key component Information Scent V Memory Memory H perception puts Spreading 39 Where do We get info in memory mum Mm o can construct activation networks from online text link names etc C quot 39 quot39gt quot quot corpora and calculate Sji for different words and EN g information goals Pr cedural Mammy quotquot cmquot Wquot E n A O o and baserate frequenCies Bi of all words and pairWise 39 knPWledge 0f MW i 5 4 mmmmwcm I cooccurrence frequencies of words can also be Esmg the msquot J 39 mm Mm v a 39 Evaiuzmysmg Information scent PemeplualrMolor action my I production 5 5 i 532 c rules a eg 3 attendtolink 1 I clicklink Q a Page 11 SNlFACT Web Behavior Graphs for two domains different colors different web sites CITY Task SNlFACT Results histogram showing predicted model rank for clicked links Rankofnnkschosen Frequency Links with higher 207 predicted rank were selected more often by users ombmmdn mc 15 20 25 gt30 Rank 0 510 Page 12 SNlFACT Model predicts 1 which links user will click on 2 when people decide to leave a site 0 Testing these two actions extracted from log files actions compared to model predictions 35338 n Hprvcalusai n zrlacim wannsamcm Hamil Unixrainy 52 SNlFACT Results scent values before and right when leaving site values decrease below overall mean dotted line 60 m w Mean Information Scent values m o Last3 Last2 Last LeaveSue Bloodhound Bloodhound So SNIFACT Information Foraging etc provide reasonable predictions of behavior How can we instantiate this into a real tool Bloodhound is a system that analyzes the information cues on a web site strives for a simple application of theory enter a web site 313ng 393 search words i get a usability report Overview of algorithm Web User Flow by Information Scent and spreading activation User Informaliu n Need Simulanon through Spreading Acmuun Predicted Usage Log cwa GmplumlUserlmwir mung um ww Hrwemw Bloodhound Bloodhound Overview of algorithm Web User Flow by Overview of algorithm Web User Flow by Information Scent and spreading activation Information Scent and spreading activation 5 3quot 100 Calculate who is left Start users at page Examlne user patterns users at page with some goal plow users Flow users through the through the network network p I gt A Target Absorbing pages States stin Virilmdl Ikp warfare WINNIErt Irrgy lUirI VKlsxn m GMpIHmlIberlmw m Page 13 Bloodhound User testing 244 users 1386 user sessions Domains helpyahoocom Yahoo help system section wwwreicom a campingoutdoor online store hivinsiteucsfedu AIDS and HIV medical site parcwebparccom company intranet Bloodhound Results yellow good green not so much Cnejf on comparisons quency vector versus user study data Page 14 Bloodhound Tasks Helpyahoocom 7484 documents You want Yahoo to add your site to the Yahoo Directow Find some guidelines for writing a description of your site When is the playing season for Fantasy Football You want to get driving directions to the airport but you don t know the street address How else can you get accurate directions there REI 36422 documents You are planning a weeklong hiking trip for this summer and you39re on a budget Find a single person tent for less than 120 Find the location of the RE store nearest you Find yourself some warm fairly heavy long underwear for the upcoming ski season etc Summary Information Foraging SNlFACT provides the theory Bloodhound provides the usable system part theory part database for associations part usable interface What about Web 20 applications They re working on it Lecture 8 Design Guidelines Focus on design The assumed process to this point 1 we have an idea for an interface 2 we understand our intended users that is we ve got personas for our system let s ignore requirements gathering etc for now We need to specify an initial design or prototype for our interface highlevel theories midlevel principles lowlevel guidelines 39 A mo re gene ral mo re specific We will examine 3 constraints to guide us Page 1 The GUI development process We ve now seen some tools that enable us to build our interface So let s get back to the GUI process How do we go from idea to design How do we specify and evaluate this design How do we go from design to implementation Theories Two types of theories useful for our purpose explanatory given a phenomenon try to understand its causes effects etc predictive given a taskinterface try to predict what willcan happen in the course of execution Same idea as theories in other domains physics how does a ball fly through the air chemistw what happens when we mix X amp Y 2Na2H207gt2NaOHH2 Theories Let s propose a theory of mouse movement How do people select a menu Assume mouse starts somewhere on the screen user clicks down selects option releases What might we Help try to explain Navigator 8 1 time to execute Instant Messenger 383 Composer 3 4 event sequence Address Book 3 5 errors Privacy amp Security gt Tools gt Welcome to Netscape 62 Netscape 6 lt5 333 Graphlcal Userlnlerfatas Dane Salvuccl Drewel Llnivermy Theories Fitts Law how long does it take to move a mouse AgtB if B has width w and is at a distance d 2d T c1 02 log W S 333 Graphical User Interfaces Dario Salvucci Drexel University Page 2 Theories Taxonomies puts order on complex set of phenomena we usually think of quotgt Family remember Byrne et al If p A A lt5 333 Graphlcal User Interfaces Genus s taskonomy Dane Salvuccl Drewel Llnivermy Lu a lunar European onar Mephil is mephiris stride skunk Panther pnrdus op d i Panthers I Mephltlsi I Lullia V icanlsi V Felidae I iMuitelidaei Icamiv I Theories GOMS modeling goals Qperators Methods election Rules keystrokelevel model of human performance one version of GOMS anyway KLM primary operators 5 333 Graphical User Interfaces K keystroke P point with mouse to a target B press or release mouse button BB click mouse button H home hands to kbmouse M mental act of thinking Dario Salvucci Drexel University 280 ms 1100 ms 100 ms 200 ms 400 ms 1200 ms Theories GOMS modeling phone example Description Type Time turn on phone 1 M 120 press Phone 1 K 28 dial number 1 M 120 type digits 10 K 280 send number 1 M 120 press Send 1 K 28 Total Time 6 96 Principles Theories provide general descriptions of human behavior performance etc very valuable for understanding so far have had more limited practicalvalue Principles embody particular aspects of theories applied in context still somewhat general but more prescriptive they tell you what to do though they may not tell you specific steps to doing it Let s look at some recognized principles of design as found by practitioners Page 3 Theories Consistency through grammars consistent command set simple grammar mm delete mm insen abjea character abjea mm abjea n 39ne deleteinsert pargraph bl9 T WWWquot deleteinsert character sert wo rd command a mm objm inconsistent command set complex grammar deleteinsert character removeinsert word I 39 destroycreate line ug y killcreate pargraph Principle 1 P1 Recognize the diversity We ve emphasized this from the beginning All design depends on the user s age education physical abilities Thinking about individuals is 39 CUltural baCkground often not feasible Can we training construct classes of users with these parameters motivation personality goals Principle 1 Novice rsttime users novice are truly novice firsttimers have skills but just don t know the interface rules of thumb restrict vocabulary to simple necessary terms keep subtasks to minimal number of actions provide informative feedback simple error messages and online stepby step help Principle 1 Frequent expert users Power users thoroughly familiar with both task and interface rules of thumb rapid response times all around macros builtin or recordable for frequent sequences of commands shortcuts keystrokes abbreviations etc Page 4 Principle 1 Intermittent intermediate users have the basic knowledge but don t see the interface often enough to become expert rules of thumb take off the training wheels consistent structure of views Et menus consistent terminology visuals emphasize recognition over recall protection from dange reference materials online or printed Principle 2 P2 Use the Eight Golden Rules of Interface Design 1 Strive for consistency again check all aspects of the interface for consistency terminology in prompts menus help textimage color layout caps fonts there are exceptions but limited 2 Enable frequent users to use shortcuts just said this but worth repeating Principle 2 3 Offer informative feedback evew action within reason should get feedback frequentminor actions 9 subtle feedback eg dragging how about clickskeystrokes infrequentmajor actions 9 obvious feedback though limit use of most obvious eg dialogs 4 Design interaction to yield closure after performing subtask sequence of actions user should feel closure take one clip and end itquot Principle 2 7 Support internal locus of control make the user feel like they re in control surprises are good for horror movies not Ul s avoid acausalityquot huh if you know the cause Et effect you re happy 8 Reduce shortterm memory load humans remember 712 things normal humans not Drexel students they re more likely around 10 or 12 the more to recall the more expertise is needed for efficient use let users find functions not recall them Page 5 Principle 2 5 Offer error prevention and handling users should not be able to make a serious error OS s do this memory protection no poke 10 Ul s are no different if system detects error recovery should be quick eg don t retype command fix faulty part 6 Permit easy reversal of actions one word UNDO increases comfort level decreases frustration encourages exploration of the unfamiliar Guidelines Guidelines are more specific prescriptive methods for designing interfaces line between principles and guidelines is fuzzy actually some use the terms interchangeably You be the judge Let s look at some sample guidelines and maybe some of this will sound familiar Guidelines for Display Organization 1 Consistency of data display 2 Ef cient information assimilation use common formatting eg left vs right justification for text numbers etc 3 Minimal memory load on user 4 Compatibility of display with data entry clear ordering clear links 5 Flexibility for user control of display allow users to change columns sorting etc Putting it all together We have theories principles amp guidelines actually theories 9 principles 9 guidelines But is there something specific to follow Yes Java LookandFeel Design Guidelines there are others Apple s Human Interface Guidelines the original the classic Microsoft s Windows Human Interface Guidelines all are vew useful because they re detailed comprehensive standard and publicly available Java maps best to onto our course but let s look at Apple s for a minute Page 6 Guidelines for Data Entry 1 Consistency of entry transactions 2 Minimal user input actions 3 Minimal memory load on user 4 Compatibility of display with data entry 5 Flexibility for user control of entry but beware l when does flexibility interfere with consistency guideline Apple Guidelines Following the guidelines is to your advantage because users will learn your application faster if the interface looks and behaves like applications they re already familiar with users will accomplish their tasks quickly because welldesigned applications don t get in user s way users with special needs will find your product more accessible your application will have the same modern elegant appearance as other Mac OS X applications Apple Guidelines quote continued your application will be easier to document because an intuitive interface and standard behaviors don t require as much explanation customer support calls will be reduced your application will be easier to localize because Apple has worked through many localization issues in the Aqua design process media reviews of your product will be more positive reviewers easily target software that doesn t look or behave the way true Macintosh applications do Apple Design Principles 0 4 Consistency effective applications are both consistent within themselves and consistent within one another 0 5 WYSIWYG What you see is what you get there should be no secrets from the user no abstract commands that only promise future results there should be no significant difference between what the user sees on the screen and what eventually gets printed 6 User Control user not computer initiates and controls all actions Page 7 Apple Design Principles 0 1 Metaphors from the real world use concrete metaphors and make them plain so users have expectations to apply to computer environments whenever appropriate use audio and visual effects that support the metaphor 2 Direct manipulation users want to feel in charge of the computer39s activities 3 Seeandpoint instead of rememberandtype users rely on recognition not recall they shouldn39t have to remember anything the computer already knows the general form of user actions is nounthenverb or quotHey you do thisquot Apple Design Principles 7 Feedback and dialog keep the user informed provide immediate feedback user activities should be simple at any moment though they may be complex taken together 8 Forgiveness users make mistakes forgive them the user39s actions are generally reversible let users know about any that aren39t Apple Design Principles 9 Perceived stability users feel comfortable in an environment that remains understandable and familiar rather than changing randomly 10 Aesthetic integrity visually confusing or unattractive displays detract from the effectiveness of humancomputer interaction different quotthingsquot look different on the screen users should be able to control the super cial appearance of their computer workplaces to display their own style and individuality messes are acceptable only if users make them applications aren39t allowed this freedom Apple Guidelines 0 The Apple Guidelines include a variety of information some important some not not important properties of Apple gt a lookandfeel not important Applespecific B Q 9 com Ponents s JPusmul Mailboxes T A Work 7 mNBOX Dunc R v Senl as m m 39 ulna Oisublcdr Important mquameeungs lmmedmlel 39 39 AFonls aw fumwd Ideas behind Lich Shortened nlce clean layout Dulgnmg lmmadmlel lpmeu iequem New verslm gt home Oilllnel Meehng Ma Page 8 R Homicidemmz iumr mm ivA Hu uwm Apple Guidelines 0 Ok so far these principles sound like many of the others we ve seen 0 What s the difference Specific guidelines that go with the general principles somewhat specific Try for a more centered approach to dialog layout as opposed to the strongly leftbiased approach more specific Maintain a 20pixel space between the left and right edge of the window and any controls more specific Set 16 pixels of vertical space between groups of controls t u Olaphvml my mum 3 Java Guidelines 0 The Java Guidelines work best for us general and specific all relevant to Swing namely to their Metal lookandfeel What do the guidelines guide flush 3D style drag texture color Cancel M gumLTlZl m 7 Jun Look and Feel Iquot a 3 LE E nrmzl Bight Damn E DJ 7 U IZIIE 7 i i l Our approach 0 What we ll do we ll look at various guidelines general from various sources and specific from the Java Guidelines when we have a specific rule we ll underline it o Maintain a 12Dixel space between the left and right edge of the window and any controls as the term progresses we ll continually expand our set of rules it s these rules that you ll follow in developing your largerscale GUI projects Primary windows 0 Primary windows are handled mostly by the particular platform you re on OS handles titleoutline moving resizing etc Swing draws the content assuming Metal feel eg on MS Windows nnlor Urln liar Window wvillob En El anm yum Lleln EEE E VEGA 1 Brena lava Isak anal leel w ndlm Loluenls Page 9 Windows 0 Windows form the basis of our GUI The 4 basic types p39 39 a g Untitled MetaIEdit HIE my W WWWW Flam window Utllltywlndow m Mama u man WV 4 MM w WWW Secondary windows 0 Typically dialog amp alert boxes again OS handles outside Swing handles inside limit bar Key dependent on primary window if primary closes secondary closes Utility windows 0 Typically used to display a collection of tools colors or patterns Platformsperm title inland border iJava loukand lazlwindcrw contents 0 Unlike secondary windows are not dependent on primary window thus doesn t close when primary closes Creating windows What Swing classes do we use for each primary windows secondary windows utility windows plain windows window new JFrame 0 window new JDialog 0 window new JDialog 0 window new JWindow 0 Luckily all these behave very similarly just create them amp lay them out as usual in a bit we ll talk more about putting them all together to work smoothly for now let s focus on a single window Page 10 Plain windows 0 Typically splash screen windows that is the window announcing the application as seen on launch VLVIETALEDIT 39v IIIll Window visual design 0 Say we re designing a new window we know components should go in the window but where do we put these components We ll rely on Java s Human Interface Guidelines to specify how to do this as discussed before the guidelines aren t perfect but they do give us a cohesive integrated picture o all specifications go together into a unified theme o think style sheets in HTML Layout process Layout process 0 1 Determine the functional requirements 0 2 Create a window with 12pixel margins for your dialog box and the type and between the border of the dialog box and importance of the dialog box components its components example Find dialog box Include 12 pixels between the top and left what information do we need o nd text borders of a dialog box and its components o options match case whole word what components do we need o text box for nd text o checkradio buttons etc for options o command buttons Find Close Layout process We interrupt this program 3 Arrange the command button row and o If you read the Java Human Interface separate it vertically from the rest of the Guidelines you ll see things like components Include 11 pixels between the bottom and right Place 17 pixels of vertical space between the command button row and the other borders of a dialog box and its command buttons To the eye the 11pixel spacing Buttons must have the same width and must appears to be 12 Pixels because the White rightaligned along the bottom margin borders on the lower and right edges of the button components are not visually significant 0 We won t worry about this 1 pixel Either one is fine Page 11 Layout process Layout process 4 Create a design grid using the number and width of the rest of the components to decide the number of columns and the column width for the grid design grid rows amp columns to structure design o we re not talking a strict grid o we re not talking GridLayout s o essentially we re talking guides to help with horizontal guidelines suggest that grid derives from and vertical alignment command buttons and spacing we won t abide by this but having a grid roughly this size is a good idea o that is pick a grid and stick to it o 4 Continued design grid example for Find box Plan must impartsquot whoquot Martin mp Layout process Component specifics o 5 Add the components to the dialog box in their logical sequence Labels Place labels before the component to which they When designing a dialog box place the most refer generallv above and to the left important options or those you expect users to complete first prior to others gin reading order Insert 12 pixels between the trailing edge of a o 6 Align related components using the label and any associated components design grid Align labels with the tops of their components Leftalign all vertically aligned labels Align related comEonents verticall using a o Insert 12 pixels after the edge of the longest label chosen design grid column and horizontally usmg a chosen deSIgn grid row Page 12 Component specifics Command buttons Center all button text with a 12pixel left amp right boundary between button label and button edge Make all rou ed command buttons e ualwidth which doesn t chan e when window is resized S ace buttons in a rou 6 ixels a art Make the default button the leftmost button Insert 17 ixels between these amp rest of window 6 6 Canoe 7 He39ll Component specifics Toolbar buttons pace individual toolbar buttons 2 pixels apart pace groups of toolbar buttons 1 1 pixels apart Include 3 ixels of s ace above and below all toolbar buttons Elli Inset Page 13 Component specifics Radio amp checkbox buttons Align the leading edge with that of other components Space grouped buttons 6 pixels apart Space separate groups 12 pixels apart I Check 1 I C Radio w l Elnd 6 6 V V 6 394 mtquot 25 IE Check 3 i Co Radio 1 f I a 39 DChecki ORauio Align lmfkhmm IE Chank1 E CheckZ I Cneck mlmnmums Rz inx Radlo 39 Ruin ATZb rnmuraluswmemws wnmuw wwrlumvvisvw 39TZb mpmal U52 Component specifics Interface text Most components use headline capitalization capitalize every word except articles conjunctions and short prepositions Checkbox text Automatic Save Every Five Minutes Combo box text Centimeters Command button text Don39t Save Icon names Trash Can Labels for buttons or controls New Contribution To Menu items Save As Menu titles View Radio button text Start at Top Titles of windows and dialogs Color Chooser Tool tips Cut Selection Component specifics Implementation of guidelines 0 Interface text continued 0 Not surprisingly Swing is set up to AlertsI errorsI and long labels use sentence capitalization implement the specified guidelines 0 Some tips to help you o capitalize only the first word in the sentence o Alert box text The document you are closing has unsaved changes hard spacing around buttons labels etc o Error or help messages The printer is out of paper o Labels that indicate changes in status Operation is 75 complete paneadd BoxcreateRig39dArea new Dimension 05 spacing around main window with border Border spacer BorderFactorycreateEmptyBorder top left bottom rigit componentsetBorder spacer Implementation of guidelines Dialogs amp Alerts 0 Some tips to help you continued 39 Dialog boxes ind layout managers are your friends for conSIStent 5e 9ndary W39quotd w quot F V which user performs rquot I alignment and spac1ng task that is game sans eg BorderLayout South panels for command buttons suppementa to the U WWW WNW o eg GridLayout to get equalsized command buttons primary window Emmi typically laid out by l programmer Alert boxes i 4 k Al k secondary window that memes A Equot22m2mmfa prov1des brief MIN 9 E temporary interaction with user typically laid out by Swing builtin Page 14 Types of dialogs Dialog box design Modal blocks all other user input 33221 ii i ifm39iiliifmy m39 Modeless can Basic design In dialog boxes include mnemonics for all user interface elements except default and Cancel 5t nteraCt W th E When opening a dialog box provide initial mam frame mm keyboard focus to the logical first component Official word 332 5 Consider the effect of internationalization Use mode less dialog boXes whenever possible Rulul Unds mum Marum WM on your deSIgn Use modal dialog boXes when o Use layout managers interaction with the application cannot proceed while dialog box is displayed 1 15 m 01152n m o 13152n m In practice this isn t easy ATZb mmmiuswmemws Dmmmmcm wwrluruvvist Dialog box design Dialog command buttons Tab traversal order General rules Specify a logical tab traversal order for the user 39 Place command bUtt0nS that a l to the dialo interface elements in a dialog box box as a whole in the command button row at the bottom of the dialog box The default traversal order is the sequence in h h dd th t t th d I b Align buttons in the command button row along W 1c y a e componen s o e la 0g OX39 the lowerright edge of the dialog box 39 do It thls way mmmm E 439 Wm H h note the alignment of command buttons in alert boxes it s eaSIest v 39 quot5 mummy supplied by Swing is different from the standard but there s also alignment in dialog boxes whyl another more excruciating way Place command buttons that a l to one or a few com onents next to their associated components Kbeuam mu Liam mnnsuamnun j eg Browse button at the trailing edge of the text UL39Lum l unr Tum l m mm ixquoncrv field it fills in m rnmnml use m Page 15 Dialog command buttons 6 Juznweln 1 Ci H miPZue OK and Cancel buttons best for singleuse dialogs modal or modeless in most cases OK is the default button When users click OK save the settings or carry out the commands and close the dialog Whenever possible provide the button with a command name that describes the action ch as Print or Find M When users click Cancel close the window and restore the settings to the state they were in when the d g box was opened 0K lcancel l Help a Graphical Usel lu39eirace Ll ll awmcci mexex mmmm Fer Cnnne mm Nmeelaldvne cum rlt Dialog command buttons Close button used to dismiss informative secondary windows Never use an OK button in a window that has a Close button When users click the Close button dismiss the dialog box and do not make additional changes to the system D Rectangle Properties Within Line wmm E ueigmzl Izmazsou E Edge 1 gm m 33 Graphical Usel lu39eirace Llall mlvuccv wexel leve ww Page 16 CS 22 Graphical Uzel luteirace nauu SIMHeel Luexeumxeum Text Propertles MetalEdlt Lum Helvetica V Dialog command buttons SW 2 33233 Apply and Close buttons junuenme sunsch Apply gloss best for multipleuse modeless dialogs in most cases Apply is the default button Use Apply to carry out the changes users specify in a dialog box without closing the window o Whenever possible use a specific action name such as quotFindquot instead of Apply Include a Close button in a dialo box with an A l or other action button Close dismisses the dialog box without applying changes If the user has made changes in a dialog box and clicks Close before clicking the Apply button display a Warning alert box to apply changes discard changes or cancel the close operation CS 32 313phvcal Uzel luteirace mun SIMHeel LuexelUmemw Dialog command buttons Help button used in any dialog box that needs it how do I do X what does X mean When users click the Help button open an additional window that displays help information Avoid removing or obscuring information in the window where users clicked quot 39 Place Help at the trailing right edge of a group of command buttons lunllmr 239 mags 12x l Image a Vex wlmk39 39 lmmmm aulmk Never Alia 1Week V lulllawaue39 JamaDeveluperCunnediun v Hum Page l hllb39livmmmlmvne com l i 50 LI Elm WI Dialog command buttons Default button represents the most likely user action If a dialog box has a default buttonl make it the first leftmost command button in the group Commands that cause the user to lose data should never be the default buttonI even if they are the most common option rue Exlsls Ame named penance anquot alveadv ems Replace emngmev framegetRootPanesetDefaultButton okButton m manual Use race mamaan rutm Hnwemvv Common dialog boxes Preferences dialog enables users to view and modify the characteristics of an application complex windows can be organized amp simplified using tabbed panes Fl 39 PrelErEllcEs mum litemmms marerenmmiualmm E lulyllm Lenmmuur 25quot l HHIIlMdrum 25m i m illuw a Lllddeniexl EIIIIS l7 m WampTeXl Z Mavglns gunmy lmksLxlma Lquot Nwerr ljcwlluk l Wm TM cram AnaMM vi Ll 93quot nmawaun i1 JuqueluperCunneuiun Ema Q Hnmgl anelhlln lNNMmglal inecam BMW Imulmuml 115 PM i 1315 PM 1 4 PM 13152n PM itaummw uramslMelalEnnlSiaIiuHEN mwse l if g 0K l cancel Help l Wen Wm l 7 7 3x Hmmamime a w m wme m Page 17 Common dialog boxes Find dialog enables users to search for a speci ed text string often modeless multiple u e Login dialog enables users to identify themselves and enter a password typically modal Progress dialog provides feedback for long operations a m urnulncalUie i m u lIl Match cm at u Linwlewnm g wryAlanna I l glass El Lug m MEtalBulhr WWW lil llisf 9mm Kasai Lug In l Cancer l39Tairj maskinvcha fl erln Pramm Metal x 7 Prawns bar 7 coma end mm m l mu m iswm1filtldwidvdfaul ramr c m swim U vv mama Common dialog boxes Color Chooser dialog provides one or more content panes from which users can select colors and view them in context chooser can be implemented as panels not separate window so can embed into dialogs iiwknvs mm m mm mm may Hmvvm x magi m cm i w nlalnq hnx ml Mr lnmm um ram Home mevw Vanni Dialog m mmnm Alert boxes Alerts convey a message or warning to users and also provide an easy way for you to create a secondary window Swing has four basic types of builtin alerts L 39J information warning error question Create alerts as JOptionPane s this will give you the builtin goodies Alert boxes Info alert boxes present general information to users Provide a Close button to dismiss an Info alert Appaintment MetalButler E o Reminder E 1100 elm1200 noon Human Interface Staff meeting Corthout conference room 1133 Omplnmlllisrlweihz mmwm vazlwurardv 7 Page 18 Alert boxes Basic design Begin your message with a brief heading in bold Start the body of the message on a separate line use ltbgtltbgt for heading ltbrgt for line break If appropriate provide a Help button in an alert box that opens an additional window with more information Different alignment rule for buttons Sigh I1 Hmr The ramaln er onhe message goes here in plain rum J 39llrlzsgavt With WM 5 mu alzrt baxlyvn Bunun 1 l Bunon 2 Commami buttons l aligned with m Alert boxes Warning alert boxes rue Exlsls Ame named penance anquot alveadv was Replace Exl ing lev l Berlace l Cancel l warn users about the possible consequences of an action and ask users for a response Keep the message in a Warning alert box briefI and use terms that are familiar to users Include at least two buttons in a Warning alert box one button to perform the action and the other to cancel the action If the most common action could result in data lossI do not provide a default Errnr a7 MetalEdit 63 o 4 was Alert boxes Error alert boxes report system and application errors to users In the message of an Error alert box explain what happened the cause of the problem and what the user can do about it Keep the message brief and use terms that are familiar to users If possible provide buttons or other controls to resolve the error noted in the Error alert box o Label the buttons according to the action thev perform o If users cannot resolve the error provide a Close button If appropriate include an error number in the title bar of an Error alert box If appropriate provide a Help button in an Error alert box to ope a separate window that gives background information about the error M mm c m mszr er Tu cunlmuE pnmmu add mum papevlu the punter and messCunlmue Creating dialogs amp alerts When creating custom modal dialogs use Creates a modal or nonmodal dialog without a title and with the owner Frame JDialog Frame owner boolean modal Creates a modal or nonmodal dialog with the specified title and the owner Frame JDialog Frame owner String title boolean modal Other constructors give nonmodal dialogs Creates a nonmodal dialog without a title with the specified Frame as its owner JDialog Frame owner Creates a nonmodal dialog with the specified title and with the owner frame JDialog Frame owner String title w 3 rqu u l mug in WW luixilllnmmlttu Page 19 Alert boxes Question alert boxes request information from users unlike other alert boxes sometimes can be used for error correction you can add your own components here may mahv ljz lr reimni m m L L Enter your name 7 Message 31 blame e Textfizld OK Cancel elp Creating dialogs amp alerts Most alert boxes use JOptionPane 4 Message l 1i E995 aren t supposed to be green question information 4 n JOptionPaneshowMessageDialog frame warning error Eggs aren t supposed to be green int n JOptionPaneshowConfirmDialog rame quotWould you like green eggs and hamquot quotAn Inane Questionquot JOptionPaneYESNOOPTION Creating dialogs amp alerts Creating dialogs amp alerts JColorChooser standard and custom JFileChooser standard and custom j Ll NIIK I39 upnn Miach v anqn dmnnal v E E Egg Lnak in l mmlmaues V E choose umwnund quotulm39 Eli ji39m Gmquot DEWquot 151 ulna Epsmuhames Images d nmueu a security j ulswlnu D uailmap I 5quot 39 riu39wsev39 lljinmrma nn ljnemnrldng Ijsecumyu Dmmk gawanpwl kmg s ickmm 39 t g 1quot ijiar dwalviaw Esmms D hdex nmmqm piano Unusm Usnunu Duismrzpplens Ij imbzans D re ect Diauaher D maleigindex g3 lalnes39nmgua H lb magma l mumz ewanPumpkmgii I nlesmyne fumes v lesm39ype Iummaues v39 Open cancel Attach camel Color newColor JColorChoosershowDialog final JFileChooser fc new JFileChooserO ColorChooserDem02this int returnVal fcshow0penDialog aComponent quotChoose Background Colorquot if returnVal JFileChooserAPPROVE0PTION handle file bannergetBackground else file chooser cancelled CS 338 Graphical Hm luteiface lI aHu Salmm New Hnmem v CS 33R Graphical Vel lmenaelt u Selection components Lists Selectable lists Storage for a list of items 1column arrangement typically text or textual January representations of complex Februaw objects eg 900pm Mar April could also be Icons Selection one o o t Single selection 3quotquot hree Selectable tables multicolumn arrangement 2d grid four five 1 Selectable trees o I o t I 3 hierarchical arrangement 5mg e m erVa 21 ve multiple interval L 333 Si ipm39al Um lmmlacet Dar u JabHun mew w wmwemw cs awhmmaw um manyea warmhlwlccl imXGHJnumww Page 20 Lists General guidelines Put your selectable list in a scroll pane of course especially if can t see all items but best to do this as a general rule JScrollPane scrollPane new JScrollPane 1m Display a whole number of lines in the list Activate the dialog box39s default command when the user doubleclicks a list item not provided automatically you need to program this Tables Cell specifics Swing s like any system s is vew specific about the look of cells in different situations unselected cell editable IQan unselected cell noneditable Lena selected cell editable Ma with keyboard focus W selected cell noneditable with keyboard focus Sophia any other selected cell Page 21 Tables Basic parts rows amp columns headers scrollbar editable vs noneditable cells Nunmmlz 21mm k baard lotus Column Mann scrollbar mm column Nanedr able columns Tables Resizing columns users can resize columns themselves several methods are available and whichever you set is used for example resize next resize subsequent resize last Tables Reordering columns a nice feature transparent to the programmer 27 Winier 19 452 Slewan 1 273 Kidney Jea 811 Dale 9 28 Arrowsmiih J9 192 Brooks 39am 377 Amann final v Trees Basic structure Toplevellme 0 a M o D Mls o D ijecls Collapszd container E a Q Diamon Expandld mnixinvgl e j FIVE stellar Will subuodei Elmuan Turner 9 j Flrsl uul Laai D onmumcalmns D Garage D s oj Sec Expanded canainer jqgt j Landscaplng Withoutsubnudesl a 3mm house lj j Publlcallnns Page 22 Tables General guidelines Put your selectable table in a scroll pane the code is the same as for lists When resizing a table vertically make sure that it always displays a whole number of rows When sorting table rows Make the column header text bold to indicate the table column that currently determines the sort order This is not automatic If your application has a menu bar provide row sorting set of menu items as well eg Sort by Sender Trees General guidelines Put your selectable tree in a scroll pane sound familiar again same code For most trees display the second level of the hierarchy as your highest level you can set tree rootVisible to false Display turners for all containers in the tree component including the containers at the highest level you can set treeshowsRootHandles to true Labels 0 Label basics can be readonly text graphics or both serve two functions in an application o to identify components and enable navigation to components that don39t have their own text strings linlmulinhlvnnllum Q i o to communicate status and other information 0 Labels that identify controls Keep label text briefl and use terminology that is familiar to users Use headline capitalization in the label text and place a colon at the end of the text Menus 0 Menu bars Use menu titles that make it easy for users to determine which menu contains the items of interest to them o eg Format typically contains commands that enable users to change the formatting of docs Use a single word for each menu title Be sure to include mnemonics for every menu title in your menu bar Do not display menu bars in secondapy windows For applets that run in the user39s current browser window do not display your own menu bar in the applet Page 23 Labels 0 Labels that communicate status Use sentence capitalization in the text of a label that communicates status Use a period only when text is a complete sentence liter m Primrsz Metal x mmsmuem rug burn mm l 21m Imam 25 secnnds ILmzlnlnl Estimatnd man mmvlztmn Available vs unavailable labels Make a label unavailable when the component it describes is unavailable 5 m Available Unavallable Menus Menu operation 1 To post a menu that is to display it and have it stay open until the next click users click the menu title Users can then move the pointer over other menu titles to view other menus 2 To pull down a menu users press the mouse button when the pointer is over the menu title The menu title is highlighted and the menu drops down When users choose a command and release the mouse button the menu closes Of course Swing already handles this for you w 3 man mg mum raw Jim mm an39a S tv Menus o Submenus sometimes can help shorten or organize menus Because many people especially novice users children and older people find submenus difficult to use minimize the use of submenus o When possible avoid using submenus at all o If vou want to present a large or complex set of choices display them in a dialog box Menus 0 Menu items cont Offer keyboard shortcuts for frequently used menu items Use the same keyboard shortcut if a menu item appears in multiple menus o eg if a Cut item appears in a contextual menu as well as in a dropdown Edit menu use CtrlX for both Use the same mnemonic if a menu item appears in multiple menus o eg if a Copy item appears in a contextual menu as well as in a drop down Edit menu use the C mnemonic for both Page 24 Menus Menu items Make your menu items brief typically verb phrases eg Aligp Left or nouns 1eg Font Never give a menu item the same name as its menu title o eg an Edit menu should not contain an Edit menu item Use headline capitalization for menu items Include mnemonics for all menu items Menus Menu items cont If a menu item does not fully specify a command and users need a dialog box to finish the specification use an ellipsis 1 after the menu item o eg after choosing Save As users are presented with a file chooser to specify a le name and location Do not use an ellipsis mark simply to indicate that a secondary or utility window will appear o eg choosing Preferences displays a dialog box however because that display is the entire effect of the command Preferences is not followed by an ellipsis Menus o Separators Use separators to group similar menu items in a y that helps users find items and better understand their range of choices Users can never choose a separator While separators serve important functions on menusl avoid using them elsewhere in your application o Instead use blank space or an occasional titled border to delineate areas in dialog boxes or other components Menus T quot1 3222 D erllne I Unavailable item 0 Checkbox menu items Use checkbox menu items with restraint o If users must set gt2 related attributes place the checkboxesin a dialo box or rovide a utilit window or toolbar buttons for the attributes Use checkbox menu items instead of to le menu items eg Italics 0n and Italics Off to indicate choices you can turn on or off o Toggle menu items confuse users it is unclear if the commands are telling users the current state of the selected object or the state they can change the object to by choosing the menu item Page 25 Menus Menu item graphics Provide menu item graphics when there are corresponding toolbar button graphics in your application o The graphics help users associate the toolbar button with the corresponding menu command Eile I I3 Llew w a glen gase Save a SgueAs E Page Setup a grim m r E it Menus 17 On item quot011 item i Unavailable item Radio button menu items typically used for multiple values except simple toggle onoff To indicate that the radio button items are part of a set grog them and use separators to separate them from other menu items Common menus Common menus page smur Enm w v 0 File Menu o Edit Menu 39 EEy Place CQmmaf ds that a I 9 th document or Place commands that modify the contents of the main ob ect or the a lication as a whole documents or other data in the Edit menu in the File menu If your application manipulates nonfile gait objects give the File menu a different name o eg Project Mailbox gut 39 quot When the Close item dismisses the active gay r1quot 7 window close any dependent windows at the Baste in same time W In n r Prov1de an Ex1t Item which closes all associated Finunnain m windows and terminates the application select All w o Be sure to use Exit not Quit by convention w m H Common menus Commons menus 0 Format Menu 0 View Menu Place commands that change the format of Place commands that change the view of the data objects usually text in the Format menu in the View menu Ensure that commands in the View menu alter Fotmatl only the viewpresentation of the underlying in l data without changing the data directly 3er l M Bolu Sige by El italic v m Q Mign Len Em l3 underline Uquot v I Align gamer w m D Align Bight um t u mzmm Uev Maura mm lm mm an39a s tv Page 26 Common menus Help Menu Place access to online information about the features of the application in the Help menu Include About ltappnamegtquot as the last item and place a separator before the item About ltaDDnamegt should displav a window with the Droduct name version number comDanv logo Droduct logo legal notices and names of contributors Help i gtntems Imurial Index gear Aha ut MEIaIEIIit Contextual or popup menus Tips Ensure that all features presented in contextual menus are also available in more visible and accessible places such as dropdown menus Users might not know contextual menus are available especially if you do not use contextual menus consistently throughout your application Display keyboard shortcuts and mnemonics in contextual menus that are consistent with their usage in any corresponding dropdown menus Page 27 Common menus Menu Bar If your application needs the commonly used menus place the menu titles in this order File Edit Format View Help If needed insert other menus between the View and Help menus and sometimes between Edit and Viewx as appropriate Contextual or popup menus I Tips cont u t yo I 39 39 select the object under the pointer and diglaythe contextual menu 0 riate to that ob39ect eg if the object under the pointer is text display the contextual menu with editing comman 5 If the pointer is over an existig selection at the time the user opens the dimlau the u t If the cannot be se ected eg container bacground remove any existig 39 t39 J quot 39 L 39 menu for the container Toolbars General tips Include commonlv used menu items as buttons or other components in your toolbar Even if vour window has a toolbar make all toolbar commands accessible from menus Be sure to provide tooltips for alltoolbar buttons Consider providing text on toolbar buttons as a user option This makes the meaning of the button clear to new users and enables lowvision users to use large fonts Toolbars I Toolbar buttons Use button graphics that are either 16 x 16 or 14 x 14 pixels but not both application u 1 a 5 users If you use text on the toolbar buttons provide a user setting to display only the graphics setting in the toolbar 39 r Sometimes to create functional groupings of too barbuttons provide a separate toolbar for each h waver often not needed andor not practical Page 28 Toolbars General tips Because toolbars can be dif cult for users with motor impairments and are not alwavs regarded as a good use of space provide a wav to hide each toolbar in your application Provide large and small graphics eg 24 x 24 and 16 x 16 ixels in our a lication and enable users to select the large graphics in all parts of the application including the toolbars Toolbars Toolbar tips Ensure that the kevboard shortcuts for toolbar buttons match the kevboard shortcuts for the corresponding menu items Attach tool tips to all toolbar components that do not include text identifiers EEWE WW interesting tips generally use an onset of 250 ms and stay on for 15 secon If your application does not have menusx attach tool tips to the toolbar buttons in order to display keyboard shortcuts Code structure What s the best way to code up a window like design there s no best way really but we ll give you a good way Starting point remember the modelviewcontroller architecture Swing s components all have an implicitexplicit model separate from the view amp controller let s say we want a window to represent some chunk of information we want to separate the model of this information from its View amp controller Code structure Example Calendar Day Window class Day 9 class DayWindow extends JFrame Date date lt gt JTextField int dayOfWeek 4 gt JComboBox Event events lt 39 JTableTableMndel Page 29 Code structure Given our chunk of information model information view amp controller component let s have a Java class for each part Model ViewController class Mylnfo class MylnfoWindow extends JDialog includes all 4 includes all window s mo 9 information componeh ts Code structure For window classes we ll follow this style public class MylnfoWindcw exlends JFrame ltlt instance variables for our window frame gtgt class ltltMyListenergtgt implemenls ltltListenernterfacegtgt class ltltMyListenergtgt implemenls ltltListenernterfacegtgt MylnfoWindowMylnfo super lt ltnamegtgt lt lt create all components and add to frame gtgt ltlt add frame listeners gtgt for primary windows include main public static void main String s JFrame frame newMylnfoWindowMylnfo ltlt finish and display frame gtgt Handling multiple windows When do we use multiple windows One idea that s been proposed makes sense Treat windows like rooms each room should have a logical purpose eg kitchen bedroom basement etc eg document window find window etc keep things in one room as much as possible but don t cram rooms to the point of becoming cluttered and incoherent Handling multiple windows Passing information modal dialog gt frame in DayWindow we ll create the EventWindow when the user opens an event buttonaddActionListener newActionListener public void actionPerforrned Actionzvent e new Event 0 or edit selected event etc entWindow dialog new ventWindow frarne event dialog pa 0 dialogsetVisible true dialog interaction happens here while dial ogis visible when user hits OK following code co t39 s ifdialog event null that is event actually created day addEvent event Page 30 Handling multiple windows One way to think about our rooms recall our discussion of handling single windows can do the same for multiple windows Model ViewContmller class Day 3 class Event class DayWindow extends JFrame 3 class EventWindow extends JDialog 4 4 etc etc Handling multiple windows Passing information modal dialog gt frame in EventWindow we ll manage Event info when the user hits 0K okButtonaddActionListener newActionListener public void actionPerformed ActionEvent e if not created already create new event ewEvent mponents to data structure eventtitle titleTextFieldgetText 0 etc nowm window invisible thus passing control back to parent selfsetVisible false Question I What s nice about this interface What are some possible challenges in implementation Mans wan ru Ily Locum o RueK11 quotski nu ma y i am e arm was arman coo cw am or mu coo dealing witn strange input big adva ntage Two s flexible can provide input cnallenges intelligence required to u s g interpret flexible inp 39 erroneous or ut Question I What is the output 3 strings public class Animal public String foo ll return quotAnimalquot Animalx new Animal ll Systemoutprintln lxfoom Platypus y new Platypus 0 public class Platypus Systemoutprintln lyfoom extends Animal Animalz new Platypus 0 public String foo ll Systemoutprintln lzfoom return quotPlatypusquot public static void main stringn argsi Platypus Platypus Page ltgt Question I Name three reasons that GUls are hard to implement rather than design 50 of design implementation maintenance code size Multiprocessing uls are innerently concurrent Must dealwitn abort undo redo anytime lstate informationj Realtime equirements Must t lusers do lots of odd things APl Ul logic complexity proactive Hard to modularize OOP interface designj Exnaustive testing of uls is nard 7 now to ensure robustness Evaluation witn users is time consuming Question I Describe the model view and controller components of a menu Model nierarcny of functions toplevel groupings n39 acn grouping a set of logically related functions pernaps subgroupings submenusj witnin tnese menu bar across top or bottom enus as vertical lists optionally witn icons Controller pulldown nave to click and drag quotstick quot menu an click and tnen select once selected fires related action optionally keyboard mnemonics snortcuts Question I In pseudocode as close to real code as possible write a program to lay out the window below center new JPanel centersetLayout BoxLayoutYAXlS centeradd new JCo hoBox centeradd new JList centeradd new JL hel centeradd new JTextField pane frame tContentPane paneadd center paneadd east BorderLayout AST paneadd south BorderLayoutSOUTH east new JPanel eastsetLayout BoxLayoutYAXlS eastadd new JLahel Dingo ltlt for all buttons gtgt astadd new JButton ltltnamegtgt south new JPane southsetLayout BoxLayoutXAXlS southadd new JLahel Save southadd new JComhoBox save me aSYyDE Presentatlnn Dai n d mm was Unwm Question I What s the use in having Adapter classes public class WindowAdapter implements WindowsListener public void windowActivatedWindowEvent e public void windowClosedWindowEvent e public void windowClosingWindowEvent e public void windowDeactivatedWindowEvent e public void windowDeiconifiedWindowEvent e public void windowlconifiedWindowEvent e public void windowOpenedWindowEvent e redefine Instead of implementing the listener interface and having to specify amp implement every single method you can just extend the adapter class and override the functions you want to a an Cianh na may erwces my Question Question I For a calendar program you have the option of representing Hours with a combo box text field or radio buttons Name one advantage and disadvantage for each ComboBox A small space D fair number of options not too big but TextField A don t have to lift hands from keyboard assuming other input D need to check for errors RadioButtons A 2 maybe user can see all the options D lots of space lt an Wmm Uri i inmneri ai o yawn1 um Unix5mquot I Name the components that do require or might require a listener and for each state briefly what each listener would need to do quotFiguresquot ComboBox update the List disable quotEjectquot List ActionListener double click updates List and ComboBox different from ListSelectionListener which isn t needed here all buttons do related action and often update List quotSave Asquot ComboBox update file name A 0 mm Hmi Menace m aso uucni uw lrwweavy Page ltgt Lecture 2 Design amp Implementation Building user interfaces I Much of this process is smart good ol software engineering applicable to the GUI parts of the system applicable to nonGUI parts of the system I This course focuses on the implementation of the GUI parts I BUT We always keep in mind the other aspects of the process particularly design Page ltgt Humancomputer interaction I Humancomputer interaction is a discipline concerned with the design implementation and evaluation of interactive systems for human use and with the study of the major phenomena surrounding them The HCI lifecycle is an iterative cycle that involves designing and evaluating with quotusersquot as much as possible Mental amp implementation models I Implementation models describe how B as programmers think about the system there are many levels to these models eg when you write quotxquot we increment x but what happens in the processor cache I Mental models describe how the m thinks about the system not the same as the implementation model eg saving changes Word file vs file system eg TV and movie projection eg household electricity Represented models Designing for the mental model I Represented models fall between I Computer Science people build systems implementation and mental models Not surprisingly then most systems conform to implementation models Implementation Represented Mental I BOOk example Windows le system MOdels I drag file within drive eg C9C drive 9 file moves to new location drag file to another drive eg C9D drive 9 file is copied to new location why implementation of file system this puts the burden of understanding lowlevel file system details on the user 5 CS 338 Graph cal User Interfaces Dario Salvucci Drexel University C3 338 Graph cal User Interfaces Dario Salvucci Drexel University Designing for the mental model New technology amp mental models I Another example Word references I Sometimes new technology warrants link number to other part of the document breaking Old mental models carefully mental model this stays linked Example the good ol calendar implementation model link gets broken but f software doesn t correct makes you do it dddddddddddd av rrrrrrrrrrr av If File Edit View Insert Format Font Tools Table Draw Window I 6 7 s EEQEE39EELWETW LEmEVquot i EJ J 2 E Emstggg N 7 The link to Figure Error Reference source not found I clocsrftseem to work I I emaue q quotSignificant change must be significantly better 7 C3 338 Graph cal User Interfaces Dario Salvucci Drexel University C5 3323 Graph cal User lnte aces Dario Salvucci Drexel Univelsity Page ltgt Design amp implementation Summary I Good clean implementations facilitate good clean user interfaces efficient code leads to faster response well structured code leads to simple interfaces and simple is good easy to learn remember robust code doesn t crash I Good implementation doesn t make up for bad design and good design doesn t help a bad implementation I Implementation amp design go handinhandl WNW mm mm Design amp implementation tradeoffs I Example Mac OS X launcher design issues implementation issues E a Design amp implementation I Example Two webbased input interfaces design issues implementation issues mm mm gm mi so Seize o A l qavhxmecnyosmcm l 7 o Hm o W U S g When GUls work well I Shorter training time 9 lower costs I Fewer errors 9 less hassle lower costs I Less maintenance 9 less hassle lower costs I High transfer 9 lower future costs I In other words Good design saves time Good design saves money Page ltgt Why are good GUls hard to build Why are good GUls hard to build I Multiprocessing Uls are inherently concurrent multiple inputs redraws synchronization deadlock prevention I Must deal with abort undo redo anytime this requires lots of state info to be kept I Realtime requirements I Must be robust users do lots of odd things Thanks to Scott MacKenzie York U for the next few slidesll I API amp U logic complexity I Reactive instead of proactive the user dictates what the system should do I Hard to modularize OOP interface design I Exhaustive testing of Uls is hard how to ensure robustness I Evaluation with users is time consuming I And more Research Question of the Day Research Question of the Day I We ll spend lots of time worrying about the user interface part of an application I What s the big deal How important is this when implementing an application I Specifically how much programming in a typical system is devoted to the interface I Myers amp Rosson 1992 conducted this survey I They analyzed 74 systems of various flavors reman mailman m 0 m m m m sass saw 70 m Figure 1 Disuibuuon of survey responses across countries type t mpuler The Combinaiion pcs of compuiers at me same 5 stems were Figure 2 m gpendem y Tnml number of Iinss nrmdc on a log scale I39m the 68 em kmds of compuler Syslem mm rcpmmd n value Myers BA Et Rosson M B 1992 Survey on user interface programming In Human Factors in Computing Systems Proceedings of SIGCHI 92 pp 195202 New York ACM Press 39 fraplvwzlllzs inte nte aluminium vexklllnnhr39ity In Research Question of the Day I Result User interface required 448 of design time 501 of implementation time 370 of maintenance time Design Implementation Maintenance Research Question of the Day I Other interesting points prototypes amp evaluation o 46 built running prototypes o 17 used paperbased designs use of graphics o 70 2D graphics 14 3D graphics use of programming languages o 69 used C o others used many gt10 other languages o 58 used multiple languages in the same system Page ltgt Research Question of the Day I Interesting point although U 50 of code on average this varied greatly per system Figure 3 The percent of the codc devoted to Lhe user interface for the 71 systems LhBI reported a value How do we implement GUls I For many programs in CS coursework args stdou t fi les Pr gram files I For typical GUI applications input mouse keys etc a ou pu text images etc I This leads to a very different style of design and implementation Implementation basics I Our task for this course Learn how to build great GUIsI with a usercentered design I How we ll do this Implement GUIs in Java amp Swing I What is Java What is Swing History of Java I Has its beginnings as a way to create interaction animation on the Web I Its big selling point Portability quotworks evenwherequot citing Sun interpreted I Other selling points citing Sun again simple objectoriented robust high performance Page ltgt Java overview I Who here knows Java I What is this program s output public static void main String aigs Java program compilationexecution I The typical C program Java program compilationexecution I The typical Java program interpreter Java Virtual Machine VM Question I Why do we compile java program files to class bytecode files and interpret the class files I Why not just interpret java files directly They re platformindependent aren t they I Same question different context Why do web sewers transmit class files not java files Page ltgt End result of a Java program I Application Java Java 39java 39class OR Java machine 753ng executable I Applet Java overview I Many things resemble C basic types eg int double char variables declarations control structures eg ifthen for while switch classes and inheritance well the basics anyway I We ll very quickly review the essentials emphasizing the differences from C Basic data types amp literals I Many types you already recognize mostly char int long short float double boolean I Literals are straightforward too null true false 39A quotHiquot Strings I Concatenation operator quothiquots ssZ I Comparison methods equals startsWith I Utility functions replace trim toUpperCase toLowerCase I Good to knovm StringvalueOf basic type converts argument to string Basic operators I Again you recognize these arithmetic relational gt lt gt lt logical amp ampamp and more etc what s the difference between a and 33 Arrays I Declaration creation int a new int3 I Accessor 39 a1 I Runtime bounds checking How can Java do that Page ltgt Simple example Example ClickMe import javaioquot import javaxswingquot import javaawtquot piblic class Program1 import packages import javaawteventquot piblic static void main Stringn aigs piblic class ClickMe main declaration I Add any class or instance variables here public static void initialize 0 ilt1u i sum Systemoutprintln quotResult quot Stringvalueor sum I Add anyinitialization code here I This code will be called only once at the start of the program PS File must be named afterthe class quotProgram1java in this case J Example ClickMe Example ClickMe piblic static void buttonAction public static void main String args II Add code to handle a button click here initialize II This code will be called every tune the user clicks the button JButton button new JButton quotClick Melquot I Call the quotwindowPrintquot function to display text to the window buttonaddActionListener new ActionListener public void actionPerformed ActionEvent e buttonActiono windowPrint quotclickquot labelsetText quot 39 JPanel panel new JPanel 0 public static void windowPrint String s frame a P ck 0 labelsetText s framesetVisibletrue Page ltgt Exercise Primes I Start with the quotClickMequot program I Write a program quotPrimesquot initialization create array with primes use quotSieve of Eratosthenes cross out all multiples button click display primes in order don t do anything to change the quotClickMequot GUI just use initialize and buttonAction Function overriding I What is this program s output public class Animal plblic static void main Stringu aigs x new Animal public String foo Animal 0 t Systemoutprintln xfoo re urn quotAnimalquot public class Platypus extends An39 public String foo return quotPlatypusquot Page ltgt Classes and inheritance I What is this program s output public class Animal plblic static void main Stringu aigs public String foo return quotAnimalquot Platypus x new Platypus 0 Systemoutprintln xfoo public class Platypus extends An39 Function overriding 2 I How about this program public class Animal plblic static void main Stringu aigs public String foo Platypus x new Platypus 0 return quotAnimalquot Systemoutprintln xfoo public class Platypus extends An39 public String foo return quotPlatypusquot Function overriding 3 I How about this program public class Animal piblic static void main String aigs Animal x new Platypus Systemoutprintln xfoo public String foo return quotAnimalquot public class Platypus extends Animal public String foo return quotPlatypusquot Exercise Animals I Write classesinterfaces as follows Classes Animal boolean isAlive Fish Interfaces Swimmer String swimMethod Runner String runMethodO I Make sure to extend appropriate classes and implement appropriate interfaces Page ltgt Interfaces I An interface with a single method public interface ActionListener void actionPerformed ActionEvent e I We implement the interface as follows public c ass MyClassThatListens implements ActionListener public void actionPerformed ActionEvent e I Q How is an interface different from a class Variable declaration I Class vs instance variables plblic class Animal plblic int numberOfClaws plblic static int numberOfMammals piblic static void main Stringn aigs class variable Question I This program won t work Why not plblic class Test plblic int instlnt 1 plblic static int classlnt 1 plblic static void main String args int result instlnt classlnt Systemoutprintln Stringvalueor result Garbage collection I Time to take out the trash unused objects that is plblic class Animal plblic class Platypus extends Animal plblic class Cheetah extends Animal plblic class Program1 plblic static void main Stringu aigs Animal a new Platypus 0 a new Cheetah 0 Where is the platypusz PS Why is automatic garbage collection especially important for Java Page ltgt Exceptions I If a called method throws an exception the caller needs to catch the exception plblic class ltSomelOClassgt plblic void ltSomelOMethodgt ltif errorgt throw new lozxception 0 plblic static void main String args tryl ltSomelOMethodgt 0 catch lozxception e lthandle the errorgt Java and GUls I Platform independence for GUI applications has been notoriously hard I Java s first foray AWT Abstract Window Toolkit provided common code for widgets components such as windows buttons menus good first start but platform independence wasn t quite there AWT relied on windowing code on native machine so in practice somewhat flaky Java and GUls I Current Java 2 integrated JFC amp Swing I Swing GUI component toolkit including all widgets no native windowing code to improve on AWT I JFC Java Foundation Classes includes Swing components includes other software such as quotpluggable look and feelquot accessibility support for disabled I AWT still there but we can mostly ignore it Page ltgt Advantages of Java for our course I Shorter learning time I Portability across platforms with caveats I Breadth of builtin components I Extensibility to Web applications I And yes it s just plain cool Page ltgt Page ltgt Rgsearch dea tion of tha Day Research Questian of the Day Research Question Of the Day Researcl39 Question 0f the Day Page ltgt Page ltgt Major Trends in Computing quotmm m mullmen nm39y hemm 7w an Mm am mum i lmlunous cmmmmu lie Nisan my wuimlels we 2 Wm Page ltgt Welcome About me David Breen Assistant Professor CS Lecture 1 Email davidcsdrexeledu Office Universit Crossin s 114 Interfaces amp Users y g Office hours Wednesday 4 530 or email for an appointment About this course Syllabus timeline amp resources online httpwww csdrexeleduldavidClassesCS338 Who what where when why how What s a graphical gser interface 39 PrereqUi5it95 In the narrow sense 0 Lectures a graphical information channel between a user Readings and computer systemapplication eg most Windows Et Mac applications Ass gnments any interface with buttons menus etc widgets 39 Exams In the broader sense 39 Grading ATMs cell phones navigation devices etc 0 Communication GUls don t have to have standard widgets o Policies GUls don t have to be on your desktop Questions This course focuses on the first group but we ll keep the second group in mind Page 1 Why GUls Can present a lot of information in small area but still maintain readability Can present different types of information eg pictures animations Can store functions onscreen without forcing user to remember them Can provide directmanipulation interfaces with various input File Edit View Insert Format Font Tools Table Draw Windo ile a ormal v l imes 112 v B 1 g i is W Gian Focus of this course Prototype Wag CS 337 Psych HCI CS 338 GUI l 39 it I 39 W quot w lam Page 2 The GUI Life Cycle IA Prototype Design Evaluate To set the stage Some problems with GUls today software is rude Emu o eg inappropriate 39 or derogatow error messages software makes unwarranted assumptions o eg assumes user knows underlying mechanisms such as saving to a hard drive software is obscure o Use passive mode on FI39P proxy software exhibits inappropriate behavior o open Word document print it close it Save To set the stage Why do we have these problems we have a conflict of interest for whom exactly are we developing the system we lack a process how can we think like engineers to evaluate user needs and develop appropriate usable systems one simple common but notsogood process A A Research Design market graphic technical interaction U Developing GUI or any software Cooper s 5component process an an Research Modeling Requirements Framework Refinement users a use business a structure of behavior use contexts technical needs form context UUU users a the domain Anything missing from this picture Page 3 To set the stage But most importantly we re ignorant about users Assembler code 001 Linux C code 15 01 MS Windows 70 Television 98 Program any larguage 1 Usability gt rnmmumi Namenzie wkquot m an uivh Multidisciplinary nature of GUI amp HCI Human side cognitive psychology ergonomics and human factors sociology linguistics communication theow social and organizational psychology graphic and industrial design Thanks in Scull MauKenzie a YnikU inilhe nexl 2 slides Multidisciplinary nature of GUI amp HCI Machine side computer science engineering computer graphics operating systems programming languages software engineering development environments artificial intelligence Users users users Today we ll focus on the human side Soon we ll deal with the machine side How can we possibly deal with all the complexity of the human side of GUls one short answer It s hard one long answer See CS 337 our short answer KEEP THE USER IN MIND Page 4 Clips httpwwwdesigninginteractionscom interviewsBillAtkinson httpwwwdesigninginteractionscom interviewsStuCard Users at a lower level Users embody all aspects of being human Being human means having limitations visualattention visual processes motor processes cognitive processes eg noticing animation eg reading a word eg mouse movement eg memory a File Edit View Insert Format ant Tunls Table Draw Window l D aquot g m Narmal mg 231y N39 Users at a higher level Users have goals in using our GUls Usercentered design involves goals what is the user twing to accomplish needs what does the user need to do this user constraints what cancan t the user do task constraints what cancan t be done and lots of other things to consider Research Question of the Day When people surf the web they have goals the goals might be very specific eg find a paper the goals might be very general eg find acool news article or online game For typical web browsing what are users goals and how common are these goals Page 5 Example Web site design Jakob Nielsen39s Top Ten Mistakes in Web Design 1 Using Fra es 50 1 Gratuitous Use of BleedingEdge 6 Long Scrolling Pages Techn logy 7 Lac of Navigation Support 3 Scrolling Text Marquees and 8 NonStandard Link Colors Constantly Running Animations 9 Outdated Information 4 Complex u s u e y Long Download Times ls good design really this easy These are really just heuristics that keep the user in mind Research Question of the Day Byrne et al 1999 created a taskonomy of web browsing take users from a diverse population observe them in a natural environment analyze their verbal protocols amp extract goals And at the same time perform a task analysis of web browsing create categories amp subcategories of goals eg locate word image something interesting Byrne M D John B 5 Wehrle N s amp Crow n c 1999 The tangled web we wove Ataskonomy ofWWW use Humon Factors in Computing Systems Proceedings o CHI 99 544551 Reading MA Addison Wesley Research Question of the Day Byrne et al 1999 de ned 6 tasks use information read listen view download locate visual search go to display a new URL provide information username address configure change state of browser react respond to browserinitiated events Research Question of the Day Average Time sec A 0 Uselnfo Locale GoTD Configure React Providelnlo Page 6 Research Question of the Day n mi 500 200 m E 400 E 150 E 300 100 3 200 Z ioo 50 n r r r Fleaci F PmVIdelnftJ E gt Uselnlo Locate Ir GoTo Con gure Total Time min Optimizing for intermediates Cooper uses a bell curve argument Most users are neither beginners nor experts they are intermediates beginner intermediate He thus argues that we should optimize for intermediates Is this always the case for what systems does this make sense for what systems doesn t this make sense expert Dealing with beginners experts Personas Let s not forget the others One system won t make everyone happy Beginners need straightforward mental model sgoals good concise topical help need not be long 39 Have fun Experts need lots 0 shortcuts MgegseaLgoals directed specific unintrusive help 39 Be c mf rtabe Dale s goals Haul big loads Be reliable Personas Exercise CS Web Site How do we develop personas Research user interviews subjectmatter experts Check out the web site on the next page What s your gut reaction yikes ugly market research surveys yikes cool 39 etc just fine End production Each persona represents a yawn class of users in context persona is not an average person but an exemplar or canonical person with an associated range of behaviors Ok that s out of your system Now let s think about our users Page 7 Department of Computer Science Department of Computer Science C II o ege of Engineering Calendar Yndav s Evenu Nana smamau Annnuncements p myquot man mummy m Publication 1 W amputer ErapMcs u The IEEE mummy Serum Wm mum v m be Wmn m m xnmmmm mum Cnmpnmmn Franldm Awardcc V pm 2m Canfeyencz m Agnl 27 5quot unwm New ms sugary am 7 Mainnenanta 5 D m M mm W 1 lELEurrahan Lnnvcmm mu mcs Summur am A an Sammy tech blandI Sunday 2 39 4 w m 5 V Amman LA gm unnermeuuem Ann s m mum pamdpamsm u am a Laurse m6 arm ECCAD 2 Mavle Reun mbm w m n 5 x k 39 5gfyfgffgggfgw 4 w mmmw mm rm new Dapamnam hast an en Srmniy Cam jams m unaagrauume ISSAC 20a and 4 139 Computer same Enmputer Mm pm for 5mg m1 n 63 me thshl mmquot W my x 51 53553 MEN 535 mm I 5 m pmbvcm compura an 5393va ban up a 332339 my ummam Sshum Dmewmvemtv 2y nuiame nwmmmy m De artment of 4 39 39 39 Co muter Science gt V Exerc15e CS Web SIte D39P39mn39 Features Evenu h f h b r MW 0 W at are some personas or t e CS We MUIWDED r i V 7 7 namr mmngmshu Lecture Elev 39 V S I W KM WEDERMEM l n Zuzkev me ummmy Wm a mum mm m 5mmquot 1 V Je w wwwmm 5 y quotmums Wm A M e Wm 39 m gs m k m BMEnpwsnntspap sthlSSA Rm 17 usvc m 39 WW PIS Sammy umcu um Wamen m Camuutmg Sanity 9quot 93 th 3 EEE rYecM ca RL pnns Research an and 5mm anemsmnferenceatCMu V suautawnz cw w I F simg maziificgssm r Facu w Ustmgs 7 m sum mm 7 swan Um mart mm nuysmmms WWW x l 1 mmgmamalgam 1 c mm mmmmum csn we mmas Dr 5 Teams Hammad m CDHEEE mural Emsevve Va ettn newquot Cunwetmnn Lag m quot Pquotquot395 quot 9quot D user mlvum a Remmm rye m mam Fnshmnn Engineerinn nmnuminn Lab mmmmmwmmm Drumunwmav zincnnlnmsmmanduhu uwm mama v Dana mm mm Unwny 12 my WW new Unwemty 1 Page 8 1 m a Swing button SwingADDHcatlron SwIngAppHcation r i Layered Pane m a Swing bu nn39 felass Pane Cement Pane Page ltgt 5 312 7 me my H WW m s n eml 12374557 1L No Name MageLang Phone 1234567 Page ltgt 7 BomerLayoulDemn Bl tu 1 PAGESTARU Button 3 LINEisT R39D Elmoquot 2 CENTER 5 LINEiEND LongName Button 4 PAGEEND or er ayo aunan I warn mtnn WESY 2EEMVER Bumnnusr lulllrkurnzd nuuun 4 sumn j BoxLayout if Button1 2 Button 3 ButtonI LongNamed Button 4 Button 5 Button 3 Button 4 Button 5 Page ltgt EJEI Bullon I Bullnn 5 lull Named Bulloll 4 Ell un 5 fluwlayuut 39 El 39Flquayuu 7 7 7 7 Lon Named Button 4 Bullon I 2 auuon 3 Button I 2 g Lnng Nnmed sumquot 4 3mm 5 Buuon 3 39 Button 5 LungAHnmcd Buuon 4 7 7 Bumn5 Ca rd Layout Panel wuth lButtnns vj Button 1 Bunnn 2 Button 3 39 one three 1WD 4 1 39 1 Without honznmal glue with honzm wtal g ue Pageltgt P SwmgADDliCanon A J39m a Swing hunnn swungAD l39m 3 Swing humm J3nt Lawn crym CHIan ma Emma Eznlerd Cenler s smumz mums swam Bo um3 Page ltgt BorderLayout 0 IIIEIII IIEMHII IIEMIII GridLayout 031010 BorderLayom 0 BoxLayom vAXIs IIIIMMIIIII Center FlowLayout 0 vertical glue iiiii iiiii Em n a Pageltgt ew Insert Furmat Font Tunls Table Draw v Times B I Page ltgt NB Pseudocode NB Pseudocod Page ltgt Page ltgt Page ltgt Page ltgt Again there is no multip e inheritance in Java Page ltgt Research Question 0f the Day Research Questmn of the Day Research Qu atian csfquot the Day Page ltgt


Buy Material

Are you sure you want to buy this material for

25 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Anthony Lee UC Santa Barbara

"I bought an awesome study guide, which helped me get an A in my Math 34B class this quarter!"

Bentley McCaw University of Florida

"I was shooting for a perfect 4.0 GPA this semester. Having StudySoup as a study aid was critical to helping me achieve my goal...and I nailed it!"


"Their 'Elite Notetakers' are making over $1,200/month in sales by creating high quality content that helps their classmates in a time of need."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.