eCommerce Technologies

Adding Visual Appeal to eCommerce Websites

MIS 4453 -- Spring 2004

Instructors:Kelly Fish, Ph.D.John Seydel, Ph.D.

Student Objectives

Compare and contrast graphics image typesDiscuss why file size is an important consideration Perform basic image editing tasks using MS Photo EditorSummarize image design concepts for the WebDiscuss the web graphics development processAs 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 intuitiveInappropriate graphics, however, can destroy the messagePrinciples 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., 28) colors 24 bit = 16.7 million (i.e., 224) colors Thus, better color means bigger files

What’s the deal about 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 playerUsing 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) Right-click Alternatively, screen print

CroppingResizing:

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 imagesAdvantages of GIF: Typically smaller file sizes Features: animation, transparency, interlacing Applications: logos, buttons, icons, etc.

Vector graphics are thus an alternative to GIFFile size comparisons . . .

Some Image Design Guidelines

Use sparingly to avoid clutter and to control load timeArrange to achieve balance with text and white spaceMaintain contrasts when using background imagesKeep 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 feasible

Also: use thumbnails and add warnings

Always specify width and height in markup; this reserves space while the images load

<img src=“images/logo1.gif” width=“250” height=“50” alt=“Logo” />

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 appealExample: ASU’s College 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-1Three phases

Phase 2:Design andDevelopment

Phase 3:Web Site Testing

Phase 1:Front- and Back-EndAnalyses

Front/Back End Analyses

Needs assessment What kind of business Target customers Consider book retailer versus toy store

Internet service speeds available and bandwidth requirementsCost/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 logoColor 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 cameraAnimated text (use sparingly)

Testing

Locally, where developedRemotely, through the web (from a remote server)Varying monitors Sizes Color depths

MacIntosh and Windows systemsVarious browsers and versions

Some More Flash (If Time)

Rollover buttons Example: EconDSci website Exercise

Shape tweening exerciseAnother look at the markup

Summary of Objectives

Compare and contrast graphics image typesDiscuss why file size is an important consideration Perform basic image editing tasks using MS Photo EditorSummarize image design concepts for the WebDiscuss the web graphics development processReinforce/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 ComparingCreate 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

stagePublish (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 fashionNote

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 LawCost/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 pagesText fonts, styles and colorHorizontal lines and tablesHyperlinks and navigation buttonseMail linksFrames and formsGraphic arts and images

Phase 3: Web Site Testing

Local-host testingTest on developer’s

computer

Server-side testingTest between server and

developer's computer

Client-side testingTest with various

configurations and browsers at different places and times

An Exercise: A Rollover Button

Open new file, set zoom, and turn on gridCreate 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” framePreview (click on Control | Enable Simple Buttons)Return to Scene 1 (standard editor) and modify location and stage sizeSave 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 fillSelect frames 2-9 (press Control key and then drag)Turn off onion skinningRun 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