ecommerce technologies adding visual appeal to ecommerce websites mis 4453 -- spring 2004...
TRANSCRIPT
![Page 1: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/1.jpg)
eCommerce Technologies
Adding Visual Appeal to eCommerce Websites
MIS 4453 -- Spring 2004
Instructors:Kelly Fish, Ph.D.John Seydel, Ph.D.
![Page 2: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/2.jpg)
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
![Page 3: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/3.jpg)
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 . . .
![Page 4: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/4.jpg)
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?
![Page 5: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/5.jpg)
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
![Page 6: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/6.jpg)
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
![Page 7: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/7.jpg)
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 . . .
![Page 8: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/8.jpg)
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” />
![Page 9: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/9.jpg)
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
![Page 10: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/10.jpg)
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
![Page 11: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/11.jpg)
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
![Page 12: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/12.jpg)
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
![Page 13: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/13.jpg)
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)
![Page 14: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/14.jpg)
Testing
Locally, where developedRemotely, through the web (from a remote server)Varying monitors Sizes Color depths
MacIntosh and Windows systemsVarious browsers and versions
![Page 15: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/15.jpg)
Some More Flash (If Time)
Rollover buttons Example: EconDSci website Exercise
Shape tweening exerciseAnother look at the markup
![Page 16: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/16.jpg)
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
![Page 17: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/17.jpg)
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 . . . ?
![Page 18: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/18.jpg)
Appendix
![Page 19: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/19.jpg)
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 . . . ?!
![Page 20: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/20.jpg)
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
![Page 21: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/21.jpg)
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)
![Page 22: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/22.jpg)
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, . . .
![Page 23: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/23.jpg)
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
![Page 24: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/24.jpg)
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
![Page 25: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/25.jpg)
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
![Page 26: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/26.jpg)
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
![Page 27: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/27.jpg)
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
![Page 28: eCommerce Technologies Adding Visual Appeal to eCommerce Websites MIS 4453 -- Spring 2004 Instructors: Kelly Fish, Ph.D. John Seydel, Ph.D](https://reader036.vdocuments.site/reader036/viewer/2022081603/5697c0291a28abf838cd7242/html5/thumbnails/28.jpg)
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