intsav.github.io/EchoUI.html at main · intsav/intsav.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>EchoUI</title>
  <link href="assets/img/logo.png" rel="icon">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/css/style.css" rel="stylesheet">
</head>

<body>
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">
      <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>
      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto" href="index.html">Home</a></li>
          <li><a class="nav-link scrollto" href="#footer">Contact</a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav>
    </div>
  </header>

  <section id="project-title" class="d-flex align-items-center">
    <div class="container position-relative" data-aos="fade-up" data-aos-delay="100">
      <div class="row">
        <div class="col-12 text-left">
          <h1>Designing Adaptive and Explainable User Interfaces for Real-Time AI-Guided Echocardiography</h1>
          <h2><i>University of West London – School of Computing and Engineering</i></h2>
          <h3>In Collaboration with the <a href="https://www.imperial.ac.uk/nhli/" target="_blank" rel="noopener noreferrer">National Heart and Lung Institute</a></h3>
        </div>
      </div>
    </div>
  </section>

  <main id="project-main">
    <div class="container">
      <hr>
      <div class="row justify-content-left">
        <div class="col-12">
          <div class="text-left">
            <h1><b>Supervisory Team</b></h1>
            <h6><a href="https://www.uwl.ac.uk/staff/massoud-zolgharni" target="_blank" rel="noopener noreferrer">Professor Massoud Zolgharni</a></h6>
            <h6><a href="https://www.imperial.ac.uk/people/d.francis" target="_blank" rel="noopener noreferrer">Professor Darrel Francis</a></h6>
          </div>
        </div>
      </div>

      <section id="project-body">
        <div class="project-intro">
          <div class="container">
            <div class="row justify-content-left">
              <div class="col-12">
                <hr>
                <h1>Background:</h1>
                <h3>Echocardiography’s diagnostic reliability hinges on image quality, which remains highly operator-dependent. While AI guidance systems can assist image acquisition, existing UIs are often static, non-personalized, and lack explainability—limiting trust and long-term skill development.</h3>

                <h1>Research Questions:</h1>
                <h3>- How can adaptive user interfaces improve AI guidance for users of varying expertise?</h3>
                <h3>- What explainable AI (XAI) features foster trust, learning, and autonomy in clinical workflows?</h3>
                <h3>- How do adaptive and explainable UIs compare with conventional static systems in usability, performance, and user experience?</h3>

                <h1>Aim and Objectives:</h1>
                <h3>This PhD aims to design, prototype, and evaluate adaptive and explainable UIs for AI-based real-time image quality feedback in echocardiography.</h3>
                <h3>- Define user requirements through interviews with clinicians across skill levels.</h3>
                <h3>- Design interface prototypes integrating adaptive logic and explainable feedback.</h3>
                <h3>- Evaluate performance and usability through controlled simulation-based experiments.</h3>

                <h1>Methodology:</h1>
                <h3>- Year 1: Requirements gathering via literature review and clinician interviews.</h3>
                <h3>- Year 2: Develop interactive UI prototypes with adaptive/XAI features; conduct formative usability tests.</h3>
                <h3>- Year 3: Run a comparative evaluation using a high-fidelity echo simulator, with novice to expert users.</h3>
                <h3>- Analyze trust, task performance, skill perception, and usability using mixed methods.</h3>

                <h1>Clinical Partners:</h1>
                <h3>In collaboration with Imperial College London, clinical experts will support:</h3>
                <h3>- Requirements definition and interface validation.</h3>
                <h3>- Access to echocardiography labs, training programs, and simulator environments.</h3>

                <br>
                <h3>For more information about the project, please contact <a href="https://www.uwl.ac.uk/staff/massoud-zolgharni" target="_blank" rel="noopener noreferrer">Professor Massoud Zolgharni</a></h3>
                <br>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>

  <footer id="footer">
    <div class="container d-md-flex py-4">
      <div class="me-md-auto text-center text-md-start">
        <div class="copyright">
          &copy; Copyright <strong><span>IntSaV</span></strong>. All Rights Reserved
        </div>
      </div>
      <div class="social-links text-center text-md-right pt-3 pt-md-0">
        <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
        <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
        <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
        <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
        <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
      </div>
    </div>
  </footer>

  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/purecounter/purecounter.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="assets/js/main.js"></script>
</body>

</html>