CS160 Final ReviewAdvertisement…Final Exam ReviewMobile EvaluationSlide 5DesignDesign is…Design SummaryUI ImplementationStroke ModelProblems with Stroke Model?Pixel ModelCanvasGraphics ContextColor ModelsInteractor TreeMain Event LoopPlatforms - PCPlatforms - WebThe Cell Phone IndustryInteractive ProgrammingCallbacksThreadsWhat’s in a threadWays for threads to communicate and synchronizeModel View Controller (MVC)Sensori-Motor ModelsColor: RetinaSlide 29Color BlindnessModel Human ProcessorThe Model Human ProcessorMemoryMHP BasicsFitts’ LawFitts’ Law ExampleStage TheoryDesign PatternsSlide 39Home page designSolution sketchQuantitative Evaluation MethodsQuantitative StudiesRandom variablesDetecting differencesVariable typesSignificanceT-testAnalyzing the NumbersStatistics with care:Using SubjectsBetween subjectsWithin subjectsSocial Psychology and CSCWSocial PsychologyMere presence – Design ImplicationsAttribution theoryAttribution theory – design implicationsNon-verbal communicationCSCW: Computer-Supported Cooperative WorkAsynchronous GroupwareHuman Learning and HelpWhy Study Human Learning?ZPD: Zone of Proximal DevelopmentMetacognitionPiaget: Stages of learningTypes of HelpSlide 68Slide 69Slide 70Speech InterfacesSpeech: the Ultimate Interface?But Computing is MovingSpeech UIsTen Guidelines for Speech InterfacesLocalizationInternational IssuesIntercultural IssuesHofstede’s 5 Dimensions of CultureUX Issues Related to Culture, 1/4UX Issues Related to Culture, 2/4UX Issues Related to Culture, 3/4UX Issues Related to Culture, 4/4Information Visualizationaugmented cognitionbasic types of data elementsbasic types of visual encodingssensemaking tasks [Card et al]interactive tasks [Shneiderman]characterizing the visualizationinfovis reference modelGood Luck!CS160 Final ReviewMay 2, 2006Advertisement…Looking for someone who will be around this summer and would like some occasional (contract) work.Sign up with me if you’re interested.Final Exam ReviewExam will cover the entire semester (2/3 vs. 1/3 split), this review is over the second halfSelected slides from lecture – but not guaranteed to contain everything you need to know!Ask questions about the things that you don’t understand.Mobile EvaluationMobile EvaluationKjeldskov and Stage evaluated a mobile application in the lab, on a treadmill, and walking down the streetTask Load Index (TLX) increased…Other possibilitiesExperience Sampling (ESM)Diary Studies (Feedback and Elicitation)DesignDesign is…About function: Good designs support user tasksAbout form:Good designs should be a pleasure to useDesign SummaryOne design strategy follows Bauhaus principlesForm Follows Function Economy of FormIntegrity of Materials General design principlesSimplicityGrid-based DesignInspection and critique of other sitesUI ImplementationDescribe image as strokes (w/ color/thickness)Line ((10, 4), (17,4), thick 2, red)Circle (( 19, 13), radius 3, thick 3, white)Maps to early vector displays & plottersMost UI toolkits have stroked objectsarcs, ellipses, rounded rectangles, etc.Stroke ModelProblems with Stroke Model?How would you represent with strokes?Solution?Pixel ModelBreak-up complex images into discrete “pixels” & store color for eachResolutionSpatial: number of rows by columnse.g., 1280 x 1024 is a good monitor displayQuality laser printer: 10200 x 13200 (1200 dpi)Image depth (i.e., number of bits per pixel)Several styles... 8-bit, 24-bit, 32-bitCanvasAbstraction for the drawing surfaceMost toolkits support oneDefines methods used for drawingEach instance has a height, width, & defines its physical unitsUse the same method interface forWindowsImage in memoryPrinted outputCalled Graphical Device Interface (GDI) by MSGraphics ContextCould specify with:void Canvas::Rectangle (x1, y1, x2, y2, lineWidth, lineColor, fillColor)Lots of parameters!shapes have properties in commongeometry, line/border width, line/fill color, patternUse current settings of canvasUsually there is a “graphicscontext” or similar abstraction that defines all the parameters needed for drawing.Color Models256 levels for each primary color-> 24 bits / pixelRGB modelSpecify color by red, green, & blue componentsHSV model - hue, saturation, & valueHue is primary wavelength (i.e., basic color)Saturation is a measure of how pure color isValue is intensity (dark vs. light)Interactor Tree7894560+-123= 93.54ENTDisplay ScreenOuter Win [black]Result Win [tan]Result StringInner Win [g reen]Keypad [Teal]- button+ button0 button= button//// See bo ttom of file for software licen sepackage edu.be rkeley.guir.lib.satin;import java.aw t.*;import java.aw t.event.*;import edu.berkel ey.guir.lib.sat in.o bjects.*;/*** Satin constan ts.** <P>* This software is distributed und er the * <A HREF="http://gu ir.cs.berkeley. edu/projects/COPYRIGHT.txt">* </PRE>** @version SATIN-v2.1-1.0.0, Aug 11 2000*/public interfa ce SatinConstants {//=== =========== ====== ====== ======== ========== ====== ====== ====== ======= ======//=== G LOBAL SATIN PROPERTIES =========== ======= =========== ====== ==== ====/*** The nam e of Satin's properties file. Assum ed to be in the cur rent* directory, f rom which Satin is started (vi a the java int erpreter).*/public s tatic final String SATIN_PROPERTIES_FILENAME = "satin.properties";//=== GLOBAL SATIN PROPERTIES == ======= ======== ======= ========= ===== =====//=== =========== ====== ====== ======== ========== ====== ====== ====== ======= ======//=== =========== ====== ====== ======== ========== ====== ====== ====== ======= ======//=== S TYLE PROPER TIES ========= ======= ===== ======= ======== ========= =====//// If y ou add any n ew Style properties, be s ure to update the//// Sty le.java file too.public static final String KEY_STYLE_FILLCOLOR = "FillColor";public s tatic final String KEY_STYLE_FILLTRANSPARENCY = "FillTransparency";public static final String KEY_STYLE_MITERLIMI T = "MiterLimit ";public s tatic final String KEY_STYLE_DASHARRAY = "DashArray";public s tatic final String KEY_STYLE_DASHPHASE = "DashPhase";//=== S TYLE PROPER TIES ========= ======= ===== ======= ======== ========= =====//=== =========== ====== ====== ======== ========== ====== ====== ====== ======= ======} // of inter fac e//===== ===== ======= ======== ===== ======= ===== ======== ======= ===== ==== =======
View Full Document
Unlocking...