Scribd Logo
Upload

Welcome to Scribd!

  • Ammar's Interface Design

    Uploaded by

    lord moriartea
    15 views5 pages
    The document contains information about a student named Ammar Ahsan including their enrollment and admission numbers. It describes an experiment to design an interface that follows three golden rules: consistency, enabling frequent users to use shortcuts, and allowing for easy reversal of actions. It then provides HTML code for a restaurant booking website interface that demonstrates these three rules.

    Original Description:

    himanshu

    Original Title

    HCI ETE Experiment

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains information about a student named Ammar Ahsan including their enrollment and admission numbers. It describes an experiment to design an interface that follows three golden rules: consistency, enabling frequent users to use shortcuts, and allowing for easy reversal of actions. It then provides HTML code for a restaurant booking website interface that demonstrates these three rules.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views5 pages

    Ammar's Interface Design

    Uploaded by

    lord moriartea
    The document contains information about a student named Ammar Ahsan including their enrollment and admission numbers. It describes an experiment to design an interface that follows three golden rules: consistency, enabling frequent users to use shortcuts, and allowing for easy reversal of actions. It then provides HTML code for a restaurant booking website interface that demonstrates these three rules.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Name : Ammar Ahsan

    Adm no : 18SCSE1180067
    Enroll no : 18021180065
    Section : AI & ML P1

    Experiment : Design an interface using your own idea and show that your
    interface holds any three golden rules.

    The three golden rules in this interface are :


    1) Strive for consistency:- by utilizing familiar icons, colors, menu hierarchy, call-to-actions,
    and user flows when designing similar situations and sequence of actions. Standardizing the
    way information is conveyed ensures users are able to apply knowledge from one click to
    another; without the need to learn new representations for the same actions. Consistency
    plays an important role by helping users become familiar with the digital landscape of your
    product so they can achieve their goals more easily.

    2) Enable frequent users to use shortcuts. :-With increased use comes the demand for quicker
    methods of completing tasks. For example, both Windows and Mac provide users with
    keyboard shortcuts for copying and pasting, so as the user becomes more experienced, they
    can navigate and operate the user interface more quickly and effortlessly.

    3)Permit easy reversal of actions:-Designers should aim to offer users obvious ways to
    reverse their actions. These reversals should be permitted at various points whether it occurs
    after a single action, a data entry or a whole sequence of actions.

    code :

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-
    to-fit=no">

    <link rel="stylesheet" href="index.css">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
    " integrity="sha384-
    ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">

    <title>ORDER US!!</title>
    </head>
    <body>

    <nav>
    <ul class="nav-flex-row">
    <li class="nav-item">
    <a href="aboutus.html">About Us</a>
    </li>
    <li class="nav-item">
    <a href="reservation.html">Subscriptions</a>
    </li>
    <li class="nav-item">
    <a href="menu.html">Order Now</a>
    </li>
    <li class="nav-item">
    <a href="shop.html">Cheif special</a>
    </li>
    <li class="nav-item">
    <a href="contact.html">Contact Us</a>
    </li>
    </ul>
    </nav>

    <section class="section-intro">
    <header>
    <h1>ORDER US!!!!!!!!!!</h1>
    </header>
    <div class="link-to-book-wrapper">
    <a class="link-to-book" href="#reservations">Book a table</a>
    </div>
    </section>

    <section class="about-section">
    <article>
    <h3>
    Section for the text why your restaurant is the best.
    </h3>
    <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    A quos, voluptatum illum mollitia dolores libero placeat
    nesciunt quasi adipisci impedit!Lorem ipsum dolor sit,
    amet consectetur adipisicing elit.
    A quos, voluptatum illum mollitia dolores libero placeat
    nesciunt quasi adipisci impedit!
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    A quos, voluptatum illum mollitia dolores libero placeat
    nesciunt quasi adipisci impedit!Lorem ipsum dolor sit.
    </p>
    </article>
    </section>

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">


    <div class="carousel-inner">
    <div class="carousel-item active">
    <img src="img/rachel-park-hrlvr2ZlUNk-unsplash.jpg" class="d-block
    w-100" alt="food">
    </div>
    <div class="carousel-item">
    <img src="img/lily-banse--YHSwy6uqvk-unsplash.jpg" class="d-block
    w-100" alt="food">
    </div>
    <div class="carousel-item">
    <img src="img/brooke-lark-aGjP08-HbYY-unsplash.jpg" class="d-block
    w-100" alt="food">
    </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls"
    role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls"
    role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>

    <div class="container">
    <div class="row-flex">
    <div class="flex-column-form">
    <h3>
    Make a booking
    </h3>
    <form class="media-centered">
    <div class="form-group">
    <p>
    Please leave your number we will call to make a
    reservation
    </p>
    <input type="name" class="form-control"
    id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter your
    name">
    </div>
    <div class="form-group">
    <input type="number" class="form-control"
    id="exampleInputphoneNumber1" placeholder="Enter your phone number">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    </div>
    <div class="opening-time">
    <h3>
    Opening times
    </h3>
    <p>
    <span>Monday—Thursday: 08:00 — 22:00</span>
    <span>Friday—Saturday: 09:00 — 23:00 </span>
    <span>Sunday: 10:00 — 17:00</span>
    </p>
    </div>
    <div class="contact-adress">
    <h3>
    Contact
    </h3>
    <p>
    <span>000 9283 8456</span>
    <span>15 Florida Ave</span>
    <span>Palo-Alto, 1111 CA</span>
    </p>
    </div>
    </div>
    </div>
    </body>

    </html>

    Screenshot(OUTPUT)

    You might also like