feat ui: some utx improvements (#2092)

frontend/app/components/UsabilityTesting/SidePanel.tsx

@@ -31,9 +31,7 @@ const SidePanel = observer(({ onSave, onPreview, taskLen, isStartingPointValid }
           />
         </div>
         <div className={'text-disabled-text text-sm'}>
-          If required, enable camera and mic access to observe participants' facial expressions and
-          verbal feedback in real-time, providing deeper insights into their user experience during
-          the test.
+          Enable camera and mic options to watch participants' reactions and hear their comments for better insights into their experience.
         </div>
       </div>
 

frontend/app/components/UsabilityTesting/StepsModal.tsx

@@ -1,6 +1,10 @@
-import { UxTask } from 'App/services/UxtestingService';
-import React from 'react';
 import { Button, Input, Switch, Typography } from 'antd';
+import React from 'react';
+
+
+
+import { UxTask } from 'App/services/UxtestingService';
+
 
 function StepsModal({
   onAdd,
@@ -14,8 +18,12 @@ function StepsModal({
   typingEnabled?: boolean;
 }) {
   const [title, setTitle] = React.useState(editTask?.title ?? '');
-  const [description, setDescription] = React.useState(editTask?.description ?? '');
-  const [isAnswerEnabled, setIsAnswerEnabled] = React.useState(editTask?.allowTyping ?? typingEnabled);
+  const [description, setDescription] = React.useState(
+    editTask?.description ?? ''
+  );
+  const [isAnswerEnabled, setIsAnswerEnabled] = React.useState(
+    editTask?.allowTyping ?? typingEnabled
+  );
 
   const save = () => {
     onAdd({
@@ -39,8 +47,14 @@ function StepsModal({
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder={'Task title'}
-          className={'mb-4'}
         />
+        <div className={'text-sm mb-4 mt-2'}>
+          <div className={'font-semibold'}>Example:</div>
+          <ul className={'list-disc list-inside'}>
+            <li>Task: Finding a specific product on shopping.com</li>
+            <li>Question: Find a specific product on shopping.com?</li>
+          </ul>
+        </div>
         <Typography.Title level={5} style={{ marginBottom: 4 }}>
           Instructions
         </Typography.Title>
@@ -49,8 +63,15 @@ function StepsModal({
           rows={5}
           onChange={(e) => setDescription(e.target.value)}
           placeholder={'Task instructions'}
-          className={'mb-4'}
         />
+        <div className={'text-sm mb-4 mt-2'}>
+          <div className={'font-semibold'}>Example:</div>
+          <ol className={'list-decimal list-inside'}>
+            <li>Search for "Sustainable T-shirt".</li>
+            <li>Pick a product from the results.</li>
+            <li>Note/Callout the ease of finding it.</li>
+          </ol>
+        </div>
         <Typography.Title level={5} style={{ marginBottom: 4 }}>
           Allow participants to type an answer
         </Typography.Title>
@@ -61,7 +82,8 @@ function StepsModal({
           unCheckedChildren="No"
         />
         <div className={'text-disabled-text mb-4 mt-1'}>
-          Enabling this option will show a text field for participants to type their answer.
+          Enabling this option will show a text field for participants to type
+          their answer.
         </div>
       </div>
       <div className={'flex gap-2'}>

frontend/app/components/UsabilityTesting/TestEdit.tsx

@@ -36,7 +36,7 @@ function TestEdit() {
   // @ts-ignore
   const { siteId, testId } = useParams();
   const [hasChanged, setHasChanged] = React.useState(testId === 'new');
-  const [typingEnabled, setTypingEnabled] = React.useState(false);
+  const [typingEnabled, setTypingEnabled] = React.useState(true);
   const { uxtestingStore } = useStore();
   const [newTestTitle, setNewTestTitle] = React.useState('');
   const [newTestDescription, setNewTestDescription] = React.useState('');
@@ -223,7 +223,7 @@ function TestEdit() {
               }}
             />
             {uxtestingStore.instance!.startingPath === 'https://' || isStartingPointValid ? (
-              <Typography.Text>Test will begin on this page.</Typography.Text>
+              <Typography.Text>The test starts at this URL, but not everyone visiting the link will see it. After publishing, you'll get a Distribution URL to share with selected participants.</Typography.Text>
             ) : (
               <Typography.Text color={'red'}>Starting point URL is invalid.</Typography.Text>
             )}

frontend/app/components/UsabilityTesting/UsabilityTesting.tsx

@@ -19,7 +19,7 @@ const { Search } = Input;
 const PER_PAGE = 10;
 
 let debouncedSearch: any = () => null;
-const defaultDescription = `To evaluate the usability of [Feature Name], focusing on user interaction, efficiency, and satisfaction. The aim is to identify any usability issues that users may encounter, understand how they navigate [Feature Name], and gauge the intuitiveness of the workflow.`;
+const defaultDescription = `To assess how easy it is to use [Feature Name], we'll look at how users interact with it, how efficient it is, and if they're happy using it.`;
 
 function TestsTable() {
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -76,7 +76,7 @@ function TestsTable() {
         onOk={() => onClose(true)}
         onCancel={() => onClose(false)}
         footer={
-          <Button type={'primary'} onClick={() => onClose(true)}>
+          <Button type={'primary'} disabled={newTestTitle.trim().length === 0} onClick={() => onClose(true)}>
             <Space align={'center'}>
               Continue
               <ArrowRightOutlined rev={undefined} />

frontend/app/mstore/uxtestingStore.ts

@@ -27,27 +27,9 @@ interface Response {
   duration: number;
 }
 
-const defaultGuidelines = `Introduction:
-Thank you for participating in this important stage of our [Website/App] development. Your insights will help us enhance the [Desktop/Mobile] experience for all users.
-
-Before You Begin:
-• Device: Ensure you're using a [Desktop/Mobile] for this test.
-
-• Environment: Choose a quiet location where you can focus without interruptions.
-
-Test Guidelines:
-1. Task Flow: You will perform a series of tasks as you normally would when using a [Website/App].
-
-2. Think Aloud: Please verbalize your thoughts. If something is confusing, interesting, or pleasing, let us know.
-
-3. No Right or Wrong: There are no correct answers here, just your honest experience.
-
-4. Pace Yourself: Take your time, there's no rush to complete the tasks quickly.
-
-5. Technical Issues: If you encounter any issues, please describe what you were attempting to do when the issue occurred.
-`;
+const defaultGuidelines = '';
 const defaultConclusion =
-  'Thank you for participating in our usability test. Your feedback is invaluable to us and will contribute significantly to improving our product.';
+  `Thank you for your feedback. It's very important and will help us improve our product.`;
 
 export default class UxtestingStore {
   client = uxtestingService;