Week 9: Interactive Software Design

What is usability in design?

Usability is a quality attribute referring to: - Ease of use - Ease of learning - Appropriateness to the task Poor usability leads to confusion, errors, and poor adoption.

What are Don Norman’s design principles?

1. Visibility: Functions should be visible so users know what to do.

2. Feedback: Inform users about what has been done.

3. Constraints: Restrict user actions to prevent errors.

4. Mapping: Natural relationship between control and effect.

5. Consistency: Similar actions produce similar results.

6. Affordances: Design elements suggest usage.

Examples of Norman's principles in use?

- Visibility: A glowing "Add to Cart" button.

- Feedback: "Added to Cart" toast.

- Constraints: Disable checkout if fields are empty.

- Mapping: Checkout flows left-to-right.

- Consistency: Same UI across pages.

- Affordances: Book cover enlarges on hover.

What are Jakob Nielson’s 10 usability heuristics?

1. Visibility of system status

2. Match between system & real world

3. User control & freedom

4. Consistency & standards

5. Error prevention

6. Recognition rather than recall

7. Flexibility and efficiency

8. Aesthetic and minimalist design

9. Help users recover from errors

10. Help & documentation

Examples of Nielson’s heuristics in online bookstores?

- Status: "Payment processing..." message

- Real-world match: "Cart" icon for orders - Freedom: Remove book from cart

- Consistency: Same search bar on all pages

- Error prevention: Input validation

- Recognition: Recent searches auto-filled

- Flexibility: 1-click checkout

- Minimalist: Clean layout, no clutter

- Error help: "Card declined. Use another method."

- Help: FAQs, tooltips, Help Center

What is Fitts' Law?

Predictive model for user movement: - Time = a + b * log2(2D/W)

- Time to target increases with distance (D), and decreases with target width (W) - Design implication: Make clickable targets large and close

Examples of Fitts' Law in design?

- Large "Buy Now" button for fast access

- Frequently used actions placed near screen corners

- Avoid small buttons in hard-to-reach places

Architecture Overview

What are the responsibilities of the Presentation Layer (Frontend)?

● Web App (React, Angular, Vue.js)

● Mobile App (iOS, Android, Flutter, React Native)

● Responsibilities:

○ User registration, login

○ Book browsing, search, and filtering

○ Shopping cart management

○ Order placement and tracking

○ Payment integration UI

What components make up the Application Layer (Backend)?

Can be monolithic or microservices-based, depending on scale. Here are the common components/services: Core Microservices: 1. User Service ○ Handles registration, login (OAuth/jWT), profile management

2. Book Catalog Service ○ Stores and retrieves book metadata, categories, authors, inventory info

3. Search Service ○ Full-text search engine (e.g., Elasticsearch) for books

4. Shopping Cart Service ○ Manages user carts, adding/removing items

5. Order Service ○ Handles order placement, history, and status

6. Payment Service ○ Integrates with payment gateways (Stripe, PayPal)

7. Review & Rating Service ○ Allows users to rate and review books

8. Notification Service ○ Email/SMS notifications (order confirmation, updates)

What supporting components enhance backend architecture?

Supporting Components:

● API Gateway: Central point for routing and rate limiting

● Authentication Service: Token-based auth (JWT/OAuth 2.0)

● Admin Dashboard: For store staff to manage books, orders, users

What technologies are used in the Data Layer?

● Relational Database (PostgreSQL/MySQL): Core data like users, books, orders

● NoSQL Database (MongoDB/DynamoDB): Unstructured data, reviews, etc.

● Search Engine: Elasticsearch for fast text-based search

● Cache: Redis or Memcached for performance (sessions, hot items)

● Blob Storage: S3 or similar for book covers, PDFs (if e-books)

What are key security considerations in the architecture?

● HTTPS everywhere

● Authentication and authorization (JWT, OAuth2)

● Input validation and sanitization

● Rate limiting and CAPTCHA for bot protection

● PCI-DSS compliance for payments

● Role-based access for admin/staff

What are optional enhancements for scalability and monitoring?

● Cloud Deployment: AWS / Azure / GCP

● CI/CD Pipeline: GitHub Actions, Jenkins

● Monitoring & Logging: Prometheus, Grafana, ELK Stack

● Containerization: Docker + Kubernetes for scaling

Relationship of the different services:

The logical architecture diagram

Sequence Diagrams for the online bookstore system

The sequence diagram illustrates how the online bookstore system processes a user's journey, from logging in to completing a book order. The process begins when the system prompts the user to log in. After verifying the credentials, the user can browse the catalog to search for a book. If the requested book is unavailable, the system notifies the user and may suggest alternatives. If the book is available, the system provides pricing and shipping details. The user can then proceed to checkout, where the system collects personal and payment information, processes the transaction, and generates an order confirmation. Finally, the system arranges for the book to be shipped to the user's address. This sequence diagram provides a structured overview of the system’s workflow, including handling both successful and unsuccessful book searches.

Activity Diagram

Relationships Between Classes

Class Diagram