From e99dd48ca3bcfc6ca3b852ffda2b3c5f5082a2d5 Mon Sep 17 00:00:00 2001 From: Delirium Date: Tue, 16 Apr 2024 13:49:18 +0200 Subject: [PATCH] feat ui: some utx improvements (#2092) --- .../components/UsabilityTesting/SidePanel.tsx | 4 +-- .../UsabilityTesting/StepsModal.tsx | 36 +++++++++++++++---- .../components/UsabilityTesting/TestEdit.tsx | 4 +-- .../UsabilityTesting/UsabilityTesting.tsx | 4 +-- frontend/app/mstore/uxtestingStore.ts | 22 ++---------- 5 files changed, 36 insertions(+), 34 deletions(-) diff --git a/frontend/app/components/UsabilityTesting/SidePanel.tsx b/frontend/app/components/UsabilityTesting/SidePanel.tsx index e6f798b90..ce6784083 100644 --- a/frontend/app/components/UsabilityTesting/SidePanel.tsx +++ b/frontend/app/components/UsabilityTesting/SidePanel.tsx @@ -31,9 +31,7 @@ const SidePanel = observer(({ onSave, onPreview, taskLen, isStartingPointValid } />
- 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.
diff --git a/frontend/app/components/UsabilityTesting/StepsModal.tsx b/frontend/app/components/UsabilityTesting/StepsModal.tsx index e6a49d7ed..243b6a507 100644 --- a/frontend/app/components/UsabilityTesting/StepsModal.tsx +++ b/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'} /> +
+
Example:
+ +
Instructions @@ -49,8 +63,15 @@ function StepsModal({ rows={5} onChange={(e) => setDescription(e.target.value)} placeholder={'Task instructions'} - className={'mb-4'} /> +
+
Example:
+
    +
  1. Search for "Sustainable T-shirt".
    2. +
  2. Pick a product from the results.
    3. +
  3. Note/Callout the ease of finding it.
    4. +
+
Allow participants to type an answer @@ -61,7 +82,8 @@ function StepsModal({ unCheckedChildren="No" />
- 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.
diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx index 5215471fc..37ff58535 100644 --- a/frontend/app/components/UsabilityTesting/TestEdit.tsx +++ b/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 ? ( - Test will begin on this page. + 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. ) : ( Starting point URL is invalid. )} diff --git a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx index 177adfc4f..b39e2128b 100644 --- a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx +++ b/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(null); @@ -76,7 +76,7 @@ function TestsTable() { onOk={() => onClose(true)} onCancel={() => onClose(false)} footer={ -