eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D.

Student Objectives Compare and contrast graphics image types Discuss why file size is an important consideration Perform basic image editing tasks using MS Photo Editor Summarize image design concepts for the Web Discuss the web graphics development process As time permits, reinforce/extend Flash skills Incorporate Flash objects into web pages Create rollover button using Flash Use tweening for animations

Graphics: A Two-Edged Sword Communicative power: a picture’s worth a thousand words and is far more interesting and intuitive Inappropriate graphics, however, can destroy the message Principles Difference/similarity to print Compressed image formats Simplicity Keep loading time in mind Design with the client in mind Let’s explore these principles...

Comparing Web Graphics to Print Images Resolution rather than DPI is what matters Typical resolutions  640x480  800x600  1024x768 Adding pixels to image doesn’t make it sharper, just bigger Color depth: amount of memory allotted to a pixel 8 bit = 256 (i.e., 2 8 ) colors 24 bit = 16.7 million (i.e., 2 24 ) colors Thus, better color means bigger files What’s the deal about bigger files?bigger files

Image Types for the Web Bitmap graphics Uncompressed: BMP (don’t use!) Compressed:  JPEG: loads line at a time (more colors, 24 bit)  GIF: loads increasing levels of clarity (interlacing) Vector graphics (e.g., Flash): scalable, typically smaller, but require player Using a scanner (or digital camera) TIF is a typical format Needs to be converted to JPEG or GIF Demonstration

Some Basic Editing (via PhotoEd) Capturing images from other websites (if given permission)permission Right-click Alternatively, screen print Cropping Resizing: Simple, but can lead to deterioration of image quality Best to use software that resamples (e.g., FrontPage image editor) Adding transparency (e.g., background image) Choose pixel color to make transparent Must convert file type to GIF Determining image properties (right-click on image) For width and height attributes For generating image maps Touchup Includes: sharpen/soften; levels; pixel level modifications Use sparingly Alternatives to PhotoEd: PhotoShop; PS Pro; FrontPage

Which to Use: JPEG or GIF (or Flash)? JPEG: appropriate for photographs and other intricate images Advantages of GIF: Typically smaller file sizes Features: animation, transparency, interlacinganimation Applications: logos, buttons, icons, etc. Vector graphics are thus an alternative to GIF File size comparisons...comparisons

Some Image Design Guidelines Use sparingly to avoid clutter and to control load time Arrange to achieve balance with text and white space Maintain contrasts when using background images Keep small (page should take no more than 10 seconds to load at 28 kbps) Reduce size  Less than 50 kb per image  No more than 100 kb total per page  Limit buttons to 2 kb and re-use when feasiblere-use Also: use thumbnails and add warningsthumbnails Always specify width and height in markup; this reserves space while the images load

Effectiveness Through Simplicity Good graphics provide emotional appeal Eye-catching Balanced Attractive Of course, rational appeal is also needed Logical arrangement Useful information Simple designs combine emotional and rational appeal Example: ASU’s College of BusinessCollege of Business

Know Your Clients First of all, who is the “client”? Actually a twofold clientele exists: Firm sponsoring the website Patrons of what the website offers Small images for customers involved in Chatting Shopping Information searching Large images for businesses dependent upon photos Real estate Art

Web Graphics Design Model Integrates with web design model summarized in Table 2-1 Three phases phases Phase 2: Design and Development Phase 3: Web Site Testing Phase 1: Front- and Back-End Analyses

Front/Back End Analyses Needs assessment What kind of business Target customers Consider book retailer versus toy store Internet service speeds available and bandwidth requirements Cost/benefit analysis Use free graphics (sparingly) Use development tools that save time Determine tools needed Scanner (quality?) Imaging and editing software (Flash?) Digital camera

Design/Development/Editing Site logo Color coordination Background Text (employ good contrast) Colored text can reduce need for graphics files (keeps load time down) Navigation buttons Images Attractive text Photos: scanned or direct from digital camera Animated text (use sparingly)

Testing Locally, where developed Remotely, through the web (from a remote server) Varying monitors Sizes Color depths MacIntosh and Windows systems Various browsers and versions

Some More Flash (If Time) Rollover buttons Example: EconDSci websiteEconDSci Exercise Shape tweening exerciseexercise Another look at the markup

Summary of Objectives Compare and contrast graphics image types Discuss why file size is an important consideration Perform basic image editing tasks using MS Photo Editor Summarize image design concepts for the Web Discuss the web graphics development process Reinforce/extend Flash skills Incorporate Flash objects into web pages Create rollover button using Flash Use tweening for animations

For Next Time Chapter 3 Hands-On Exercise (page 66) Scan/convert conference image Use PhotoEd and Flash (not PS Pro) Also, not Orlando!? Flash exercises Complete previous exercise if not already done Create rollover button Create shape tweened image Incorporate on personal pages and conference site Any questions... ?

Appendix

Internet Service Comparisons POTS: phone modem (56) ISDN: both analog & digital (128) Cable modem: sharing channel (768/10,000) T1: leased line (1,544) DSL: private line (640/9,000) T3: leased line (44,700) ATM: asynchronous transfer (622,000) Internet 2: mostly a concept (1,000,000) Where does broadband fit in? So what... ?!

Copyright Law & Intellectual Property If it’s on the web, it’s copyrighted Seek permission to use Sometimes, fair use applies Applies to graphics and software “Free” software: Shareware Freeware Beta versions

Let’s Do Some Comparing Create a static button in Flash Rectangle with rounded corners and gradient fill White text: “Home” Snap to grid: 8 x 2 (near top left of stage) Resize stage to 155x50 and then center button on stage Publish (i.e., save as web page) Create GIF version Click on File | Export Image Provide name and indicate type = GIF Then, in dialog box, select  Full Document Size  Transparent  Smooth Create JPEG version in similar fashion Note File size Quality (add GIF and JPEG to web page, then tinker)

Phase 1: Front/Back End Analyses Needs assessment What kind of business (strategy, revenue model,...) Target customers; consider book retailer versus toy store (ASU... ?) Evaluation of hardware/software (and other aspects of resource system) Users: bandwidth, user agents,... Determine tools needed to build/provide website and deliver product or service involved  Imaging and editing software (Flash?)  Development environment (e.g., VStudio)  Trial versions available, but beware Consider technology trends; recall Moore’s Law Cost/benefit analysis Costs: hardware/software, strategy development, web development/outsourcing, site management/maintenance Benefits: faster/better service, customer loyalty, better CRM, flexibility, lower inventory,...

Phase 2: Design and Development Home and content pages Text fonts, styles and color Horizontal lines and tables Hyperlinks and navigation buttons links Frames and forms Graphic arts and images

Phase 3: Web Site Testing Local-host testing Test on developer’s computer Server-side testing Test between server and developer's computer Client-side testing Test with various configurations and browsers at different places and times

An Exercise: A Rollover Button Open new file, set zoom, and turn on grid Create basic button Rectangle at 36 x 180 (2 x 10 on grid)  Rounded corners (20 pixels)  Stroke: 10 pixels and red  Fill: red gradient Add text (“Home”)  Size = 24 point  Font = Arial  Color = White Convert to symbol  Rectangular select  Click on Insert | Convert to Symbol  Name btnHome and check Button box Assign URL: Window | Actions | BrowserNetwork | getURL Create rollover effects

Button Rollover Effects Open button in symbol editor Note difference in timeline Only four frames: Up, Over, Down, Hit Create mouseover effect Select “Over” frame and then Insert | Keyframe Modify button Repeat for “Down” frame Preview (click on Control | Enable Simple Buttons) Return to Scene 1 (standard editor) and modify location and stage size Save for web use (File | Publish) Test/modify the web page

Basic Shape Tweening Exercise Open new file and Turn on grid/snap Zoom to 75% Create circle near center (red stroke & gradient fill) On timeline, select frame 10 Click on Insert | Blank Keyframe Press Onion Skin icon Use line tool to draw triangle slightly larger than circle (black stroke) Use bucket tool to fill triangle with gray gradient fill Select frames 2-9 (press Control key and then drag) Turn off onion skinning Run the animation With control bar (Window | Toolbars | Controller) Or drag playhead on timeline

Some Enhancements Turn on looping (Control | Loop Playback) Reverse the action Copy frame 10 to frame 11 Copy frame 1 to frame 20 Tweening is automatically copied! Now, run the animation